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

Universal React + Flux at Scale!

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

D22dda73a0744baef677a917bb4a9f08?s=128

Rajiv Tirumalareddy

November 03, 2015
Tweet

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  

  18. None
  19. None
  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