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?