Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flux + React

Flux + React


Oursky Limited

June 23, 2015

More Decks by Oursky Limited

Other Decks in Programming


  1. Flux + React Rick Mak May 2015

  2. One of the pain DOM

  3. Direct DOM = painful = BUG

  4. Age of Backbone Model View

  5. Works Great in small scale

  6. more Model; more View

  7. It is SLOW

  8. Let Optimise it

  9. None
  10. Say Hello to VirtualDOM

  11. Model Virtual DOM DOM Interact with VirtualDOM Data Data Event

  12. setState will trigger render Define your view

  13. React calculate the diff • Set state will mark the

    red dot • React will find out the blue dots • Re-render with only the modified dom Source: https://facebook.github.io/react/img/blog/react-diff-tree.png
  14. Fast without spaghetti

  15. Let focus on Logic

  16. State inconsistency Very common in single page webapp

  17. State inconsistency • Server sync not sync with client state

    • item missing • duplicate item • State between client not sync • State panic with poor internet
  18. Flux fix that

  19. It is a pattern A pattern enforcing unidirectional data flow

    Flux is not framework
  20. View Action Store Dispatcher Server

  21. Unidirectional data flow • Faster debug • Faster on boarding

    • Faster iteration • Less cascading effect
  22. Thank you