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

Introduce Flux & React in KKBOX

Randy Lien
December 26, 2014

Introduce Flux & React in KKBOX

Flux & React introduction in KKBOX

Randy Lien

December 26, 2014
Tweet

More Decks by Randy Lien

Other Decks in Programming

Transcript

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

    • Backbone/Marionette/React • @randylien
  2. Preface • If there are anything I mentioned is not

    correct, please feel free to point out.
  3. Agenda • What is React & Flux • What is

    React • What is Flux • Case study • Conclusion
  4. What is React • View library created by facebook •

    Visual DOM • Component life cycle • JSX
  5. JSX

  6. What is Flux • Application architecture for building user interfaces

    • Unidirectional data flow • It's more of a pattern rather than a formal framework
  7. 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
  8. 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
  9. 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
  10. • 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
  11. 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
  12. app.js store store store store Set Property to your Component

    <App player={fluxPlayer} user={fluxUser} />
  13. 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
  14. 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
  15. Use Case 1. Music Player • Development time: ~4 weeks

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

    • Use Fluxxor • Director as Router • 9 Stores, 13 Components, 16 Layouts
  17. 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.
  18. 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
  19. Conclusion • Flux is a simple and clear architecture •

    Not a framework yet. • Event driven. • Everyone should follow the same flow. • There are many implementations.
  20. 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.
  21. 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.
  22. 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