Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduce Flux & React in practice

Randy Lien
November 26, 2014

Introduce Flux & React in practice

A brief introduction about Flux & React.

Randy Lien

November 26, 2014
Tweet

More Decks by Randy Lien

Other Decks in Technology

Transcript

  1. About Me • Randy Lien • HTML, CSS, JavaScript, Python

    • Backbone/Marionette/React • PC-Cillin, SafeSync • KKBOX • @randylien
  2. 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.
  3. 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
  4. 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
  5. 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 Ask Facecbook’s react/flux team, why call flux & react ? Dose it come from Back to The Future ?
  6. 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
  7. 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
  8. comp onent compo nent comp onent comp onent compo nent

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

    comp onent compo nent comp onent comp onent compo nent comp onent comp onent comp onent React’s Virtual DOM will handle the value for you
  10. Practices for Flux • Use console.log in Store • Data

    should not be changed in other place • Use shouldComponentUpdate wisely • Render correctly • Improve performance
  11. Use Case 1. Music Player • Development time: ~4 weeks

    • Pure Flux architecture • 4 Stores (PlayerStore, ChannelStore, UserStore, AppStore) 30 Components, 40 Constants
  12. Use Case 2. Mobile Store • Development time: ~3 weeks

    • Use Fluxxor • Director as Router • 9 Stores, 13 Components, 16 Layouts
  13. 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
  14. Q&A