Refactoring in Angular via Metrics, Modularity & Testing

Effective refactoring in Angular hinges on a few critical practices. This talk covers three main areas: modularization, metrics, and testing.

We begin with the importance of a modular application structure, which lays the ground work for easier refactoring. Next, we'll explore how to leverage metrics to identify code that needs refactoring. Finally, we'll discuss essential testing techniques to ensure that your refactoring efforts do not break existing functionality.
By the end of this session, you'l be equipped with practical strategies to keep your Angular codebase clean and maintainable.

Transcript

1. RainerHahnekamp Refactoring in Angular via Metrics, Modularity & Testing Rainer Hahnekamp 18. June 2024
2. RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io • Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp
3. RainerHahnekamp Why? Improve maintainability Find bugs faster Improve readability Reduce technical debt More performance
4. RainerHahnekamp Refactoring Better code without changing the app's behavior
5. RainerHahnekamp Refactoring process Identify Implement Verify
6. RainerHahnekamp Levels of refactoring File-level
7. RainerHahnekamp Levels of refactoring File-level Module-level
8. RainerHahnekamp Levels of refactoring File-level Module-level Application-level
9. RainerHahnekamp File-level
10. RainerHahnekamp • Cyclomatic complexity • Cognitive complexity • LOC / function • Code duplication • Misc. ESLint rules Identify Implement Verify File-level
11. RainerHahnekamp Example: cyclomatic complexity • Counts branches per function • Runs on a function-level • Supported by most tools • Invented in 70s by Thomas McCabe Identify Implement Verify File-level
12. RainerHahnekamp Demo
13. RainerHahnekamp Tooling • ESLint • SonarQube / SonarCloud • Codeflow • CodeClimate Identify Implement Verify File-level
14. RainerHahnekamp Demo
15. RainerHahnekamp Identify Implement Verify • Function extracting • Simplify conditions • Strategy patterns • Removing dead code • ... File-level
16. RainerHahnekamp Unit Tests Integration Tests Component Tests E2E Tests Identify Implement Verify File-level
17. RainerHahnekamp Module-level
18. RainerHahnekamp Reduce complexity via divide and conquer • Avoids intermingling • Reduces impact of changes • Scales teams and code Identify Implement Verify Module-level
19. RainerHahnekamp Identify Implement Verify Module-level Tooling Sheriff Nx ESLint
20. RainerHahnekamp Identify Implement Verify Module-level Tooling Sheriff Nx ESLint
21. RainerHahnekamp Identify Implement Verify Module-level Shared Forms Grid Error Handling Widgets Backend Middleware ... App Shell Domain Domain Domain Domain
22. RainerHahnekamp Identify Implement Verify Module-level Domain Feature (Container Cmp.) Data UI (Presentational Cmp.) Models Domain Feature B Infrastructure Feature A Feature C Submodules: Variation I Submodules: Variation II
23. RainerHahnekamp Unit Tests Integration Tests Component Tests E2E Tests Identify Implement Verify Module-level
24. RainerHahnekamp Application-level
25. RainerHahnekamp Examples • Switching to signals • Using NgRx • Re-arrange modules • ... Identify Implement Verify Application-level
26. RainerHahnekamp Metrics • Code Churn • Maintainability index • Halstead complexity • Abstract metrics: Amount of Bugs, Velocity, Estimation • Experience & Intuition Identify Implement Verify Application-level
27. RainerHahnekamp Unit Tests Integration Tests Component Tests E2E Tests Identify Implement Verify Application-level
28. RainerHahnekamp When? • File-level ◦ Preventative: "Boy Scout rule" ◦ Reserve time in every sprint • Module- & application-level ◦ Proper planning necessary
29. RainerHahnekamp Don't trust numbers!
30. RainerHahnekamp
31. RainerHahnekamp Don't trust numbers! Don't trust yourself!
32. RainerHahnekamp
33. RainerHahnekamp Module-level Application-level File-level Identify Implement Verify • Cyclomatic complexity • LOC • Standard ESLint rules • Module Boundaries • Code Churn • Maintenance Index • Halstead complexity • Soft metrics • Common techniques • Sheriff • Nx • ESLint plugins • Unit Tests • Component Tests • Component Tests • Integration Tests • Integration Tests • E2E Tests