Level up your NgRx game
•
1 j'aime•512 vues
State management can get really complex for scaled Angular applications. And, NgRx can be an answer for the complexity of this problem. This talk will cover some of the best practices of building an NgRx Angular app. We'll go through building a good action hygiene, efficiently using schematics, improving your apps performance with one-way data binding and memoized selectors, reducing the boilerplate with entities/schematics and introducing ngrx-data. After this session, you'll have more control on the NgRx platform with the grasp of entities, memoized selectors, effects and schematics.
Recommandé
Recommandé
Contenu connexe
Similaire à Level up your NgRx game
Similaire à Level up your NgRx game (20)
Plus de Önder Ceylan
Plus de Önder Ceylan (7)
Dernier
Dernier (20)
Level up your NgRx game
- 1. L E V E L U P Y O U R N G R X G A M E
- 2. @onderceylan Sharing knowledge on #javascript, #typescript, #angular, #ionic and #pwa JS Tech Lead @LINKIT, @KLM Speaker, co-organiser @ITNEXT, @GDG-NL Ö N D E R C E Y L A N
- 3. @onderceylan N G R X P L AT F O R M • @ngrx/store • @ngrx/effects • @ngrx/router-store • @ngrx/store-devtools • @ngrx/entity • @ngrx/data • @ngrx/schematics
- 4. @onderceylan M A I N TA I N A G O O D A C T I O N H Y G I E N E
- 6. @onderceylan Good Action Hygiene with NgRx @ng-conf - Mike Ryan
- 7. @onderceylan AV O I D G E N E R I C A C T I O N T Y P E S @ngrx/store/init [User] Authenticate [User] Authenticate Success [WontonSoup] Add One [WontonSoup] Add One [Cart] Checkout [Cart] Checkout Success @ngrx/store/init [Login Page] Login [Auth API] Login Success [Menu Page] Add Wonton Soup [Soup Details Page] Add Wonton Soup [Cart Dropdown] Checkout [Cart API] Checkout Success Good Action Hygiene with NgRx @ng-conf - Mike Ryan
- 8. @onderceylan AV O I D G E N E R I C A C T I O N T Y P E S [Login Page] Login [Menu Page] Add Wonton [Menu Page] Add Teriyaki [Menu Page] Add Noodle [Cart] Checkout [Auth API] Login Success [Auth API] Login Failure [Cart API] Checkout Success [Cart API] Checkout Failure [WS API] Update Availability [WebSocket] Open [WebSocket] Disconnected [IndexDB] Save Success Good Action Hygiene with NgRx @ng-conf - Mike Ryan
- 9. @onderceylan U S E N G R X S C H E M AT I C S
- 10. @onderceylan B O I L E R P L AT E
- 11. @onderceylan D E FA U LT C O L L E C T I O N
- 12. @onderceylan S T Y L E G U I D E
- 13. @onderceylan S T Y L E G U I D E
- 14. @onderceylan U S E S E L E C T O R S
- 16. @onderceylan M E M O I Z AT I O N
- 17. @onderceylan – N G R X D O C S “Because selectors are pure functions, the last result can be returned when the arguments match without re-invoking your selector function. This can provide performance benefits, particularly with selectors that perform expensive computation. This practice is known as memoization.”
- 18. @onderceylan T Y P E S A F E T Y
- 19. @onderceylan
- 20. @onderceylan S TAT E S L I C E
- 21. @onderceylan C O M P O S I N G S E L E C T O R S
- 22. @onderceylan S E L E C T O R TA K E A WAY S • Don’t pollute the store state with derived state, use state selectors to create view models • Keep selectors small so they can be used to compose bigger and more complex selectors • Take advantage of memoization by using selectors and customMemoize / resultMemoize when needed
- 23. @onderceylan S E R I A L I Z AT I O N & H Y D R AT I O N
- 24. @onderceylan S E R I A L I S AT I O N
- 25. @onderceylan R U N T I M E C H E C K S
- 26. @onderceylan C L I E N T S T O R A G E & H Y D R AT I O N
- 27. @onderceylan C L I E N T S T O R A G E & H Y D R AT I O N
- 28. @onderceylan A D J U S T V I E W S
- 29. @onderceylan N G I F & A S Y N C
- 30. @onderceylan C H A N G E D E T E C T I O N
- 31. @onderceylan S I M P L I F Y Y O U R R E D U C E R S
- 32. @onderceylan
- 33. @onderceylan I M M E R
- 34. @onderceylan I M M E R https://blog.angularindepth.com/clean-ngrx-reducers-using-immer-7fe4a0d43508
- 35. @onderceylan S I M P L I F Y Y O U R R E D U C E R S W I T H @ N G R X / E N T I T Y
- 36. @onderceylan
- 37. @onderceylan E N T I T Y S TAT E
- 38. @onderceylan E N T I T Y A D A P T E R
- 39. @onderceylan C O L L E C T I O N M E T H O D S
- 40. @onderceylan D E FA U LT S E L E C T O R S
- 41. @onderceylan Y O U M AY N E V E R FA C E B O I L E R P L AT E I S S U E W @ N G R X / D ATA
- 42. @onderceylan @ N G R X / D ATA
- 43. @onderceylan W H AT C A N G O W R O N G W I T H C O D E G E N E R AT I O N ?
- 44. @onderceylan @ N G R X / D ATA • A single objective: to simplify management of entity data • Abstraction of reducers, actions, effects, selectors and HTTP data services • Almost anything is customizable at a single entity-type level • NgRx Data library is good for querying, caching, and saving entity data
- 45. @onderceylan O P T I M I S T I C U P D AT E S
- 46. @onderceylan O P T I M I S T I C U P D AT E S W I T H @ N G R X / D ATA
- 47. @onderceylan O P T I M I S T I C U P D AT E S W I T H N X
- 48. @onderceylan L O O K I N G A H E A D
- 49. @onderceylan FA C A D E S
- 50. @onderceylan FA C A D E S
- 51. @onderceylan A C T I O N C R E AT O R S
- 52. @onderceylan A C T I O N C R E AT O R S
- 53. @onderceylan R E D U C E R C R E AT O R S
- 54. @onderceylan E F F E C T C R E AT O R S
- 55. @onderceylan M A I N TA K E A WAY S • Maintain a good action hygiene • Use @ngrx/schematics • Use selectors • Attention on serialisation & hydration • Manage your data with @ngrx/entity or @ngrx/data • Adjust your views with async pipe and ChangeDetectionStrategy.OnPush • Use optimistic updates when needed • Use facades where needed and start using creators to reduce boilerplate
- 56. @onderceylan R E S O U R C E S • https://ngrx.io • https://github.com/ngrx/platform/tree/master/projects/example- app • https://github.com/nrwl/nx/blob/master/packages/angular/src/ runtime/nx/data-persistence.ts • https://medium.com/ngrx/ • https://blog.angularindepth.com/tagged/ngrx • https://blog.nrwl.io/search?q=ngrx
- 57. Follow me on @ O N D E R C E Y L A N T H A N K Y O U !