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.

Scaling React and Redux at IOOF

1,349 views

Published on

Techniques for distributed development of Enterprise Single Page Apps

Published in: Software
  • Be the first to comment

Scaling React and Redux at IOOF

  1. 1. Scaling React and Redux at IOOF Techniques for distributed development of Enterprise Single Page Apps
  2. 2. Who are we? Vivian Farrell • IOOF Web dev lead @viv_f Emily Rosengren • ThoughtWorks software engineer @emirose
  3. 3. Who is . Independent Order of Odd Fellows International Organisation Of Friends Industry Organisation of Open Funds
  4. 4. Who is . Independent Order of Odd Fellows
  5. 5. Setting the scene
  6. 6. Setting the scene
  7. 7. What are we showing you tonight? How we produce a consistent and theme-able UI How we partition the Redux store for full decoupled dev of micro frontends How we integrate React/Redux micro frontends into Angular
  8. 8. What is a micro frontend? An encapsulated piece of the front end, defined by a domain concept Able to run on it’s own with limited setup Published as an npm library that exports a top-level component
  9. 9. Introducing Redux
  10. 10. Redux Crash Course All application state is stored in an object tree within the Redux store
  11. 11. Redux Crash Course Updates to the state are triggered by dispatching actions to the store
  12. 12. Redux Crash Course The dispatched actions are passed to reducer functions. These reducers update the state
  13. 13. Redux Crash Course UI components that are subscribed to the state changes will re-render
  14. 14. Decoupling Redux micro frontends Avoid action cross talk - actions should not unintentionally update other micro frontends Micro frontends define and use their own state Micro frontends are ignorant of state structure outside of their own state
  15. 15. Action-type namespacing Not namespaced Namespaced
  16. 16. A micro frontend is always passed the entire store when it is wrapped in <Provider> by the parent State structure decoupling It needs a way to navigate to its part of the state without knowing the structure
  17. 17. State Traversal Map
  18. 18. Store with traversal
  19. 19. Traversal Usage
  20. 20. What about shared state
  21. 21. Accessing shared state
  22. 22. Complete picture
  23. 23. The problem with Traversal Map
  24. 24. Redux Subspace
  25. 25. No more traverse
  26. 26. Still use Traverse for shared state Will return root state
  27. 27. Quick Summary Redux Subspace to decouple micro frontends Traversal Map for shared/global state
  28. 28. UI Consistency
  29. 29. Theming
  30. 30. Parent app sets the theme
  31. 31. Component uses theme
  32. 32. Questions?

×