Introduce Flux & react in practices (KKBOX)

Download Introduce Flux & react in practices (KKBOX)

Post on 15-Jul-2015

455 views

Category:

Software

0 download

TRANSCRIPT

  • 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 Stores internal methods

    Update data

    It will trigger Stores change event

    React will get data from Store

    Reacts 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.jsstore 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 comp

    onentcomponent

    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

    Reacts 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 dont worry about rendering*

    Has component life cycle & easy API.

    JSX design is good for working on components and front end designer.

    Its 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