scaling react and redux at ioof
TRANSCRIPT
Scaling React and Redux at IOOF
Techniques for distributed development of Enterprise Single Page Apps
Who are we?
Vivian Farrell • IOOF Web dev lead
@viv_f
Emily Rosengren • ThoughtWorks software engineer
@emirose
Who is .
Independent Order of Odd Fellows
International Organisation Of Friends
Industry Organisation of Open Funds
Who is .
Independent Order of Odd Fellows
Setting the scene
Setting the scene
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
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
Introducing Redux
Redux Crash Course
All application state is stored in an object tree within the Redux store
Redux Crash Course
Updates to the state are triggered by dispatching actions to the store
Redux Crash Course
The dispatched actions are passed to reducer functions. These reducers update the state
Redux Crash Course
UI components that are subscribed to the state changes will re-render
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
Action-type namespacing
Not namespaced
Namespaced
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
State Traversal Map
Store with traversal
Traversal Usage
What about shared state
Accessing shared state
Complete picture
The problem with Traversal Map
Redux Subspace
No more traverse
Still use Traverse for shared state
Will return root state
Quick Summary
Redux Subspace to decouple micro frontends
Traversal Map for shared/global state
UI Consistency
Theming
Parent app sets the theme
Component uses theme
Questions?