Introduce Flux & React in practice

A brief introduction about Flux & React.

Transcript

1. Introduce
 Flux & React in practice ReactJS.tw - meetup 2 @randylien
2. About Me • Randy Lien • HTML, CSS, JavaScript, Python • Backbone/Marionette/React • PC-Cillin, SafeSync • KKBOX • @randylien
3. Preface • Everything you see today is under construction. • This is my personal experience sharing. • If there are anything I mentioned is not correct, please feel free to point out.
4. Flux & React • Flux is an architecture • Dispatcher • There are many extensions* for Flux • One direction data flow • React is a library to create View • Component • JSX • Compiled
5. Flux & React • React is a library to create View • Component • JSX • Compiled • Flux is an architecture • Dispatcher • There are many extensions* for Flux • One direction data flow Data Presentation
6. What Is Flux
7. – Dictionary, in your Mac “The action or process of flowing or flowing out.”
8. Dr.Brown 
 explains • Flux Capacitor • Flux = Flow of time. • Capacitor = Temporary Storage. • Flux Capacitor must be powered by a small Reactor. • Time space continuum is circular in nature. http://backtothefuture.wikia.com/wiki/File:Flux-capacitor-back-to-the-future.jpg Ask Facecbook’s react/flux team, why call flux & react ? Dose it come from Back to The Future ?
9. Flux & React • Flux just like time, it is one way direction to flow • Capacitor is Store • Event trigger from React • The flow is circular in nature http://www.8ball.co.uk/media/catalog/product/b/a/back_to_the_future_-_flux_capacitor_-_yel_mens_4_1.jpg
10. Flux is circular in nature http://facebook.github.io/react/img/blog/flux-diagram.png
11. Store • Kind of model • Callbacks will trigger Store’s internal methods • Update data • Trigger Store’s change event • Store will return data to React • React’s Virtual DOM will handle your data
12. Events from React https://www.facebook.com/photo.php?fbid=10154774642145430&set=gm.1491610957781164&type=1&theater
13. Important http://facebook.github.io/react/img/blog/flux-diagram.png
14. Store & React
15. store store store store app.js App get data from Store
16. app.js store store store store Set Property to your Component
17. component store store store store component component component Set Properties to your sub Components
18. component store component component component store store store Sub Components get properties
19. comp onent compo nent comp onent comp onent compo nent comp onent comp onent comp onent compo nent comp onent comp onent comp onent comp onent Continue to dispatch properties to sub components
20. comp onent comp onent comp onent comp onent compo nent comp onent compo nent comp onent comp onent compo nent comp onent comp onent comp onent React’s Virtual DOM will handle the value for you
21. Important http://facebook.github.io/react/img/blog/flux-diagram.png
22. Practices for Flux • Use console.log in Store • Data should not be changed in other place • Use shouldComponentUpdate wisely • Render correctly • Improve performance
23. Use Case 1. Music Player • Development time: ~4 weeks • Pure Flux architecture • 4 Stores (PlayerStore, ChannelStore, UserStore, AppStore) 30 Components, 40 Constants
24. DEMO
25. Use Case 2. Mobile Store • Development time: ~3 weeks • Use Fluxxor • Director as Router • 9 Stores, 13 Components, 16 Layouts
26. DEMO
27. Flux implementation • http://fluxxor.com/ • https://github.com/spoike/refluxjs • https://github.com/jmreidy/fluxy • https://github.com/yahoo/dispatchr • https://github.com/yahoo/fluxible-app • https://github.com/kenwheeler/mcfly • http://deloreanjs.com/ • http://www.jflux.io
28. - Randy “Understand the architecture before 
 you leverage any implementations.”
29. By the way
30. f.lux
31. Q&A