Angular at Scale - Redux & @ngrx

This talk makes you aware of common pitfalls rising as your Angular project grows. We will focus on how you can optimize the state management in your App using Redux.

First, you will learn how the Redux Architecture works itself and which modelling aspects you should know to set up a beautiful unidirectional data flow.
You will also get a taste of the ngrx/platform a popular framework that helps you integrating Redux with ease. Therefore, code examples are shown helping you to understand how Redux's building blocks (Store, Reducers, Actions, Effects) are working hand in hand.

Transcript

1. co-IT.eu GmbH We Empower Outstanding Business Solutions Angular at Scale – @ngrx @GregOnNet
2. co-IT.eu GmbH We Empower Outstanding Business Solutions “ Please feel free to ask anything at any time. @GregOnNet
3. AGENDA What are we going to discuss? 1. The WHY, HOW & WHAT of State Management 2. Getting to know the Redux Architecture 3. @ngrx features that help us to survive in enterprise projects
5. WHY, HOW & WHAT OF STATE MANAGEMENT What do we have to deal with? 1. Bad code increases 2. Less features are published in certain period of time 3. Confusion due different approaches compose components
6. WHY, HOW & WHAT OF STATE MANAGEMENT What is done here? 1. Cyclometic Complexity of 8 2. Nested code blocks 3. Mix Domain & Infrastructure 4. No Tests
7. WHY, HOW & WHAT OF STATE MANAGEMENT Component Composition Simple Dialog material.angular.io
8. WHY, HOW & WHAT OF STATE MANAGEMENT The Component Monolith ModalWrapper Modal Stepper Question ButtonGroup Just 5 Files away to know how the component works…
9. WHY, HOW & WHAT OF STATE MANAGEMENT Monoliths Increase Research Time 1. No clear API 2. Deeply nested Components 3. Hard for others to understand
10. WHY, HOW & WHAT OF STATE MANAGEMENT How do we get there? 1. Not enough experience applying software patterns 2. No clue over the whole project 3. Requirements change over time
11. WHY, HOW & WHAT OF STATE MANAGEMENT Think in APIs 1. Provide easy to use APIs 2. Reduce Component Nesting 3. Put a smile on your colleague‘s face
12. WHY, HOW & WHAT OF STATE MANAGEMENT Think in Smart & Dumb Components Provide composition boundaries between UI concerns. “
13. WHY, HOW & WHAT OF STATE MANAGEMENT Dumb Components @Input @Output Container 1. Present Data 2. Handle UI Logic 3. Being reusable Building Blocks 4. No dependency to a data service
14. WHY, HOW & WHAT OF STATE MANAGEMENT Smart Components 1. Orchestrate Components 2. Provide Data from APIs 3. Made for a certain use case Receive Call Container HTTP/WS Redux
15. WHY, HOW & WHAT OF STATE MANAGEMENT Why do we need to care about State Management Patterns? 1. Communicate effectively through deeply nested component tree 2. Publish consistent amount of features over time 3. Built more trust in code base 4. Deliver a product having a great user experience
16. REDUX ARCHITECTURE Centralize State Management Store Component SELECT INTERACT
17. REDUX ARCHITECTURE Five Types Of Application State Data Communication Control Session Location 5 Types of Application State jamesknelson.com/5-types-react-application-state
18. REDUX ARCHITECTURE Flow Type Payload Action State Store Dispatch action to Store Reducer Current state & Action Properties Component in App Some component action (e.g. button clicked) Initial state received Update on Store change event Store change event triggered
19. REDUX ARCHITECTURE How do we communicate between a Component and a Store? { type: 'Unique Type‘, payload: { use: 'data‘, we: 'need‘, to: 'mutate‘, application: 'state‘ } } … an Action
20. REDUX ARCHITECTURE How do we process state mutations? export function reducer(currentState, action) { switch(action.type) { case 'Unique Type‘: return { ...currentState, application: action.payload.application }; } } … with a Reducer
21. REDUX ARCHITECTURE How do we process state mutations? export function reducer(currentState, action) { switch(action.payload) { case 'Unique Type‘: return { ...currentState, application: action.payload.application }; } } Create a new Slice
22. REDUX ARCHITECTURE Unidirectional Data Flow simplified ACTION STATE COMPONENT STORE Dispatch Send To Mutate Render Inspired by @ToddMotto REDUCERS
23. REDUX ARCHITECTURE Unidirectional Data Flow simplified ACTION REDUCERS STATE COMPONENT Inspired by @ToddMotto
24. REDUX ARCHITECTURE Side Effects click input click Action Action Action Component Async Effect Success Action Error Action change Start Action Store change event triggered
26. Run Through Drift Along With Redux
27. NGRX What Are We Going To See? 1. How the Store is setup 2. How a Component dispatches an Action 3. How an Action is built 4. How a Reducer processes an Action export function reducer(state = initialState, action: CraftWarshipActions): Slice { switch (action.type) { case CraftWarshipActionTypes.ChooseWarshipPlanSuccess: case CraftWarshipActionTypes.RecoverWarshipPlanSuccess: return { ...state, current: action.payload }; default: return state; } }
28. Selectors A QUERY API FOR VIEWS
29. QUERY API FOR VIEWS Selectors 1. Provide a query API for views 2. Simplify Reducers 3. Memoization
30. A QUERY API FOR REDUX Selectors Instrumentint Memoization Pattern 1 selector calculate 3 selector recalculate Store change event triggered 2 selector cache
31. A QUERY API FOR REDUX Use Selectors import {createFeatureSelector, createSelector } from '@ngrx/store'; export const feature = createFeatureSelector<HarbourSlice>('harbour‘); export const selector = createSelector(feature, slice => slice.<property>); reuse
32. A QUERY API FOR REDUX Combine Selectors export const customers = createSelector(customerSlice, slice => /* */); export const orders = createSelector(ordersSlice, slice => /* */); export const customerOrders = createSelector( customers, orders, (customers, orders) => /* */ );
33. Time Travel Debugging Analyse Life-Lifecycle
34. NGRX Time Travel Debugging github.com/GregOnNet/ngx-battleships.git
35. Lazy Loading Loading Reducers as needed
36. NGRX Load Features Lazily https://github.com/ng-practice/ngrx-aware
37. Redux is a Team Sport
38. CLOSING THOUGHTS Redux Is More Than Just An Architecture. 1. It is a comitment made by the whole developer team. 2. It guides you through the process of modeling application state. 3. It opens a new world analyzing your app. TEAM REQUIREMENTS TOOLING
39. BUSINESS SOLUTIONS Need help? Twitter Workshops Projects workshops.co-IT.eu contact.co-IT.eu @GregOnNet
40. co-IT.eu GmbH We Empower Outstanding Business Solutions Thank you! @GregOnNet