Angular@Scale with ngrx-ducks

This presentation is a shortened version of [1] since this talk contains an introduction to my library ngrx-ducks [2].

[1] https://speakerdeck.com/gregonnet/angular-at-scale-redux-and-at-ngrx
[2] https://github.com/co-it/co-it

Transcript

1. co-IT.eu GmbH Vision wird Wirklichkeit www.co-IT.eu Angular At Scale @GregOnNet
2. Please feel free to ask any questions any time you like.
3. Topics For Today AGENDA - Common Pitfalls occurring in larger Teams - The Why, How & What of State Management - Redux Architecture - ngrx features managing State
4. 1 Pitfall
5. Increasing Code Complexity Common Pitfalls - Cyclometic Complexity of 15 - Nested Code Blocks - Domain & Infrastructure mixed - No Tests
7. 2 Pitfall
8. Component Monolith PITFALLS ModalWrapper Modal Stepper Question ButtonGroup - Open at least 5 files… - …Than you know how it works
9. Component Monolith PITFALLS - No clear API - Deeply nested Components - Hard for others to understand - Hard to maintain
10. - Reduce Component Nesting - Think in APIs - Put a smile on your colleagues’ face Component Monolith PITFALLS
11. Learnings Common Pitfalls - 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
12. Problems of Front-End Development Common Pitfalls Share State across components Internal state management becomes difficult Distant leaf components need access to state But intermediatary components don‘t need them
13. Why do we need to care about State Management Patterns? WHY, HOW & WHAT OF STATE MANAGEMENT - Communicate effectively through deeply nested component tree - Publish consistent amount of features over time - Built more trust in code base - Deliver a product having a great user experience
14. Become a little better every day makes the world a better place.
15. REDUX ARCHITECTURE Unidirectional Data Flow simplified ACTION STATE COMPONENT STORE Dispatch Send To Mutate Render Inspired by @ToddMotto REDUCERS
16. 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
17. 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
18. 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
19. REDUX ARCHITECTURE Unidirectional Data Flow simplified ACTION REDUCERS STATE COMPONENT Inspired by @ToddMotto
20. REDUX ARCHITECTURE Side Effects click input click Action Action Action Component Async Effect Success Action Error Action change Start Action Store change event triggered
21. REDUX ARCHITECTURE @Effect @Injectable() export class NotesEffects { @Effect() loadAll = this.actions$.pipe( ofType(NotesActionTypes.LoadAllNotes), switchMap(() => this.notes.getAll()), map(notes => new LoadNotesSuccessful(notes)) ); constructor(private actions$: Actions, private notes: NotesService) {} }
23. NGRX Getting Started https://github.com/ngrx/platform @ngrx/schematics
24. 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: CraftWarshipAct switch (action.type) { case CraftWarshipActionTypes.ChooseWarshipPlanSuccess: case CraftWarshipActionTypes.RecoverWarshipPlanSuccess: return { ...state, current: action.payload }; default: return state; } }
25. Selectors A QUERY API FOR VIEWS
26. QUERY API FOR VIEWS Selectors 1. Provide a query API for views 2. Simplify Reducers 3. Memoization
27. A QUERY API FOR REDUX Selectors Instrumentint Memoization Pattern 1 selector calculate 3 selector recalculate Store change event triggered 2 selector cache
28. 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
29. 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) => /* */ );
30. @ngrx/entity SIMPLIFY YOUR REDUCERS
31. @ngrx/router-store DECOUPLE YOUR COMPONENTS FROM THE ROUTER
32. Time Travel Debugging Analyse Life-Lifecycle
33. NGRX Time Travel Debugging github.com/GregOnNet/ngx-battleships.git
34. Lazy Loading Loading Reducers as needed
35. NGRX Load Features Lazily https://github.com/ng-practice/ngrx-aware
36. Redux is a Team Sport
37. 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
38. CLOSING THOUGHTS Find The Demo On StackBlitz https://tinyurl.com/ngrx-playground
39. PROPERTY PATTERN Review Less Files to maintain Scales good for many entities Highly Configurable Handles Loading State automatically High Learning Curve Lot‘s of things happen behind the scenes
40. ngrx-ducks Leverage OCP for Redux
41. NGRX Criticism Touch lots of files Boilerplate vs. Explicit Setup Distributed Setup (Actions, Reducers, Selectors, Effects) It is easy to forget parts of the setup (ActionType) High Learning Curve Lot‘s of things happen behind the scenes
42. NGRX Redux the bad parts REDUCER ACTION TYPES DISPATCHER ACTIONS EFFECT ACTION REDUCER MAP ACTIONS$ ACTION CREATORS
43. NGRX Redux the good parts ACTIONS
44. Your Code Should Always Feel Like Home.
45. NGRX What if… 1. … we could automate the creation of an action 2. … an Action knows about it‘s case reducer 3. … an Acion could dispatch itself 4. … we have one object strucure providing us every thing we need?
46. NGRX Duck, Duck, Ducks, Re-Ducks
47. Demo INTRODUCING NGRX-DUCKS
48. PROPERTY PATTERN Review Consume Redux as a Service TypeScript Compiler saves us for mistakes Serves Open Closed Principle Supports AoT Supports AoT … ` Setting up Dynamic Services is hard Could improve handling for Effects
49. github.com/co-it/co-it
50. BUSINESS SOLUTIONS Need help? Twitter Workshops Projects workshops.co-IT.eu contact.co-IT.eu @GregOnNet
51. co-IT.eu GmbH We Empower Outstanding Business Solutions Thank you! @GregOnNet