Angular at Scale | Web Developer Chemnitz

Transcript

1. Angular at Scale …with Redux powered by NgRx
2. Gregor Woiwode
3. Gregor Woiwode co-IT.eu GmbH @GregOnNet
4. Kentan NgRx Ducks Schematics
5. @GregOnNet Topics Common Pitfalls Why, How & What of State Management Redux Architecture NgRx platform
6. function iDoToMuch(input: any) { if (input.hasPropertyA) { !/* !!... !*/ if (input.hasAlsoPropertyA2) { !/* !!... !*/ } else if (input.hasAlsoPropertyA3) { input.propertyList.map(property !=> { !/* !!... !*/ }); } } if (input.hasPropertyB) { !/* !!... !*/ } input = updateInput(input); return input.fullFillsCondition ? changeInputTheOneWay(input) : changeInputTheOtherWay(input); } Nested Code Blocks Cyclometic Complexity of 10 Tests??? Complexity @GregOnNet
7. @GregOnNet
8. Modal Wrapper Monoliths Modal Stepper Questionnaire Button Group @GregOnNet
9. Modal Wrapper Monoliths Modal Stepper Questionnaire Button Group No clear API Deeply nested Components Hard for others to understand Hard to maintain @GregOnNet
10. Monoliths Reduce Component Nesting Think in APIs Put a smile on your colleagues’ face @GregOnNet
11. Learnings Applying valuable patterns is hard. It is nearly impossible to know the whole Project you are working on. It is often ignored that requirements change over time. @GregOnNet
12. Decentralised state @GregOnNet State is spread across multiple components.
13. @GregOnNet Distant leaf components need access to state. Decentralised state
14. Centralised state Interact with single source @GregOnNet
15. Store Redux Component Action Reducers @GregOnNet Dispatch Processed Mutate Read
16. Redux Component Action Reducers @GregOnNet Read Write
17. Redux implements Command-Query-Segregation. @GregOnNet
18. Redux separates read- and write logic. @GregOnNet
19. Redux allows writing smaller modules. @GregOnNet
20. Redux decentralises your code. @GregOnNet
21. @GregOnNet interface Action { type: string } Action
22. @GregOnNet interface Action { type: string } Action type needs to be unique Represents an interaction with UI or Data Takes an optional payload or metadata
23. @GregOnNet Action interface Action<T> { type: string payload: T }
24. Reducer Reducer A Reducer B Reduce @GregOnNet A reducer is responsible for processing actions
25. Reducer Reducer A Reducer B Reduce @GregOnNet
26. Reducer Reducer B @GregOnNet Function
27. Store Principles @GregOnNet Read-Only Single Source of Truth Mutations are made by pure functions
28. Pure function @GregOnNet function iAmPure(input: string): string { return `${input}1`; }
29. Impure function @GregOnNet function iAmImpurePure(): string { const input = document.querySelector('input'); return `${input.value}1`; }
30. Store-Slices @GregOnNet Reducer B Reducer A Reducer C
31. Store @GregOnNet Reducer B Reducer A Reducer C const state = { featureA: { !/* !!... !*/ }, featureB: { !/* !!... !*/ }, featureC: { !/* !!... !*/ } } Store is an In-Memory data structure
32. @GregOnNet NgRx https://ngrx.io/
33. @GregOnNet @NgModule({ imports: [ StoreModule.forRoot(reducers, { }) !/* !!... !*/ }) export class AppModule { } StoreModule
34. @GregOnNet @NgModule({ imports: [ StoreModule.forRoot(reducers, { runtimeChecks: { } }) !/* !!... !*/ }) export class AppModule { } StoreModule
35. @GregOnNet StoreModule @NgModule({ imports: [ StoreModule.forRoot(reducers, { runtimeChecks: { strictActionImmutability: true, strictActionSerializability: true, strictStateImmutability: true, strictStateSerializability: true } }) !/* !!... !*/ }) export class AppModule { }
36. @GregOnNet StoreModule - reducers export const reducers: ActionReducerMap<State> = { counter: counterReducer, logger: loggerReducer } Reducers get combined feature name
37. @GregOnNet createAction export const increment = createAction( '[Counter] Increment by one' ); !// createAction(); !// !// { !// type: '[Counter] Increment by one' !// }
38. @GregOnNet createAction & payload export const add = createAction( '[Counter] Add value', props<{ payload: { value: number } }>() ); !// createAction({ payload: { value: 1 } }) !// !// { !// type:'[Counter] Add value', !// payload: { value: 1} !// }
39. @GregOnNet Read from the store export class SimpleCounterComponent { count$: Observable<number>; constructor(private store: Store<State>) { this.count$ = this.store.pipe( select(state !=> state.counter.count) ); } }
40. @GregOnNet DEMO
41. Redux - Inter app communication Component Action Reducers @GregOnNet Dispatch Processed Mutate Read
42. Redux - Side effects Component Action Reducers @GregOnNet Dispatch Action Effects Dispatch
43. @GregOnNet @NgModule({ imports: [ !/* !!... !*/, EffectsModule.forRoot([CounterEffects]) }) export class AppModule { } EffectsModule
44. Redux - Side effects @GregOnNet @Injectable() export class CounterEffects { randomAdd = createEffect(() !=> this.actions.pipe( ofType(randomAdd) )); constructor(private actions: Actions) { } }
45. Redux - Side effects @GregOnNet @Injectable() export class CounterEffects { randomAdd = createEffect(() !=> this.actions.pipe( ofType(randomAdd), switchMap((action !=> !/* e.g. call API !*/) )); constructor(private actions: Actions) { } }
46. Redux - Side effects @GregOnNet @Injectable() export class CounterEffects { randomAdd = createEffect(() !=> this.actions.pipe( ofType(randomAdd), switchMap((action !=> !/* e.g. call API !*/), map((result !=> randomAddSuccess(result)) )); constructor(private actions: Actions) { } }
47. Redux - Side effects @GregOnNet @Injectable() export class CounterEffects { randomAdd = createEffect(() !=> this.actions.pipe( ofType(randomAdd), switchMap((action !=> !/* e.g. call API !*/), ), { dispatch: true|false }); constructor(private actions: Actions) { } }
48. Redux - Side effects @GregOnNet @Injectable() export class CounterEffects { randomAdd = createEffect(() !=> this.actions.pipe( ofType(randomAdd), switchMap((action !=> !/* call API !*/), map((result !=> randomAddSuccess(result)) ), { resubscribeOnError: true|false }); constructor(private actions: Actions) { } }
49. @GregOnNet DEMO
50. Selectors @GregOnNet this.store.pipe( select(state !=> state.counter.count) ); Inline selectors
51. Selectors @GregOnNet this.store.pipe( select(state !=> state.cou ); Break quickly when Store changes Not reusable
52. Selectors @GregOnNet const featureCounter = createFeatureSelector<CounterState>('counter'); feature name Jump to a feature
53. Selectors @GregOnNet export const count = createSelector(featureCounter, s !=> s.count); Project data const featureCounter = createFeatureSelector<CounterState>('counter');
54. Selectors @GregOnNet Combine selectors aggregating data export const infoWithCurrentCount = createSelector( infoMessage, count, (messages, total) !=> messages.map(message !=> `${message} (Total: ${total})` ) );
55. @GregOnNet Selectors simplify Store changes.
56. @GregOnNet are composable. Selectors
57. @GregOnNet use memoization. Selectors
58. @GregOnNet Selectors Memoization 1 selector calculate 2 selector use cache 3 selector calculate
59. @GregOnNet DEMO
60. What we have covered… Redux Architecture Actions & Reducers StoreDevtools Effects Selectors @ngrx/entity @ngrx/router-store @ngrx/data
61. Closing thoughts On-Board your team patiently. Modeling application state has lots of overlaps
 with Requirements Engineering. Redux makes your App more predictive.
62. Gregor Woiwode Thank you for having me! @GregOnNet https://bit.do/ng-scale-chemnitz https://stackblitz.com/edit/ngrx-8-playground