$30 off During Our Annual Pro Sale. View Details »

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

Rajiv Tirumalareddy

November 03, 2015
Tweet

Other Decks in Programming

Transcript

  1. Universal    
    React  +  Flux    
    at  SCALE!  
    Rajiv
    Tirumalareddy

    View Slide

  2. Frameworks  Team  
    Michael
    Ridgway
    Seth
    Bertalotto
    Rajiv
    Tirumalareddy
    Kaeson
    Ho
    Lingyan
    Zhu
    me
    Eric
    Ferraiuolo

    View Slide

  3. h>p://fluxible.io  
    Fluxible

    View Slide

  4. Client
    YUI
    MVC
    Server
    CommonJS
    Node
    Express
    MVC

    View Slide

  5. Client
    YUI
    MVC
    Server
    CommonJS
    Node
    Express
    MVC

    View Slide

  6. Flux  
    Ac#on   Dispatcher   Store   View  
    Ac#on  

    View Slide

  7. View  
    Flux  on  the  Server  
    A
    B
    ?
    ?
    Ac#on   Dispatcher   Store  
    Ac#on  

    View Slide

  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

    View Slide

  9. Ac#on   Dispatcher   Store   View  
    SERVER  
    HTML  
    JS/CSS  
    Dehydrated  
    Flux  State  
    (JSON)  
    Store   View  
    BROWSER  
    Universal  Flux  
    A

    View Slide

  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

    View Slide

  11. Client
    YUI
    MVC
    Server
    CommonJS
    Node
    Express
    MVC

    View Slide

  12. Client
    Polyfills
    Webpack
    Server
    Node
    Express
    Atomic CSS

    View Slide

  13. Express  Middleware  
    Fluxible  Plugins  

    View Slide

  14. What  is  Scale?  

    View Slide

  15. Development  

    View Slide

  16. Developer  ProducRvity  
    ESLint

    View Slide

  17. Product  

    View Slide

  18. View Slide

  19. View Slide









  20. View Slide

  21. Context  

    View Slide

  22. Devices  

    View Slide

  23. AuthenRcaRon  

    View Slide

  24. Browsers  

    View Slide

  25. Money
    Problems
    Context

    View Slide

  26.  
    if  (device  ===  'smartphone')  {  
           return  ;  
    }  else  if  (...){  
         //...  
    }  

    View Slide

  27. How  can  we  serve  the  minimal  resources  
    for  the  best  user  experience?  

    View Slide

  28. Dynamic  Page  ComposiRon  
    Layouts   Components   Data   Assets  

    View Slide

  29. Flexible  Layouts  
    f(x)
    A  
    B  
    C  
    D  
    A  
    B   C  
    D  
    A  
    B   C   D  

    View Slide

  30. Reusable  Components  
    A  
    A   A   A   A  
    A   A   A  
    A   A   A  
    A   A   A  

    View Slide

  31. Data  Fetching  
    Ac#on   Dispatcher   Store   View  
    Ac#on  
    Fetchr  
    REST  APIs  
    Ac#on  

    View Slide

  32. IniRal  Data  Problem  
    Ac#on   Dispatcher   Store  
    ?
    View  

    View Slide

  33. Ini#al  
    Ac#on  
    IniRal  Data  SoluRon  
    Ac#on   Dispatcher   Store   View  
    Statically
    Declared

    View Slide

  34. Ar#cle  
    Ac#on  
    IniRal  Data  Example  
    Navigate
    Ac#on  
    Dispatcher   Store  
    /ar#cle/8  
    Ar#cle  
    View  
    Fetchr  
    Ar#cle  API  

    View Slide

  35. CreaRng  Reusable  Bundles  
    > npm publish
    Components   Stores  
    AcRon  
    Creators  
    Data  
    Services  
    CSS  

    View Slide

  36. Using  Bundles  
    > npm install

    View Slide

  37. Asset  Loading  
    user
    A   B   C   D   E  
    A   B   C   D   E   BROWSER  
    SERVER  

    View Slide

  38. Smart  Asset  Loading  
    user
    A   B   C   D   E  
    A   B   C   D   E  
    scroll click
    BROWSER  
    SERVER  

    View Slide

  39. How  can  we  serve  the  minimal  resources  
    for  the  best  user  experience?  

    View Slide

  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  

    View Slide

  41. What  next?  

    View Slide

  42. Web  Server  
    TTFB  
    applicaRon  data   render  
    rouRng   assets  
    GET  
    /myapp   end  
    flush    

    View Slide

  43. TTFB  
    applicaRon  data  
    render  
    Web  Server   rouRng   assets  
    GET  
    /myapp   end  
    flush     flush     flush    

    View Slide

  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  

    View Slide

  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  

    View Slide

  46. Thank  You!  
    @rajivontherocks
    vijar

    View Slide