IntroduceFlux & React

in practice

Randy Lien Sr. Front end developer

@randylien

About Me

• Randy Lien • HTML, CSS, JavaScript, Python • Backbone/Marionette/React • @randylien

Preface

• If there are anything I mentioned is not correct, please feel free to point out.

Agenda• What is React & Flux

• What is React

• What is Flux

• Case study

• Conclusion

What is React

What is React

• View library created by facebook

• Visual DOM

• Component life cycle

• JSX

JSX

Life Cycle & API

https://www.facebook.com/photo.php?fbid=10154774642145430&set=gm.1491610957781164&type=1&theater

What is Flux

What is Flux

• Application architecture for building user interfaces

• Unidirectional data flow

• It's more of a pattern rather than a formal framework

– 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.jpg

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 & 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

• 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

Flux is circular in nature

http://facebook.github.io/react/img/blog/flux-diagram.png

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

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

<App player={fluxPlayer} user={fluxUser} />

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

Case Study

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: ~4 weeks

• Use Fluxxor

• Director as Router

• 9 Stores, 13 Components, 16 Layouts

DEMO

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.

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

Conclusion

Conclusion• Flux is a simple and clear architecture

• Not a framework yet.

• Event driven.

• Everyone should follow the same flow.

• There are many implementations.

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.

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.

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

Thanks