Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Refactoring in Angular via Metrics, Modularity & Testing

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.

Rainer Hahnekamp

June 18, 2024

More Decks by Rainer Hahnekamp

Other Decks in Technology


  1. 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
  2. RainerHahnekamp • Cyclomatic complexity • Cognitive complexity • LOC /

    function • Code duplication • Misc. ESLint rules Identify Implement Verify File-level
  3. 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
  4. RainerHahnekamp Tooling • ESLint • SonarQube / SonarCloud • Codeflow

    • CodeClimate Identify Implement Verify File-level
  5. RainerHahnekamp Identify Implement Verify • Function extracting • Simplify conditions

    • Strategy patterns • Removing dead code • ... File-level
  6. RainerHahnekamp Reduce complexity via divide and conquer • Avoids intermingling

    • Reduces impact of changes • Scales teams and code Identify Implement Verify Module-level
  7. RainerHahnekamp Identify Implement Verify Module-level Shared Forms Grid Error Handling

    Widgets Backend Middleware ... App Shell Domain Domain Domain Domain
  8. 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
  9. RainerHahnekamp Examples • Switching to signals • Using NgRx •

    Re-arrange modules • ... Identify Implement Verify Application-level
  10. RainerHahnekamp Metrics • Code Churn • Maintainability index • Halstead

    complexity • Abstract metrics: Amount of Bugs, Velocity, Estimation • Experience & Intuition Identify Implement Verify Application-level
  11. RainerHahnekamp When? • File-level ◦ Preventative: "Boy Scout rule" ◦

    Reserve time in every sprint • Module- & application-level ◦ Proper planning necessary
  12. 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