isomorphic react + flux at yahoo
TRANSCRIPT
Isomorphic React+Flux at YahooMr. Friday
About me
● MMDays (2007~)● Yahoo TW (2010)● Yahoo US (2011~)
○ Frontpage○ News○ MyYahoo○ ...
Agenda
● Isomorphic● React + Flux● Isomorphic Flux● Challenges● Q&A
Isomorphic Web
Client side Single Page Application
● Benefits: Fast, richer user experiences● Drawbacks:
○ SEO○ Potential double work○ Performance○ Legacy browsers
Examples
● No page reload
● Same URL, different experiences after reload
● Any way to reuse the code ?
Yahoo had tried it ...
● “First open source isomorphic framework to get any press” - Airbnb
● Lesson learned:○ Server side YUI was too heavy○ Sync Server/Client state and routing was hard○ YUI format is problematic in Node
React JS
● Finite state machine
● Re-render everytime
● Virtual DOM to save perf.
Flux
● Uni-directional data flow
Isomorphic + React + Flux ?
● Plain javascript to run efficiently on both server and client
● State transferring between server/client is easy
● Challenge: Flux is client side only.
Server side Flux
Implementation details
https://speakerdeck.com/mridgway/isomorphic-flux starting slide 26
https://github.com/yahoo/flux-examples
Challenges - Server-only Libs
● Every code needs to run on server/client. Need a way to handle server side only libraries. ○ Create a service that only runs on server side○ Move them to APIs○ Apache traffic server
CSS Challenges
● Dynamic modules brings additonal CSS challenges
● Webpack is not good at including CSS● In tradition, we use CSS combo tool. Now
we either need to reimplement it in react environment, or find something else.
CSS: How facebook did it
https://speakerdeck.com/vjeux/react-css-in-js
CSS: How Yahoo did it
http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/
Holy Grail
Q&A
● questions ?
Thank you !