Building Widget Platform with Isomorphic React and Webpack ( ForwardJS 2016 )

The session will show case how we build our frontend platform with React, Node and Webpack to generate widget components that is sharable across our UI ecosystem as well as third party sites. And the widgets / components that get generated can be run isomorphically across different languages . For example, you can consume our widget service in PHP or Python and able to get the same isomorphic experience.

Transcript

1. ForwardJS  5  
    
   Building  Isomorphic  Widget  Pla;orm    
   with  React  and  Webpack  
   presented  by  Roy  Yu  
   

   View Slide

2. The  Goal    
    
   Explaining  how  to  build  widgets  with  React  that  
   can  have  SEO  value  and  discuss    
   architecture  decisions  
    
   

   View Slide

3. Warning  
    
   This  slide  contains  a  lot  of  graphics.    
   Viewer  discreIon  advised.  
    
   

   View Slide

4. What  we  will  cover  today  
   Retro  is  a  combinaIon  
   of  tools,  including  
   webpack,  it  is  an  
   internal  framework  we  
   created  for  our  team.  
   

   View Slide

5. High-­‐level  Architecture    
   

   View Slide

6. High-­‐level  Build  and  Delivery  
   

   View Slide

7. Why  React  ?  
   •  Performance  
   •  DeclaraIve  
   •  Low  Learning  Barrier  (  unIl  you  work  on  more  advance  stuff  )  
   •  Great  community  support  and  ecosystem  
   •  Components  are  composable  
    
   Isn’t  it  widget  also  meant  reusable  component  ?    React  is  
   naIvely  a  good  match  of  what  we  need.  
    
   

   View Slide

8. Why  Webpack  ?  
   •  Powerful  build  tool,  module  bundler  and  
   workflow  enhancer  
   •  Lots  of  community  support  (  unIl  you  work  on  more  advance  
   stuff  )  
   •  Lots  of  assets  transformaIon  loaders  and  
   opImizaIon  plugins.  
    
   We  get  many  features  we  need  out  of  the  box  and  what  we  need  to  do    
   is  to  feed  webpack  an  configuraIon  file.    The  configuraIon  model  is  
   somewhere  between  Grunt  and  Gulp.    But,  IMHO,  it  is  way  more  
   powerful  than  Grunt  and  Gulp  J  
    
   

   View Slide

9. Basic  Code  OrganizaIon  
    
   Base  Feature  
    
   Define  a  normal  high  order  container  and  dump  components  
    
   Index.jsx  is  our  high  order  container  which  contains  flux  data  layer  
    
   ContestAuthComponents.jsx  is  what  the  industry  call  dump  
   component,  it  is  a  pure  view  that  take  props  only.  
        
   

   View Slide

10. Widget  Design  
     
    Approach  #1  
    A\er  we  have  the  module  or  the  component,  we  now  can  wrap  the  
    component  individually  with  a  widget    wrapper.    And  client  can  pass  
    in  config  to  bootstrap  the  widget.  
         
    

    View Slide

11. Widget  Design  
     
    Approach  #1  (  con>nue  )  
     
    But  for  client  that  doesn’t  know  how  to  use  javascript,  you  may  want  
    to  do  the  following  …    And  ask  them  to  put  a  “#app-­‐container”  into  
    their  page  J  
     
     
         
    

    View Slide

12. Widget  Design  
     
    Approach  #2    
     
    Instead  of  having  individual  wrapper  for  individual  components,  we  
    can  design  our  widget  as  a  set  of  library.      
     
     
         
    

    View Slide

13. Widget  Design  
     
    Approach  #2  (  con>nue  )  
     
    Beaer  yet,  you  can  take  advantage  of  lazy  loading  and  also  import  
    EventEmiaer  to  manage  the  life  cycle  of  your  widgets.  
     
     
     
     
         
    

    View Slide

14. High-­‐level  Architecture    
    (  Client  Side  )    
    Now  we  have  develop  some  widget  source  code  with  React.    And  …  
     
    •  We  need  to  transform  source  code,  opImize  it  
    •  Create  ArIfacts  and  meta  data  
    •  Deploy  client  assets  to  CDN  
    But  stay  tune,  we  are  not  done  yet,  the  following  pipeline  is  for  client  side  ONLY.    
    

    View Slide

15. High-­‐level  Delivery  mechanism  
    There  are  many  ways  to  package  and  deliver  the  
    widgets  to  third  party,  what  we  have  tried  :-­‐  
     
    •  S3  /  CDN  
    •  Web  Component  /  Open  Component  
    •  Public  /  Private  Registry  
    •  Docker  Container  as  Resources  /  API  proxy  
    •  Iframe  
    •  …  blah  …  etc  
    

    View Slide

16. High-­‐level  Architecture  
    (  Server  Side  )    
    

    View Slide

17. High-­‐level  Request  
    So  at  the  end,  the  template  
    service  could  be  expose  as  an  
    API  for  different  language  to  
    query.  
     
    A\er  they  (  like  PHP  /  ruby  )  get  
    the  response,  they  can  put  the  
    content  into  their  view.  
     
     
    

    View Slide

18. High-­‐level  Build  and  Delivery  
    

    View Slide

19. Demo  
    We  are  going  to  demo  a  client  side  widget  
    applicaIon  with  React  and  Webpack.    
     
    One  important  thing  to  note  in  this  demo  is  the  “meta”  data  file  
    that’s  generated.    
     
     
    And  later  we  will  go  to  Serve  side  
     
    

    View Slide

20. Demo  
    We  are  going  to  demo  of  Server  side  isomorphic  
    React  applicaIon.  
     
    •  We  will  show  case  Template  Service  as  
    –  Page  experience  
    –  API  experience  
     
    

    View Slide

21. Demo  
    We  are  going  to  demo  packaging  our  widget  in  a  
    format  easy  for  customer  to  consume  
     
    Web  Components  /  Open  Components  
    

    View Slide

22. Major  Technology  of  our  project  
    

    View Slide

23. haps://www.linkedin.com/in/iroy2000  
    

    View Slide