IntroduceFlux & React

in practice

ReactJS.tw - meetup 2

@randylien

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