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  
2. The  Goal       Explaining  how  to  build  widgets  with  React  that   can  have  SEO  value  and  discuss     architecture  decisions    
3. Warning     This  slide  contains  a  lot  of  graphics.     Viewer  discreIon  advised.    
4. What  we  will  cover  today   Retro  is  a  combinaIon   of  tools,  including   webpack,  it  is  an   internal  framework  we   created  for  our  team.  
5. High-­‐level  Architecture    
6. High-­‐level  Build  and  Delivery  
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.    
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    
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.        
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.        
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            
12. Widget  Design     Approach  #2       Instead  of  having  individual  wrapper  for  individual  components,  we   can  design  our  widget  as  a  set  of  library.                
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.                
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.    
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  
16. High-­‐level  Architecture   (  Server  Side  )    
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.      
18. High-­‐level  Build  and  Delivery  
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    
20. Demo   We  are  going  to  demo  of  Server  side  isomorphic   React  applicaIon.     •  We  will  show  case  Template  Service  as   –  Page  experience   –  API  experience    
21. Demo   We  are  going  to  demo  packaging  our  widget  in  a   format  easy  for  customer  to  consume     Web  Components  /  Open  Components  
22. Major  Technology  of  our  project  
23. haps://www.linkedin.com/in/iroy2000