Scalable Angular Applications

Transcript

1. Scalable Angular Applications Denis Kyashif
2. @deniskyashif deniskyashif deniskyashif.github.io
4. Scalability
5. Scalability •Dynamic Requirements
6. Scalability •Dynamic Requirements •Increasing load
7. Scalability •Dynamic Requirements •Increasing load •Growing complexity
8. Scalability •Dynamic Requirements •Increasing load •Growing complexity •Developer turnover / Increasing team size
9. Software Design
10. Source: https://martinfowler.com/bliki/DesignStaminaHypothesis.html The Design Stamina Hypothesis
13. End Goal •Modular application •Predictable state management •Async data flow handling •Increased load capacity •Easy to test
16. class Queue<T> { constructor(private data: T[] = []) { } enqueue(item: T) { return this.data.push(item); } dequeue = () : T => this.data.shift() } const n: number = 5; const queue = new Queue<number>(); queue.enqueue(n); queue.enqueue('5'); // Error TypeScript
17. class Queue<T> { constructor(private data: T[] = []) { } enqueue(item: T) { return this.data.push(item); } dequeue = () : T => this.data.shift() } const n: number = 5; const queue = new Queue<number>(); queue.enqueue(n); queue.enqueue('5'); // Error TypeScript
18. class Queue<T> { constructor(private data: T[] = []) { } enqueue(item: T) { return this.data.push(item); } dequeue = () : T => this.data.shift() } const n: number = 5; const queue = new Queue<number>(); queue.enqueue(n); queue.enqueue('5'); // Error TypeScript
19. class Queue<T> { constructor(private data: T[] = []) { } enqueue(item: T) { return this.data.push(item); } dequeue = () : T => this.data.shift(); } const n: number = 5; const queue = new Queue<number>(); queue.enqueue(n); queue.enqueue('5'); // Error TypeScript
21. A set of libraries for composing asynchronous and event-based programs using observable sequences.
22. const numbers = Observable.create(observer => { observer.next(1); observer.next(2); observer.next(3); setTimeout(() => { observer.next(4); // happens asynchronously }, 1000); }); numberEmitter.subscribe(console.log); // 1, 2, 3, ... 4 Observables
23. const numbers = Observable.create(observer => { observer.next(1); observer.next(2); observer.next(3); setTimeout(() => { observer.next(4); // happens asynchronously }, 1000); }); numberEmitter.subscribe(console.log); // 1, 2, 3, ... 4 Observables
24. const numbers = Observable.create(observer => { observer.next(1); observer.next(2); observer.next(3); setTimeout(() => { observer.next(4); // happens asynchronously }, 1000); }); numberEmitter.subscribe(console.log); // 1, 2, 3, ... 4 Observables
25. Operators const squaresOfEvenNumbers = interval(10) .pipe( filter(x => x % 2 === 0), map(x => x * x) ); squaresOfEvenNumbers.subscribe(console.log); // Output 0, 4, 16, 36...
26. Operators const squaresOfEvenNumbers = interval(10) .pipe( filter(x => x % 2 === 0), map(x => x * x) ); squaresOfEvenNumbers.subscribe(console.log); // Output 0, 4, 16, 36...
27. Operators const squaresOfEvenNumbers = interval(10) .pipe( filter(x => x % 2 === 0), map(x => x * x) ); squaresOfEvenNumbers.subscribe(console.log); // Output 0, 4, 16, 36...
28. Operators const squaresOfEvenNumbers = interval(10) .pipe( filter(x => x % 2 === 0), map(x => x * x) ); squaresOfEvenNumbers.subscribe(console.log); // Output 0, 4, 16, 36...
29. Observable Promise Emits multiple values over a period of time Emits a single value at a time Can be lazy Not lazy Can be cancelled Cannot be cancelled
30. Sample Application
31. Source: git.io/fpqkN
32. Sample Architecture
33. UI Components Facade State Management Data Access
34. UI Components Facade State Management Data Access
35. Container • Passes data to the presentational component • Handles events raised by presentational components • Interacts with the business layer Presentational • Takes data only as an @Input() • Delegates the event handling to the container via @Output() Components
36. Container Component Facade Presentational Component @Output() @Input() Components Actions Data
37. Source: git.io/fpqkN
38. Course Board Course List Course 1 Course 2 Course Details
39. course-details.component.ts export class CourseDetailsComponent { @Input() course: Course; @Output() delete = new EventEmitter<Course>(); constructor() { } onDeleteClick(course: Course) { this.delete.emit(course); } ... }
40. course-details.component.ts export class CourseDetailsComponent { @Input() course: Course; @Output() delete = new EventEmitter<Course>(); constructor() { } onDeleteClick(course: Course) { this.delete.emit(course); } ... }
41. course-board.component.ts export class CourseBoardComponent implements OnInit { courses$: Observable<Course[]>; selectedCourse$: Observable<Course>; constructor(private courses: CoursesStateService) { } ngOnInit() { this.courses.load(); this.courses$ = this.courses.getCourseList(); this.selectedCourse$ = this.courses.getSelectedCourse(); } delete(course: Course) { this.courses.delete(course); } ... }
42. course-board.component.html ... <div> <app-course-list [courses]="courses$ | async" ...></app-course-list> </div> <div> <app-course-details [course]="selectedCourse$ | async" (delete)="delete($event)"> </app-course-details> </div> ...
43. course-board.component.html ... <div> <app-course-list [courses]="courses$ | async" ...></app-course-list> </div> <div> <app-course-details [course]="selectedCourse$ | async" (delete)="delete($event)"> </app-course-details> </div> ...
44. UI Components Facade State Management Data Access
45. Facade A facade is an object that serves as a front-facing interface masking more complex underlying or structural code.
46. Client Classes Subsystem Classes
47. Client Classes Subsystem Classes Facade
48. courses.state.service.ts @Injectable({ providedIn: 'root' }) export class CoursesStateService { constructor(private store: Store<fromCourses.State>) { } load() { this.store.dispatch(new CourseActions.Load()); } getCourseList(): Observable<Course[]> { return this.store.pipe(select(fromCourses.getCourseList)); } getSelectedCourse(): any { return this.store.pipe(select(fromCourses.getSelectedCourse)); } create(course: Course) { this.store.dispatch(new CourseActions.Create(course)); } ... }
49. courses.state.service.ts @Injectable({ providedIn: 'root' }) export class CoursesStateService { constructor(private store: Store<fromCourses.State>) { } load() { this.store.dispatch(new CourseActions.Load()); } getCourseList(): Observable<Course[]> { return this.store.pipe(select(fromCourses.getCourseList)); } getSelectedCourse(): any { return this.store.pipe(select(fromCourses.getSelectedCourse)); } create(course: Course) { this.store.dispatch(new CourseActions.Create(course)); } ... }
50. courses.state.service.ts @Injectable({ providedIn: 'root' }) export class CoursesStateService { constructor(private store: Store<fromCourses.State>) { } load() { this.store.dispatch(new CourseActions.Load()); } getCourseList(): Observable<Course[]> { return this.store.pipe(select(fromCourses.getCourseList)); } getSelectedCourse(): any { return this.store.pipe(select(fromCourses.getSelectedCourse)); } create(course: Course) { this.store.dispatch(new CourseActions.Create(course)); } ... }
51. Predictable State Management
52. UI Components Facade State Management Data Access
53. Or how I stopped worrying and learned to love
54. Source: https://css-tricks.com/learning-react-redux/
55. Redux •Single Source of Truth •State is Read-Only •Changes are made with Pure Functions
56. ngrx
57. State Management Store Reducers Effects Selectors Actions
58. Redux Terms State – an object that stores the state of the app Store – an immutable object that holds the state of the app View – a DOM representation of the state Action – an object describing an event. Used to send information to the store. Reducer – a pure function producing a new state out by given action and current state Selector – a function used to read from the store Effect – a middleware used to run side effects in isolation
59. Component Action Creator Store Reducer dispatch(action) applyReducers(action, state) next(state) newState
60. Component Action Creator Store Reducer dispatch(action) applyReducers(action, state) next(state) newState
61. Component Action Creator Store Reducer dispatch(action) applyReducers(action, state) next(state) newState
62. Component Action Creator Store Reducer dispatch(action) applyReducers(action, state) next(state) newState
63. Component Action Creator Store Reducer dispatch(action) applyReducers(action, state) next(state) newState
64. Component State Service (Facade) Store Reducer select(course) dispatch(new SelectAction(course))) applyReducers(action, state) next(state) New State
65. courses.state.ts export interface CoursesState { readonly courseList: Course[]; readonly selectedCourse?: Course; }
66. course.actions.ts export enum CourseActionTypes { Load = '[COURSE] Load', Create = '[COURSE] Create' ... } export class Load implements Action { readonly type = CourseActionTypes.Load; constructor(public payload: string = '') { } } export class Create implements Action { readonly type = CourseActionTypes.Create; constructor(public payload: Course) { } } ...
67. course.actions.ts export enum CourseActionTypes { Load = '[COURSE] Load', Create = '[COURSE] Create' ... } export class Load implements Action { readonly type = CourseActionTypes.Load; constructor(public payload: string = '') { } } export class Create implements Action { readonly type = CourseActionTypes.Create; constructor(public payload: Course) { } } ...
68. courses.reducer.ts ... export function coursesReducer( state: CoursesState = initialState, action: CourseActionsUnion): CoursesState { switch (action.type) { case CourseActionTypes.LoadSuccess: return { ...state, courseList: action.payload } case CourseActionTypes.CreateSuccess: return { ...state, courseList: [...state.courseList, action.payload] }; case CourseActionTypes.Select: return { ...state, selectedCourse: action.payload }; default: return state; } }
69. courses.reducer.ts ... export function coursesReducer( state: CoursesState = initialState, action: CourseActionsUnion): CoursesState { switch (action.type) { case CourseActionTypes.LoadSuccess: return { ...state, courseList: action.payload } case CourseActionTypes.CreateSuccess: return { ...state, courseList: [...state.courseList, action.payload] }; case CourseActionTypes.Select: return { ...state, selectedCourse: action.payload }; default: return state; } }
70. courses.reducer.ts ... export function coursesReducer( state: CoursesState = initialState, action: CourseActionsUnion): CoursesState { switch (action.type) { case CourseActionTypes.LoadSuccess: return { ...state, courseList: action.payload } case CourseActionTypes.CreateSuccess: return { ...state, courseList: [...state.courseList, action.payload] }; case CourseActionTypes.Select: return { ...state, selectedCourse: action.payload }; default: return state; } }
71. course-board.component.ts export class CourseBoardComponent implements OnInit { ... selectedCourse$: Observable<Course>; constructor(private courses: CoursesStateService) { } ngOnInit() { ... this.selectedCourse$ = this.courses.getSelectedCourse(); } ... }
72. course-board.component.ts export class CourseBoardComponent implements OnInit { ... selectedCourse$: Observable<Course>; constructor(private courses: CoursesStateService) { } ngOnInit() { ... this.selectedCourse$ = this.courses.getSelectedCourse(); } ... }
73. course-board.component.html ... <div> <app-course-details [course]="selectedCourse$ | async"> </app-course-details> </div> ...
74. course-board.component.html ... <div> <app-course-details [course]="selectedCourse$ | async"> </app-course-details> </div> ...
75. Managing Side Effects
76. Component State Service (Facade) Store Reducer login(credentials) dispatch(new LoginAction(credentials)) applyReducers(action, state) next(state) New State Effect Auth API login(credentials) onSuccess(res) dispatch(new LoginSuccessAction(user))
77. Component State Service (Facade) Store Reducer login(credentials) dispatch(new LoginAction(credentials)) applyReducers(action, state) next(state) New State Effect Auth API login(credentials) onSuccess(res) dispatch(new LoginSuccessAction(user))
78. Component State Service (Facade) Store Reducer login(credentials) dispatch(new LoginAction(credentials)) applyReducers(action, state) next(state) New State Effect Auth API login(credentials) onSuccess(res) dispatch(new LoginSuccessAction(user))
79. Component State Service (Facade) Store Reducer login(credentials) dispatch(new LoginAction(credentials)) applyReducers(action, state) next(state) New State Effect Auth API login(credentials) onSuccess(res) dispatch(new LoginSuccessAction(user))
80. Component State Service (Facade) Store Reducer login(credentials) dispatch(new LoginAction(credentials)) applyReducers(action, state) next(state) New State Effect Auth API login(credentials) onSuccess(res) dispatch(new LoginSuccessAction(user))
81. Component State Service (Facade) Store Reducer login(credentials) dispatch(new LoginAction(credentials)) applyReducers(action, state) next(state) New State Effect Auth API login(credentials) onSuccess(res) dispatch(new LoginSuccessAction(user))
82. Component State Service (Facade) Store Reducer login(credentials) dispatch(new LoginAction(credentials)) applyReducers(action, state) next(state) New State Effect Auth API login(credentials) onSuccess(res) dispatch(new LoginSuccessAction(user))
83. Component State Service (Facade) Store Reducer login(credentials) dispatch(new LoginAction(credentials)) applyReducers(action, state) next(state) New State Effect Auth API login(credentials) onSuccess(res) dispatch(new LoginSuccessAction(user))
84. Component State Service (Facade) Store Reducer login(credentials) dispatch(new LoginAction(credentials)) applyReducers(action, state) next(state) New State Effect Auth API login(credentials) onSuccess(res) dispatch(new LoginSuccessAction(user))
85. @Injectable() export class AuthEffects { @Effect() login$ = this.actions$.pipe( ofType<Login>(AuthActionTypes.Login), map(action => action.payload), exhaustMap((auth: Auth) => this.authApi.login(auth).pipe( map(user => new LoginSuccess({ username: auth.username }))) )); constructor(private actions$: Actions, private authApi: AuthApiService) { } } auth.effects.ts
86. @Injectable() export class AuthEffects { @Effect() login$ = this.actions$.pipe( ofType<Login>(AuthActionTypes.Login), map(action => action.payload), exhaustMap((auth: Auth) => this.authApi.login(auth).pipe( map(user => new LoginSuccess({ username: auth.username }))) )); constructor(private actions$: Actions, private authApi: AuthApiService) { } } auth.effects.ts
87. @Injectable() export class AuthEffects { @Effect() login$ = this.actions$.pipe( ofType<Login>(AuthActionTypes.Login), map(action => action.payload), exhaustMap((auth: Auth) => this.authApi.login(auth).pipe( map(user => new LoginSuccess({ username: auth.username }))) )); constructor(private actions$: Actions, private authApi: AuthApiService) { } } auth.effects.ts
88. @Injectable() export class AuthEffects { @Effect() login$ = this.actions$.pipe( ofType<Login>(AuthActionTypes.Login), map(action => action.payload), exhaustMap((auth: Auth) => this.authApi.login(auth).pipe( map(user => new LoginSuccess({ username: auth.username }))) )); constructor(private actions$: Actions, private authApi: AuthApiService) { } } auth.effects.ts
89. auth.reducer.ts export function authReducer(state: AuthState = initialState, action: AuthActionsUnion) { switch (action.type) { case AuthActionTypes.Login: return { ...state, loginPending: true, errorMessage: '' }; case AuthActionTypes.LoginSuccess: return { isLoggedIn: true, currentUser: action.payload, loginPending: false, errorMessage: '' }; ... }
90. UI Components Facade State Management Data Access
91. HTTP WebRTC WebSockets JSON XML Text Payloads Gateways Data Access
92. courses.api.service.ts @Injectable({ providedIn: 'root' }) export class CoursesApiService { private baseUrl = '/api/courses'; constructor(private http: HttpClient) { } get() : Observable<Course[]> { return this.http.get<Course[]>(this.baseUrl); } getById(id: string) : Observable<Course> { return this.http.get<Course>(`this.baseUrl/${id}`); } }
93. courses.api.service.ts @Injectable({ providedIn: 'root' }) export class CoursesApiService { private baseUrl = '/api/courses'; constructor(private http: HttpClient) { } get() : Observable<Course[]> { return this.http.get<Course[]>(this.baseUrl); } getById(id: string) : Observable<Course> { return this.http.get<Course>(`this.baseUrl/${id}`); } }
94. Redux DevTools
95. Change Detection
96. By default the change detection goes through every node of the component tree to see if it changed, and it does it on every browser event. Change Detection Rerefence: https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c
97. App_ChangeDetector CourseBoard_ChangeDetector CourseList_ChangeDetector CourseDetails_ChangeDetector
98. App_ChangeDetector CourseBoard_ChangeDetector CourseList_ChangeDetector CourseDetails_ChangeDetector
99. App_ChangeDetector CourseBoard_ChangeDetector CourseList_ChangeDetector CourseDetails_ChangeDetector
100. App_ChangeDetector CourseBoard_ChangeDetector CourseList_ChangeDetector CourseDetails_ChangeDetector
101. App_ChangeDetector CourseBoard_ChangeDetector CourseList_ChangeDetector CourseDetails_ChangeDetector
102. Immutable Objects If a component depends only on its input properties, and they are immutable, then this component can change if and only if one of its input properties changes. Rerefence: https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c
103. course-details.component.ts @Component({ ... changeDetection: ChangeDetectionStrategy.OnPush }) export class CourseDetailsComponent { @Input() course: Course; @Output() delete = new EventEmitter<Course>(); constructor() { } onDeleteClick(course: Course) { this.delete.emit(course); } ... }
104. course-details.component.ts @Component({ ... changeDetection: ChangeDetectionStrategy.OnPush }) export class CourseDetailsComponent { @Input() course: Course; @Output() delete = new EventEmitter<Course>(); constructor() { } onDeleteClick(course: Course) { this.delete.emit(course); } ... }
105. App_ChangeDetector CourseBoard_ChangeDetector CourseList_ChangeDetector CourseDetails_ChangeDetector
106. App_ChangeDetector CourseBoard_ChangeDetector CourseList_ChangeDetector CourseDetails_ChangeDetector
107. Modules
108. Core Module App Module Feature A Module Feature B Module Shared Module
109. Lazy Loading
110. Core Module App Module Feature A Module Feature B Module Feature C Module Shared Module Shared Module App Injector Lazy Module Injector
111. Properties • Modular project (Feature modules and lazy loading)
112. Properties • Modular project (Feature modules and lazy loading) • Predictable state management (Redux)
113. Properties • Modular project (Feature modules and lazy loading) • Predictable state management (Redux) • Increased load capacity (immutability, detect changes on push)
114. Properties • Modular project (Feature modules and lazy loading) • Predictable state management (Redux) • Increased load capacity (immutability, detect changes on push) • Async data flow handling (RxJS)
115. Properties • Modular project (Feature modules and lazy loading) • Predictable state management (Redux) • Increased load capacity (immutability, detect changes on push) • Async data flow handling (RxJS) • Easy to test (DI and easy to mock service layer)
116. Sample Tech Stack •TypeScript •RxJS •ngrx/store •ngrx/effects •ImmutableJS
117. This does not replace common sense!
119. Reims Cathedral, France
120. It is better to have a system omit certain anomalous features and improvements, but to reflect one set of design ideas, than to have one that contains many good but independent and uncoordinated ideas. Frederick P. Brooks, “The Mythical Man-Month” Conceptual Integrity
121. References • Redux Docs https://redux.js.org/introduction • @ngrx docs https://ngrx.github.io/ • Managing State in Angular Applications https://blog.nrwl.io/managing-state-in-angular-applications-22b75ef5625f • Change Detection in Angular https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c • On Push Change Detection and Immutability https://blog.mgechev.com/2017/11/11/faster-angular-applications-onpush-change-detection-immutable- part-1/ • Making Architecture Matter by Martin Fowler https://www.youtube.com/watch?v=DngAZyWMGR0
122. @deniskyashif deniskyashif deniskyashif.github.io Thank You!