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

Building Widget Platform with Isomorphic React ...

Roy Yu
July 30, 2016

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.

Roy Yu

July 30, 2016
Tweet

More Decks by Roy Yu

Other Decks in Programming

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. 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.    
  6. 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    
  7. 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.        
  8. 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.        
  9. 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            
  10. Widget  Design     Approach  #2       Instead

     of  having  individual  wrapper  for  individual  components,  we   can  design  our  widget  as  a  set  of  library.                
  11. 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.                
  12. 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.    
  13. 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  
  14. 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.      
  15. 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    
  16. Demo   We  are  going  to  demo  of  Server  side

     isomorphic   React  applicaIon.     •  We  will  show  case  Template  Service  as   –  Page  experience   –  API  experience    
  17. Demo   We  are  going  to  demo  packaging  our  widget

     in  a   format  easy  for  customer  to  consume     Web  Components  /  Open  Components