Scalable Angular Applications

Transcript

1. Scalable Angular
   Applications
   Denis Kyashif
   

   View Slide

2. @deniskyashif
   deniskyashif
   deniskyashif.github.io
   

   View Slide

3. View Slide

4. Scalability
   

   View Slide

5. Scalability
   •Dynamic Requirements
   

   View Slide

6. Scalability
   •Dynamic Requirements
   •Increasing load
   

   View Slide

7. Scalability
   •Dynamic Requirements
   •Increasing load
   •Growing complexity
   

   View Slide

8. Scalability
   •Dynamic Requirements
   •Increasing load
   •Growing complexity
   •Developer turnover / Increasing team size
   

   View Slide

9. Software Design
   

   View Slide

10. Source:
    https://martinfowler.com/bliki/DesignStaminaHypothesis.html
    The Design Stamina Hypothesis
    

    View Slide

11. View Slide

12. View Slide

13. End Goal
    •Modular application
    •Predictable state management
    •Async data flow handling
    •Increased load capacity
    •Easy to test
    

    View Slide

14. View Slide

15. View Slide

16. class Queue {
    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();
    queue.enqueue(n);
    queue.enqueue('5'); // Error
    TypeScript
    

    View Slide

17. class Queue {
    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();
    queue.enqueue(n);
    queue.enqueue('5'); // Error
    TypeScript
    

    View Slide

18. class Queue {
    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();
    queue.enqueue(n);
    queue.enqueue('5'); // Error
    TypeScript
    

    View Slide

19. class Queue {
    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();
    queue.enqueue(n);
    queue.enqueue('5'); // Error
    TypeScript
    

    View Slide

20. View Slide

21. A set of libraries for composing asynchronous and
    event-based programs using observable
    sequences.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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...
    

    View Slide

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...
    

    View Slide

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...
    

    View Slide

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...
    

    View Slide

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
    

    View Slide

30. Sample Application
    

    View Slide

31. Source: git.io/fpqkN
    

    View Slide

32. Sample Architecture
    

    View Slide

33. UI Components
    Facade
    State
    Management
    Data
    Access
    

    View Slide

34. UI Components
    Facade
    State
    Management
    Data
    Access
    

    View Slide

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
    

    View Slide

36. Container
    Component
    Facade
    Presentational
    Component
    @Output() @Input()
    Components
    Actions Data
    

    View Slide

37. Source: git.io/fpqkN
    

    View Slide

38. Course Board
    Course List
    Course 1
    Course 2
    Course Details
    

    View Slide

39. course-details.component.ts
    export class CourseDetailsComponent {
    @Input()
    course: Course;
    @Output()
    delete = new EventEmitter();
    constructor() { }
    onDeleteClick(course: Course) {
    this.delete.emit(course);
    }
    ...
    }
    

    View Slide

40. course-details.component.ts
    export class CourseDetailsComponent {
    @Input()
    course: Course;
    @Output()
    delete = new EventEmitter();
    constructor() { }
    onDeleteClick(course: Course) {
    this.delete.emit(course);
    }
    ...
    }
    

    View Slide

41. course-board.component.ts
    export class CourseBoardComponent implements OnInit {
    courses$: Observable;
    selectedCourse$: Observable;
    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);
    }
    ...
    }
    

    View Slide

42. course-board.component.html
    ...
    
    
    
    
    (delete)="delete($event)">
    
    
    ...
    

    View Slide

43. course-board.component.html
    ...
    
    
    
    
    (delete)="delete($event)">
    
    
    ...
    

    View Slide

44. UI Components
    Facade
    State
    Management
    Data
    Access
    

    View Slide

45. Facade
    A facade is an object that serves as a front-facing interface masking
    more complex underlying or structural code.
    

    View Slide

46. Client
    Classes
    Subsystem
    Classes
    

    View Slide

47. Client
    Classes
    Subsystem
    Classes
    Facade
    

    View Slide

48. courses.state.service.ts
    @Injectable({ providedIn: 'root' })
    export class CoursesStateService {
    constructor(private store: Store) { }
    load() {
    this.store.dispatch(new CourseActions.Load());
    }
    getCourseList(): Observable {
    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));
    }
    ...
    }
    

    View Slide

49. courses.state.service.ts
    @Injectable({ providedIn: 'root' })
    export class CoursesStateService {
    constructor(private store: Store) { }
    load() {
    this.store.dispatch(new CourseActions.Load());
    }
    getCourseList(): Observable {
    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));
    }
    ...
    }
    

    View Slide

50. courses.state.service.ts
    @Injectable({ providedIn: 'root' })
    export class CoursesStateService {
    constructor(private store: Store) { }
    load() {
    this.store.dispatch(new CourseActions.Load());
    }
    getCourseList(): Observable {
    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));
    }
    ...
    }
    

    View Slide

51. Predictable
    State Management
    

    View Slide

52. UI Components
    Facade
    State
    Management
    Data
    Access
    

    View Slide

53. Or how I stopped worrying and learned to love
    

    View Slide

54. Source: https://css-tricks.com/learning-react-redux/
    

    View Slide

55. Redux
    •Single Source of Truth
    •State is Read-Only
    •Changes are made with Pure Functions
    

    View Slide

56. ngrx
    

    View Slide

57. State Management
    Store
    Reducers Effects
    Selectors Actions
    

    View Slide

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
    

    View Slide

59. Component
    Action
    Creator
    Store
    Reducer
    dispatch(action)
    applyReducers(action, state)
    next(state)
    newState
    

    View Slide

60. Component
    Action
    Creator
    Store
    Reducer
    dispatch(action)
    applyReducers(action, state)
    next(state)
    newState
    

    View Slide

61. Component
    Action
    Creator
    Store
    Reducer
    dispatch(action)
    applyReducers(action, state)
    next(state)
    newState
    

    View Slide

62. Component
    Action
    Creator
    Store
    Reducer
    dispatch(action)
    applyReducers(action, state)
    next(state)
    newState
    

    View Slide

63. Component
    Action
    Creator
    Store
    Reducer
    dispatch(action)
    applyReducers(action, state)
    next(state)
    newState
    

    View Slide

64. Component
    State
    Service
    (Facade)
    Store
    Reducer
    select(course)
    dispatch(new SelectAction(course)))
    applyReducers(action, state)
    next(state)
    New State
    

    View Slide

65. courses.state.ts
    export interface CoursesState {
    readonly courseList: Course[];
    readonly selectedCourse?: Course;
    }
    

    View Slide

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) { }
    }
    ...
    

    View Slide

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) { }
    }
    ...
    

    View Slide

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;
    }
    }
    

    View Slide

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;
    }
    }
    

    View Slide

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;
    }
    }
    

    View Slide

71. course-board.component.ts
    export class CourseBoardComponent implements OnInit {
    ...
    selectedCourse$: Observable;
    constructor(private courses: CoursesStateService) { }
    ngOnInit() {
    ...
    this.selectedCourse$ = this.courses.getSelectedCourse();
    }
    ...
    }
    

    View Slide

72. course-board.component.ts
    export class CourseBoardComponent implements OnInit {
    ...
    selectedCourse$: Observable;
    constructor(private courses: CoursesStateService) { }
    ngOnInit() {
    ...
    this.selectedCourse$ = this.courses.getSelectedCourse();
    }
    ...
    }
    

    View Slide

73. course-board.component.html
    ...
    
    
    
    
    ...
    

    View Slide

74. course-board.component.html
    ...
    
    
    
    
    ...
    

    View Slide

75. Managing Side Effects
    

    View Slide

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))
    

    View Slide

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))
    

    View Slide

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))
    

    View Slide

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))
    

    View Slide

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))
    

    View Slide

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))
    

    View Slide

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))
    

    View Slide

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))
    

    View Slide

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))
    

    View Slide

85. @Injectable()
    export class AuthEffects {
    @Effect()
    login$ = this.actions$.pipe(
    ofType(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
    

    View Slide

86. @Injectable()
    export class AuthEffects {
    @Effect()
    login$ = this.actions$.pipe(
    ofType(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
    

    View Slide

87. @Injectable()
    export class AuthEffects {
    @Effect()
    login$ = this.actions$.pipe(
    ofType(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
    

    View Slide

88. @Injectable()
    export class AuthEffects {
    @Effect()
    login$ = this.actions$.pipe(
    ofType(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
    

    View Slide

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: ''
    };
    ...
    }
    

    View Slide

90. UI Components
    Facade
    State
    Management
    Data
    Access
    

    View Slide

91. HTTP
    WebRTC
    WebSockets
    JSON
    XML
    Text
    Payloads
    Gateways
    Data Access
    

    View Slide

92. courses.api.service.ts
    @Injectable({ providedIn: 'root' })
    export class CoursesApiService {
    private baseUrl = '/api/courses';
    constructor(private http: HttpClient) { }
    get() : Observable {
    return this.http.get(this.baseUrl);
    }
    getById(id: string) : Observable {
    return this.http.get(`this.baseUrl/${id}`);
    }
    }
    

    View Slide

93. courses.api.service.ts
    @Injectable({ providedIn: 'root' })
    export class CoursesApiService {
    private baseUrl = '/api/courses';
    constructor(private http: HttpClient) { }
    get() : Observable {
    return this.http.get(this.baseUrl);
    }
    getById(id: string) : Observable {
    return this.http.get(`this.baseUrl/${id}`);
    }
    }
    

    View Slide

94. Redux DevTools
    

    View Slide

95. Change Detection
    

    View Slide

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
    

    View Slide

97. App_ChangeDetector
    CourseBoard_ChangeDetector
    CourseList_ChangeDetector CourseDetails_ChangeDetector
    

    View Slide

98. App_ChangeDetector
    CourseBoard_ChangeDetector
    CourseList_ChangeDetector CourseDetails_ChangeDetector
    

    View Slide

99. App_ChangeDetector
    CourseBoard_ChangeDetector
    CourseList_ChangeDetector CourseDetails_ChangeDetector
    

    View Slide

100. App_ChangeDetector
     CourseBoard_ChangeDetector
     CourseList_ChangeDetector CourseDetails_ChangeDetector
     

     View Slide

101. App_ChangeDetector
     CourseBoard_ChangeDetector
     CourseList_ChangeDetector CourseDetails_ChangeDetector
     

     View Slide

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
     

     View Slide

103. course-details.component.ts
     @Component({
     ...
     changeDetection: ChangeDetectionStrategy.OnPush
     })
     export class CourseDetailsComponent {
     @Input()
     course: Course;
     @Output()
     delete = new EventEmitter();
     constructor() { }
     onDeleteClick(course: Course) {
     this.delete.emit(course);
     }
     ...
     }
     

     View Slide

104. course-details.component.ts
     @Component({
     ...
     changeDetection: ChangeDetectionStrategy.OnPush
     })
     export class CourseDetailsComponent {
     @Input()
     course: Course;
     @Output()
     delete = new EventEmitter();
     constructor() { }
     onDeleteClick(course: Course) {
     this.delete.emit(course);
     }
     ...
     }
     

     View Slide

105. App_ChangeDetector
     CourseBoard_ChangeDetector
     CourseList_ChangeDetector CourseDetails_ChangeDetector
     

     View Slide

106. App_ChangeDetector
     CourseBoard_ChangeDetector
     CourseList_ChangeDetector CourseDetails_ChangeDetector
     

     View Slide

107. Modules
     

     View Slide

108. Core Module App Module
     Feature A
     Module
     Feature B
     Module
     Shared Module
     

     View Slide

109. Lazy Loading
     

     View Slide

110. Core Module App Module
     Feature A
     Module
     Feature B
     Module
     Feature C
     Module
     Shared Module Shared Module
     App Injector
     Lazy Module Injector
     

     View Slide

111. Properties
     • Modular project (Feature modules and lazy loading)
     

     View Slide

112. Properties
     • Modular project (Feature modules and lazy loading)
     • Predictable state management (Redux)
     

     View Slide

113. Properties
     • Modular project (Feature modules and lazy loading)
     • Predictable state management (Redux)
     • Increased load capacity (immutability, detect changes on push)
     

     View Slide

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)
     

     View Slide

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)
     

     View Slide

116. Sample Tech Stack
     •TypeScript
     •RxJS
     •ngrx/store
     •ngrx/effects
     •ImmutableJS
     

     View Slide

117. This does not replace
     common sense!
     

     View Slide

118. View Slide

119. Reims Cathedral, France
     

     View Slide

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
     

     View Slide

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
     

     View Slide

122. @deniskyashif
     deniskyashif
     deniskyashif.github.io
     Thank You!
     

     View Slide