Workshops

Angular Code Quality by Rainer Hahnekamp - Master Class (stationary & online)

What You Will Learn:

In this workshop, you’ll learn how to significantly enhance the quality and maintainability of your Angular projects through a focused, one-day intensive session.

By the end of the day, you will be able to:
✔️ Create Custom ESLint Rules: Craft your own ESLint rules and harness existing ones to tailor code quality checks to your team’s specific needs.
✔️ Develop Angular Schematics: Build your own schematics from scratch to automate and standardize the creation of code structures within your projects.
✔️ Apply Code Metrics: Utilize key metrics like the Maintainability Index, Cyclomatic Complexity, and Code Churn to analyze and improve your project’s performance.

We’ll kick off with ESLint, where you’ll learn to craft your own rules step-by-step. By the end, you’ll be equipped to create customizable rules that not only fix code automatically but also efficiently validate Angular templates.

The journey continues with Angular Schematics. You’ll start from the basics, learning how to develop them to automate the generation of repetitive code segments and ensure consistent use of libraries across your projects. You’ll also learn how to integrate these tools into the powerful ng update process.

We'll also take a look at the Nx Generators—a powerful enhancement to Schematics that adds features and tools for more sophisticated development workflows.

We’ll conclude the workshop by exploring code metrics, focusing on key indicators such as the Maintainability Index, Cyclomatic Complexity, and Code Churn. You will understand how these metrics operate, what benefits they offer, and how they can be used to gauge and improve the health of your codebase.
Additionally, we’ll cover popular tooling such as SonarQube and discuss how to seamlessly integrate it into your CI (GitHub Actions) process for continuous quality checks.

Detailed Agenda

ESLint
▪︎ Flat vs legacy config
▪︎ Creating rules
▪︎ Processing TypeScript with typescript-eslint
▪︎ TypeScript AST
▪︎ Customizable rules
▪︎ Creating plugins
▪︎ Testing rules

Schematics
▪︎ Setting up Schematics
▪︎ Using template for code generation
▪︎ Parameterizing Schematics
▪︎ Accessing the file system
▪︎ Managing dependencies with Schematics
▪︎ Testing schematics
▪︎ Bundling and publishing
▪︎ ng add & ng update
▪︎ Reading templates
▪︎ Nx Generators

Metrics
▪︎ Understanding common metrics
▪︎ Using SonarQube
▪︎ Combining Quality Gates & GitHub Actions