Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduce Flux & react in practices (KKBOX)

5,902 views

Published on

Introduce Flux & React in practices

Published in: Software
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/2Qu6Caa ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi! Can i find somewhere the Life Cycle & API diagram in good (printable) quality? (I don't see why it's not in the docs, it is incredibly helpful)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Introduce Flux & react in practices (KKBOX)

  1. 1. Introduce
 Flux & React in practice Randy Lien Sr. Front end developer @randylien
  2. 2. About Me • Randy Lien • HTML, CSS, JavaScript, Python • Backbone/Marionette/React • @randylien
  3. 3. Preface • If there are anything I mentioned is not correct, please feel free to point out.
  4. 4. Agenda • What is React & Flux • What is React • What is Flux • Case study • Conclusion
  5. 5. What is React
  6. 6. What is React • View library created by facebook • Visual DOM • Component life cycle • JSX
  7. 7. JSX
  8. 8. Life Cycle & API https://www.facebook.com/photo.php?fbid=10154774642145430&set=gm.1491610957781164&type=1&theater
  9. 9. What is Flux
  10. 10. What is Flux • Application architecture for building user interfaces • Unidirectional data flow • It's more of a pattern rather than a formal framework
  11. 11. – Dictionary, in your Mac “The action or process of flowing or flowing out.”
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. • 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
  16. 16. Flux is circular in nature http://facebook.github.io/react/img/blog/flux-diagram.png
  17. 17. 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
  18. 18. Important http://facebook.github.io/react/img/blog/flux-diagram.png
  19. 19. Store & React
  20. 20. store store store store app.js App get data from Store
  21. 21. app.js store store store store Set Property to your Component <App player={fluxPlayer} user={fluxUser} />
  22. 22. component store store store store component component component Set Properties to your sub Components
  23. 23. componentstore component component componentstore store store Sub Components get properties
  24. 24. 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
  25. 25. 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
  26. 26. Important http://facebook.github.io/react/img/blog/flux-diagram.png
  27. 27. Case Study
  28. 28. Use Case 1. Music Player • Development time: ~4 weeks • Pure Flux architecture • 4 Stores (PlayerStore, ChannelStore, UserStore, AppStore) 30 Components, 40 Constants
  29. 29. DEMO
  30. 30. Use Case 2. Mobile Store • Development time: ~4 weeks • Use Fluxxor • Director as Router • 9 Stores, 13 Components, 16 Layouts
  31. 31. DEMO
  32. 32. 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.
  33. 33. 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
  34. 34. Conclusion
  35. 35. Conclusion • Flux is a simple and clear architecture • Not a framework yet. • Event driven. • Everyone should follow the same flow. • There are many implementations.
  36. 36. 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.
  37. 37. 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.
  38. 38. 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
  39. 39. Thanks

×