This document discusses introducing Flux and React in practice. It provides an overview of Flux as an architecture with one directional data flow. React is described as a library for creating views with components. The document then discusses how Flux and React work together, with data flowing from the store to components through a dispatcher. It provides examples of using Flux and React to build a music player app and mobile store app.

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. “The action or process of flowing or flowing out.”
– Dictionary, in your Mac

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.
Ask Facecbook’s react/flhuxt ttepam:/, /wbhya cktothefuture.wikia.com/wiki/File:Flux-capacitor-back-to-the-future.jpg
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. App get data from Store
store
store store
store
app.js

16. Set Property to your Component
store
store store store
app.js

17. component
store
store store store
component
component
component
Set Properties to your sub Components

18. Sub Components get properties
comstpoorneent
component
component
comstpoorneent
store
store

19. Continue to dispatch properties to sub components
compo
nent comp
comp
onent
onent
compo
nent
comp
onent
comp
onent
comp
onent
compo
nent
comp
onent
comp
onent
comp
onent
comp
onent
comp
onent

20. comp
onent
React’s Virtual DOM will handle the value for you
comp
onent
comp
onent
compo
nent
comp
onent
compo
nent
comp
onent
comp
onent
compo
nent
comp
onent
comp
onent
comp
onent
comp
onent

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. “Understand the architecture before
you leverage any implementations.”
- Randy

29. By the way

30. f.lux

31. Q&A