Universal React + Flux at Scale!

Fluxible's (http://fluxible.io) approach to universal flux and how we deal with the challenges of adopting a new technology at Yahoo's scale.

Video: https://www.youtube.com/watch?v=M3suoQuDvH4

ReactiveConf 2015

Transcript

1. Universal     React  +  Flux     at  SCALE!   Rajiv Tirumalareddy
2. Frameworks  Team   Michael Ridgway Seth Bertalotto Rajiv Tirumalareddy Kaeson Ho Lingyan Zhu me Eric Ferraiuolo
3. h>p://fluxible.io   Fluxible
4. Client YUI MVC Server CommonJS Node Express MVC
5. Client YUI MVC Server CommonJS Node Express MVC
6. Flux   Ac#on   Dispatcher   Store   View   Ac#on  
7. View   Flux  on  the  Server   A B ? ? Ac#on   Dispatcher   Store   Ac#on  
8. Flux  on  the  Server   https://github.com/yahoo/fluxible/blob/master/docs/guides/bringing-flux-to-the-server.md Ac#on   Dispatcher   Store   View   Dispatcher   Store   View   A B A B
9. Ac#on   Dispatcher   Store   View   SERVER   HTML   JS/CSS   Dehydrated   Flux  State   (JSON)   Store   View   BROWSER   Universal  Flux   A
10. Ac#on   Dispatcher   Store   View   SERVER   HTML   JS/CSS   Dehydrated   Flux  State   (JSON)   Ac#on   Dispatcher   Store   View   Ac#on   BROWSER   Universal  Flux   A
11. Client YUI MVC Server CommonJS Node Express MVC
12. Client Polyfills Webpack Server Node Express Atomic CSS
13. Express  Middleware   Fluxible  Plugins  
14. What  is  Scale?  
15. Development  
16. Developer  ProducRvity   ESLint
17. Product  
20. <Nav /> <Slideshow /> <Stream /> <TopStories /> <Trending /> <Concerts /> <Login /> <Search />
21. Context  
22. Devices  
23. AuthenRcaRon  
24. Browsers  
25. Money Problems Context
26.   if  (device  ===  'smartphone')  {          return  <UnreadableFontSize  />;   }  else  if  (...){        //...   }  
27. How  can  we  serve  the  minimal  resources   for  the  best  user  experience?  
28. Dynamic  Page  ComposiRon   Layouts   Components   Data   Assets  
29. Flexible  Layouts   f(x) A   B   C   D   A   B   C   D   A   B   C   D  
30. Reusable  Components   A   A   A   A   A   A   A   A   A   A   A   A   A   A  
31. Data  Fetching   Ac#on   Dispatcher   Store   View   Ac#on   Fetchr   REST  APIs   Ac#on  
32. IniRal  Data  Problem   Ac#on   Dispatcher   Store   ? View  
33. Ini#al   Ac#on   IniRal  Data  SoluRon   Ac#on   Dispatcher   Store   View   Statically Declared
34. Ar#cle   Ac#on   IniRal  Data  Example   Navigate Ac#on   Dispatcher   Store   /ar#cle/8   Ar#cle   View   Fetchr   Ar#cle  API  
35. CreaRng  Reusable  Bundles   > npm publish <component> Components   Stores   AcRon   Creators   Data   Services   CSS  
36. Using  Bundles   > npm install <component>
37. Asset  Loading   user A   B   C   D   E   A   B   C   D   E   BROWSER   SERVER  
38. Smart  Asset  Loading   user A   B   C   D   E   A   B   C   D   E   scroll click BROWSER   SERVER  
39. How  can  we  serve  the  minimal  resources   for  the  best  user  experience?  
40. Minimal  Resources   •  Flexible  layouts   •  Reusable  components   •  StaRcally  declared  data   •  Smart  bundle  loading   BeIer  User  Experience   •  Faster  page  loads   •  Smaller  k-­‐weight   •  Fewer  cacheable  requests  
41. What  next?  
42. Web  Server   TTFB   applicaRon  data   render   rouRng   assets   GET   /myapp   end   flush    
43. TTFB   applicaRon  data   render   Web  Server   rouRng   assets   GET   /myapp   end   flush     flush     flush    
44. Progressive  Rendering   100%   Server   100%   Client   Preload   Fetch  Data   Render   Example  Use  Case   100%   Server   server   server   CriRcal  modules  above   the  fold   Preload   server   client   Immediately  below  the   fold   100%   Client   client   client   Far-­‐bo>om  or   invoked  by  user  acRon  
45. The  Bad  Parts   •  Checksum   – One  small  error,  throws  away  all  markup   – MulRple  render  trees   •  iframes   – Reloaded  on  re-­‐render   – Move  outside  container  and  move  back  
46. Thank  You!   @rajivontherocks vijar