Flux + React

Transcript

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
10. Say Hello to VirtualDOM
11. Model Virtual DOM DOM Interact with VirtualDOM Data Data Event 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