Introduce Flux & React in KKBOX

Flux & React introduction in KKBOX

Transcript

1. Introduce
 Flux & React in practice Randy Lien Sr. Front end developer @randylien
2. About Me • Randy Lien • HTML, CSS, JavaScript, Python • Backbone/Marionette/React • @randylien
3. Preface • If there are anything I mentioned is not correct, please feel free to point out.
4. Agenda • What is React & Flux • What is React • What is Flux • Case study • Conclusion
5. What is React
6. What is React • View library created by facebook • Visual DOM • Component life cycle • JSX
7. JSX
8. Life Cycle & API https://www.facebook.com/photo.php?fbid=10154774642145430&set=gm.1491610957781164&type=1&theater
9. What is Flux
13. What is Flux • Application architecture for building user interfaces • Unidirectional data flow • It's more of a pattern rather than a formal framework
14. – Dictionary, in your Mac “The action or process of flowing or flowing out.”
15. 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
16. 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
17. Flux & React • Flux is an architecture • Dispatcher • One direction data flow • There are many extensions* for Flux • React is a library to create View • Event trigger • Component life cycle • Visual DOM
18. • React is a library to create View • Event trigger • Component life cycle • Visual DOM • Flux is an architecture • Dispatcher • One direction data flow • There are many extensions* for Flux Flux & React Data flowing flowing out Presentation
19. Flux is circular in nature http://facebook.github.io/react/img/blog/flux-diagram.png
20. Store • Kind of model • Callback executes Store’s internal methods • Update data • It will trigger Store’s change event • React will get data from Store • React’s Virtual DOM will handle your data
21. Important http://facebook.github.io/react/img/blog/flux-diagram.png
22. Store & React
23. store store store store app.js App get data from Store
24. app.js store store store store Set Property to your Component <App player={fluxPlayer} user={fluxUser} />
25. component store store store store component component component Set Properties to your sub Components
26. component store component component component store store store Sub Components get properties
27. 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
28. 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
29. Important http://facebook.github.io/react/img/blog/flux-diagram.png
30. Case Study
31. Use Case 1. Music Player • Development time: ~4 weeks • Pure Flux architecture • 4 Stores (PlayerStore, ChannelStore, UserStore, AppStore) 30 Components, 40 Constants
32. DEMO
33. Use Case 2. Mobile Store • Development time: ~4 weeks • Use Fluxxor • Director as Router • 9 Stores, 13 Components, 16 Layouts
34. DEMO
35. Practices for Flux • Use console.log in Store • Data should not be changed in other place. • Wrap your dynamic React components with tag. • If you are using 3rd party libraries, you have to initialise them in componentDidMount. • If 3rd party library will modify DOM, you should avoid to assign key on its parent element.
36. Practices for React • Use JSX • Create stateless component • State is used for internal and Property gives from external. • Decoupling • Use shouldComponentUpdate wisely • Prevent unexpected re-render • Improve render performance
37. Conclusion
38. Conclusion • Flux is a simple and clear architecture • Not a framework yet. • Event driven. • Everyone should follow the same flow. • There are many implementations.
39. Conclusion (cont.) • React is a view library with Visual DOM • Developer don’t worry about rendering* • Has component life cycle & easy API. • JSX design is good for working on components and front end designer. • It’s just JavaScript.
40. Conclusion (cont.) • Other things we can do in the future • Write with ECMAScript 6. • Using Jest to do testing. • Functional Reactive Programming should make Flux & React better. • Isomorphic App or Server Side Rendering can improve performance and works for SEO. • Solution for CSS is working on.
41. 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
42. Thanks