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

9. None

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