React/Flux like pattern for embedded UI

Complementing slides for:
* video: https://youtu.be/dO7Qoi_7U4c
* blog post: https://suda.pl/react-like-pattern-for-embedded-ui/

Transcript

1. REACT/FLUX LIKE pattern for embedded UI
2. MCU KEYPAD ENCODERS CLOCK SCREEN LEDS SYNTH
6. currentWaveform currentNote
10. KEYPAD DISPATCHER VIEW STORE action action update handleAction handleStoreUpdate
11. class Keypad { void keyDown(); } class Dispatcher { Store store; void dispatchAction(action, args); Page getCurrentView(); } class View { void handleAction(action, page); void handleStoreUpdate(prop); } dispatchAction(ACTION_KEY_DOWN, {KEY_X}); getCurrentView() .handleAction( ACTION_KEY_DOWN, {KEY_X} );
12. class Keypad { void keyDown(); } class Dispatcher { Store store; void dispatchAction(action, args); Page getCurrentView(); } class View { void handleAction(action, page); void handleStoreUpdate(prop); } store.activeKey = KEY_X; handleStoreUpdate( STORE_PROP_ACTIVE_KEY );
13. class Keypad { void keyDown(); } class Dispatcher { Store store; void dispatchAction(action, args); Page getCurrentView(); } class View { void handleAction(action, page); void handleStoreUpdate(prop); } class Screen { void drawBackground(); void drawActiveKey(); } class Synth { void setNote(key); }