Post on 02-Jul-2015
description
About Me• Randy Lien • HTML, CSS, JavaScript, Python • Backbone/Marionette/React • PC-Cillin, SafeSync • KKBOX • @randylien
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.
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
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
What Is Flux
– Dictionary, in your Mac
“The action or process of flowing or flowing out.”
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.jpgAsk Facecbook’s react/flux team, why call flux & react ?Dose it come from Back to The Future ?
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 is circular in nature
http://facebook.github.io/react/img/blog/flux-diagram.png
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
Events from React
https://www.facebook.com/photo.php?fbid=10154774642145430&set=gm.1491610957781164&type=1&theater
Important
http://facebook.github.io/react/img/blog/flux-diagram.png
Store & React
store
store store
store
app.js
App get data from Store
app.js
store store storestore
Set Property to your Component
component
store store storestore
component
component
component
Set Properties to your sub Components
componentstore
component
component
componentstore
store
store
Sub Components get properties
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
Practices for Flux• Use console.log in Store
• Data should not be changed in other place
• Use shouldComponentUpdate wisely
• Render correctly
• Improve performance
Use Case 1. Music Player
• Development time: ~4 weeks
• Pure Flux architecture
• 4 Stores (PlayerStore, ChannelStore,
UserStore, AppStore) 30 Components, 40 Constants
DEMO
Use Case 2. Mobile Store
• Development time: ~3 weeks
• Use Fluxxor
• Director as Router
• 9 Stores, 13 Components, 16 Layouts
DEMO
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
- Randy
“Understand the architecture before you leverage any implementations.”
By the way
f.lux
Q&A