Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Level up your NgRx game

173 views

Published on

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.

Published in: Software
  • Be the first to comment

Level up your NgRx game

  1. 1. L E V E L U P Y O U R N G R X G A M E
  2. 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. 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. 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
  5. 5. @onderceylan [Source] Event
  6. 6. @onderceylan Good Action Hygiene with NgRx @ng-conf - Mike Ryan
  7. 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. 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. 9. @onderceylan U S E N G R X S C H E M AT I C S
  10. 10. @onderceylan B O I L E R P L AT E
  11. 11. @onderceylan D E FA U LT C O L L E C T I O N
  12. 12. @onderceylan S T Y L E G U I D E
  13. 13. @onderceylan S T Y L E G U I D E
  14. 14. @onderceylan U S E S E L E C T O R S
  15. 15. @onderceylan D RY
  16. 16. @onderceylan M E M O I Z AT I O N
  17. 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. 18. @onderceylan T Y P E S A F E T Y
  19. 19. @onderceylan
  20. 20. @onderceylan S TAT E S L I C E
  21. 21. @onderceylan C O M P O S I N G S E L E C T O R S
  22. 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. 23. @onderceylan S E R I A L I Z AT I O N & H Y D R AT I O N
  24. 24. @onderceylan S E R I A L I S AT I O N
  25. 25. @onderceylan R U N T I M E C H E C K S
  26. 26. @onderceylan C L I E N T S T O R A G E & H Y D R AT I O N
  27. 27. @onderceylan C L I E N T S T O R A G E & H Y D R AT I O N
  28. 28. @onderceylan A D J U S T V I E W S
  29. 29. @onderceylan N G I F & A S Y N C
  30. 30. @onderceylan C H A N G E D E T E C T I O N
  31. 31. @onderceylan S I M P L I F Y Y O U R R E D U C E R S
  32. 32. @onderceylan
  33. 33. @onderceylan I M M E R
  34. 34. @onderceylan I M M E R https://blog.angularindepth.com/clean-ngrx-reducers-using-immer-7fe4a0d43508
  35. 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. 36. @onderceylan
  37. 37. @onderceylan E N T I T Y S TAT E
  38. 38. @onderceylan E N T I T Y A D A P T E R
  39. 39. @onderceylan C O L L E C T I O N M E T H O D S
  40. 40. @onderceylan D E FA U LT S E L E C T O R S
  41. 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. 42. @onderceylan @ N G R X / D ATA
  43. 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. 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. 45. @onderceylan O P T I M I S T I C U P D AT E S
  46. 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. 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. 48. @onderceylan L O O K I N G A H E A D
  49. 49. @onderceylan FA C A D E S
  50. 50. @onderceylan FA C A D E S
  51. 51. @onderceylan A C T I O N C R E AT O R S
  52. 52. @onderceylan A C T I O N C R E AT O R S
  53. 53. @onderceylan R E D U C E R C R E AT O R S
  54. 54. @onderceylan E F F E C T C R E AT O R S
  55. 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. 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. 57. Follow me on @ O N D E R C E Y L A N T H A N K Y O U !

×