Quality with Angular: Tools and Processes

This talk introduces essential tools that support the entire development process of an Angular application, from the initial analysis to deployment and ongoing maintenance. Topics include ESLint, Husky, Commit Citizen, Sheriff, SonarQube, Detective, Sentry, GitHub Actions, and Nx Release. Additionally, we will explore the role of Storybook for UI components, Docusaurus for documentation, and general integration testing. The goal is to demonstrate how these tools help ensure quality, accelerate development processes, and improve efficiency.

Transcript

1. Rainer Hahnekamp 5. März 2025 Basta Qualität mit Angular Werkzeuge und Prozesse
2. About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io NgRx Team (Trusted Collaborator) • Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality
4. RainerHahnekamp Why tooling when I use the Angular CLI?
5. RainerHahnekamp What about Nx?
6. RainerHahnekamp Code Guidelines • ESLint ◦ Angular-ESLint ◦ Unused Imports • Prettier • Husky
7. RainerHahnekamp ESLint • Stay with pre-defined configs • Switch to flat config • Angular-ESLint ◦ Ensure that templates and TypeScript are parseable • Enable automatic fix in IDE • Easy to write your own Rules • Check libs for accompanying rules ◦ RxJS ◦ NgRx ◦ Cypress ◦ Playwright ◦ Storybook • Run as Git Hook
8. RainerHahnekamp MVP: Define Plugin export default { plugins: { custom: { rules: { 'capitalized-classes': { create(context) { return { ClassDeclaration(node) { context.report({node, message: "This is a class"}) } }; } } } } } }
9. RainerHahnekamp MVP: Activate Plugin export default { plugins: { custom: { rules: { 'capitalized-classes': { create(context) { return { ClassDeclaration(node) { if (node.id.name.match(/^[a-z]/)) { context.report({node, message: "This is a class"}) } } // ...
10. RainerHahnekamp https://typescript-eslint.io/play
11. RainerHahnekamp Prettier • Understands Angular templates • No internal discussions "use as is" • Don't use ESLint Plugin • Use IDE Integration
12. RainerHahnekamp Husky • Automatic Git Hooks • Common Use Cases ◦ ESLint ◦ Prettier ◦ Tests ◦ Commit Messages • Combine with lint-staged • Careful with long-running Hooks
13. RainerHahnekamp Quality • SonarQube • Detective • Sheriff
14. RainerHahnekamp SonarQube • CI-embeddable • "Quality Gates" • Improvements incrementally ◦ "New Code" approach • Code Coverage requires manual config • Support for common CI • ESLint plugin
15. RainerHahnekamp Detective • Analysis Tool • Based on Forensics • Finds Files which are always changed together • Indicators for ◦ Poor Modules ◦ High Coupling
16. RainerHahnekamp Sheriff • Module Encapsulation • Dependency Rules • ESLint & CLI Mode • Framework Agnostic
17. RainerHahnekamp Miscellaneous • Sentry • Renovate Bot • Playwright
18. RainerHahnekamp Sentry • Collects Errors ◦ Groups them into Categories ◦ Prioritization • Supports Sourcemaps • Integration to Ticket System • Tracing • Support for further Metrics
19. RainerHahnekamp Release Management • Documentation ◦ Storybook ◦ Docusaurus ◦ TypeScript • Conventional Commits • Nx Release
20. RainerHahnekamp Storybook • Started as Widget Gallery • Interactive Documentation • Supports Testing ◦ Visual Regression ◦ A11y Testing ◦ other types… • Standard Tool
21. RainerHahnekamp Commitlint • Standardized Commit Message • Contains information about impact of change (none, fix, feat, breaking) • Optional Scope • Format: ◦ [type](scope?): message description
22. RainerHahnekamp Commitlint Versioning Rules • Major Change ◦ Every type with an ! ◦ Description starting with BREAKING CHANGE • Minor Change ◦ Type feat • Fix ◦ Type fix • None ◦ build, chore, ci, docs, perf, refactor, style, test
23. RainerHahnekamp Nx Release • Automatization ◦ Version ◦ ChangeLog ◦ Publish • Version Features ◦ Automatic Versioning with Commitlint ◦ Manual Versioning • Release Groups ◦ Release multiple packages together
24. RainerHahnekamp Initial Steps: Pre-Built Check { "release": { "version": { "preVersionCommand": "npx nx run-many -t build" } } }
25. RainerHahnekamp Initial Steps: Automatic Version Numbers { "release": { "version": { "preVersionCommand": "npx nx run-many -t build", "conventionalCommits": true } } }
26. RainerHahnekamp Important Release commands • npx nx release --first-release • # define version npx nx release 1.0.0 • # increase only version and create ChangeLog npx nx release -–skip-publish • npx nx release version • npx nx release changelog • npx nx release publish