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
31. Use Case 1. Music Player
• Development time: ~4 weeks
• Pure Flux architecture
• 4 Stores (PlayerStore, ChannelStore,
UserStore, AppStore) 30
Components, 40 Constants
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
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.