Angular@Scale with ngrx-ducks

Slide 1

Slide 1 text

co-IT.eu GmbH Vision wird Wirklichkeit www.co-IT.eu Angular At Scale @GregOnNet

Slide 2

Slide 2 text

Please feel free to ask any questions any time you like.

Slide 3

Slide 3 text

Topics For Today AGENDA - Common Pitfalls occurring in larger Teams - The Why, How & What of State Management - Redux Architecture - ngrx features managing State

Slide 4

Slide 4 text

1 Pitfall

Slide 5

Slide 5 text

Increasing Code Complexity Common Pitfalls - Cyclometic Complexity of 15 - Nested Code Blocks - Domain & Infrastructure mixed - No Tests

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

2 Pitfall

Slide 8

Slide 8 text

Component Monolith PITFALLS ModalWrapper Modal Stepper Question ButtonGroup - Open at least 5 files… - …Than you know how it works

Slide 9

Slide 9 text

Component Monolith PITFALLS - No clear API - Deeply nested Components - Hard for others to understand - Hard to maintain

Slide 10

Slide 10 text

- Reduce Component Nesting - Think in APIs - Put a smile on your colleagues’ face Component Monolith PITFALLS

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Become a little better every day makes the world a better place.

Slide 15

Slide 15 text

REDUX ARCHITECTURE Unidirectional Data Flow simplified ACTION STATE COMPONENT STORE Dispatch Send To Mutate Render Inspired by @ToddMotto REDUCERS

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

REDUX ARCHITECTURE Unidirectional Data Flow simplified ACTION REDUCERS STATE COMPONENT Inspired by @ToddMotto

Slide 20

Slide 20 text

REDUX ARCHITECTURE Side Effects click input click Action Action Action Component Async Effect Success Action Error Action change Start Action Store change event triggered

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

NGRX Getting Started https://github.com/ngrx/platform @ngrx/schematics

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Selectors A QUERY API FOR VIEWS

Slide 26

Slide 26 text

QUERY API FOR VIEWS Selectors 1. Provide a query API for views 2. Simplify Reducers 3. Memoization

Slide 27

Slide 27 text

A QUERY API FOR REDUX Selectors Instrumentint Memoization Pattern 1 selector calculate 3 selector recalculate Store change event triggered 2 selector cache

Slide 28

Slide 28 text

A QUERY API FOR REDUX Use Selectors import {createFeatureSelector, createSelector } from '@ngrx/store'; export const feature = createFeatureSelector('harbour‘); export const selector = createSelector(feature, slice => slice.); reuse

Slide 29

Slide 29 text

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) => /* */ );

Slide 30

Slide 30 text

@ngrx/entity SIMPLIFY YOUR REDUCERS

Slide 31

Slide 31 text

@ngrx/router-store DECOUPLE YOUR COMPONENTS FROM THE ROUTER

Slide 32

Slide 32 text

Time Travel Debugging Analyse Life-Lifecycle

Slide 33

Slide 33 text

NGRX Time Travel Debugging github.com/GregOnNet/ngx-battleships.git

Slide 34

Slide 34 text

Lazy Loading Loading Reducers as needed

Slide 35

Slide 35 text

NGRX Load Features Lazily https://github.com/ng-practice/ngrx-aware

Slide 36

Slide 36 text

Redux is a Team Sport

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

CLOSING THOUGHTS Find The Demo On StackBlitz https://tinyurl.com/ngrx-playground

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

ngrx-ducks Leverage OCP for Redux

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

NGRX Redux the bad parts REDUCER ACTION TYPES DISPATCHER ACTIONS EFFECT ACTION REDUCER MAP ACTIONS$ ACTION CREATORS

Slide 43

Slide 43 text

NGRX Redux the good parts ACTIONS

Slide 44

Slide 44 text

Your Code Should Always Feel Like Home.

Slide 45

Slide 45 text

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?

Slide 46

Slide 46 text

NGRX Duck, Duck, Ducks, Re-Ducks

Slide 47

Slide 47 text

Demo INTRODUCING NGRX-DUCKS

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

github.com/co-it/co-it

Slide 50

Slide 50 text

BUSINESS SOLUTIONS Need help? Twitter Workshops Projects workshops.co-IT.eu contact.co-IT.eu @GregOnNet

Slide 51

Slide 51 text

co-IT.eu GmbH We Empower Outstanding Business Solutions Thank you! @GregOnNet