React/Flux like pattern for embedded UI

React/Flux like pattern for embedded UI

Cba56198463ece8d5c1cc1d6a353ddbd?s=128

Wojtek Siudzinski

November 21, 2019
Tweet

Transcript

  1. REACT/FLUX LIKE pattern for embedded UI

  2. MCU KEYPAD ENCODERS CLOCK SCREEN LEDS SYNTH

  3. None
  4. None
  5. None
  6. currentWaveform currentNote

  7. None
  8. None
  9. None
  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); }