Introduce Flux & React in practices

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. componentstore
component
component
componentstore
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