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
   

   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