Panel Architecture in Corvidata

Don't take anything as

'the new best thing of the month'

• State redesign and reasons why
• Process of top-down design

What is this talk about?

(demo)

What does Corvid Data team do?

What is a panel in Corvid data?

 1. Some panels were not designed to support current features

Our pain with panels

(connect panel demo)

(alien experiment)

2. Difficult to track all the relevant info in a single redux state

Our pain with panels

Usually our panels have very different UI states

(demo)

State diagram based design

UIs have isolated states

Thinking in states

pubg.sh case

1. Happy flow

2. Edge cases

bonus: PM understands it

bonus: helps finding bugs

3. Events

4. State data

Union types to represent state variants

Redux manages only state transitions

Side-effects are results of state transitions

Putting state diagram to code

Union types

person = student | teacher

panelState = Form | Loading | Error | Results

before: redux-thunk

side effects = f (oldState, action)

after: redux-serial-effects

side effects = f (oldState, newState)

redux-serial-effects

Subscribers watch state transitions and dispatch side effects 

https://github.com/wix/redux-serial-effects

the code

Conclusions

• Easier to understand app state
• Easier to visualise app flows
• More separation between logic, UI and side effects
• Possible to design top-down

• Harder onboarding
• No conventions
• Library limations

Pros

Cons

Is it worth it?

It depends

More about state diagrams in UIs

xstate library

any recent talk by David Khourshid 

Thank you!