introduce flux & react in practices (kkbox)
TRANSCRIPT
Life Cycle & API
https://www.facebook.com/photo.php?fbid=10154774642145430&set=gm.1491610957781164&type=1&theater
What is Flux
• Application architecture for building user interfaces
• Unidirectional data flow
• It's more of a pattern rather than a formal framework
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
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
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
• 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
Flux is circular in nature
http://facebook.github.io/react/img/blog/flux-diagram.png
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
Important
http://facebook.github.io/react/img/blog/flux-diagram.png
app.js
store store storestore
Set Property to your Component
<App player={fluxPlayer} user={fluxUser} />
component
store store storestore
component
component
component
Set Properties to your sub Components
component
component
component
component
component
component
component
component
component
component
component
component
component
Continue to dispatch properties to sub components
component
component
component
component
component
component
component
component
component
component
component
component
component
React’s Virtual DOM will handle the value for you
Important
http://facebook.github.io/react/img/blog/flux-diagram.png
Use Case 1. Music Player
• Development time: ~4 weeks
• Pure Flux architecture
• 4 Stores (PlayerStore, ChannelStore,
UserStore, AppStore) 30 Components, 40 Constants
Use Case 2. Mobile Store
• Development time: ~4 weeks
• Use Fluxxor
• Director as Router
• 9 Stores, 13 Components, 16 Layouts
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.
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
Conclusion• Flux is a simple and clear architecture
• Not a framework yet.
• Event driven.
• Everyone should follow the same flow.
• There are many implementations.
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.
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.
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