Refactoring in Angular via Metrics, Modularity & Testing

Slide 1

Slide 1 text

RainerHahnekamp Refactoring in Angular via Metrics, Modularity & Testing Rainer Hahnekamp 18. June 2024

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

RainerHahnekamp Why? Improve maintainability Find bugs faster Improve readability Reduce technical debt More performance

Slide 4

Slide 4 text

RainerHahnekamp Refactoring Better code without changing the app's behavior

Slide 5

Slide 5 text

RainerHahnekamp Refactoring process Identify Implement Verify

Slide 6

Slide 6 text

RainerHahnekamp Levels of refactoring File-level

Slide 7

Slide 7 text

RainerHahnekamp Levels of refactoring File-level Module-level

Slide 8

Slide 8 text

RainerHahnekamp Levels of refactoring File-level Module-level Application-level

Slide 9

Slide 9 text

RainerHahnekamp File-level

Slide 10

Slide 10 text

RainerHahnekamp ● Cyclomatic complexity ● Cognitive complexity ● LOC / function ● Code duplication ● Misc. ESLint rules Identify Implement Verify File-level

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

RainerHahnekamp Demo

Slide 13

Slide 13 text

RainerHahnekamp Tooling ● ESLint ● SonarQube / SonarCloud ● Codeﬂow ● CodeClimate Identify Implement Verify File-level

Slide 14

Slide 14 text

RainerHahnekamp Demo

Slide 15

Slide 15 text

RainerHahnekamp Identify Implement Verify ● Function extracting ● Simplify conditions ● Strategy patterns ● Removing dead code ● ... File-level

Slide 16

Slide 16 text

RainerHahnekamp Unit Tests Integration Tests Component Tests E2E Tests Identify Implement Verify File-level

Slide 17

Slide 17 text

RainerHahnekamp Module-level

Slide 18

Slide 18 text

RainerHahnekamp Reduce complexity via divide and conquer ● Avoids intermingling ● Reduces impact of changes ● Scales teams and code Identify Implement Verify Module-level

Slide 19

Slide 19 text

RainerHahnekamp Identify Implement Verify Module-level Tooling Sheriff Nx ESLint

Slide 20

Slide 20 text

RainerHahnekamp Identify Implement Verify Module-level Tooling Sheriff Nx ESLint

Slide 21

Slide 21 text

RainerHahnekamp Identify Implement Verify Module-level Shared Forms Grid Error Handling Widgets Backend Middleware ... App Shell Domain Domain Domain Domain

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

RainerHahnekamp Unit Tests Integration Tests Component Tests E2E Tests Identify Implement Verify Module-level

Slide 24

Slide 24 text

RainerHahnekamp Application-level

Slide 25

Slide 25 text

RainerHahnekamp Examples ● Switching to signals ● Using NgRx ● Re-arrange modules ● ... Identify Implement Verify Application-level

Slide 26

Slide 26 text

RainerHahnekamp Metrics ● Code Churn ● Maintainability index ● Halstead complexity ● Abstract metrics: Amount of Bugs, Velocity, Estimation ● Experience & Intuition Identify Implement Verify Application-level

Slide 27

Slide 27 text

RainerHahnekamp Unit Tests Integration Tests Component Tests E2E Tests Identify Implement Verify Application-level

Slide 28

Slide 28 text

RainerHahnekamp When? ● File-level ○ Preventative: "Boy Scout rule" ○ Reserve time in every sprint ● Module- & application-level ○ Proper planning necessary

Slide 29

Slide 29 text

RainerHahnekamp Don't trust numbers!

Slide 30

Slide 30 text

RainerHahnekamp

Slide 31

Slide 31 text

RainerHahnekamp Don't trust numbers! Don't trust yourself!

Slide 32

Slide 32 text

RainerHahnekamp

Slide 33

Slide 33 text

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