Google's Polymer Js

A Talk about
1. What is polymer?
2. how to create Vanilla Custom elements and Polymer elements.
3. Challenges that you might face in Polymer

Transcript

1. Polymer   Shridhar  Deshmukh  (@_shree33)   Xconf,  ThoughtWorks  Bangalore   22  Nov,  2014  
2. Welcome  to  Future   •  Web  Components   •  Web  Development  based  on  encapsulated   and  interoperable  custom  elements   •  Polyfills  for  older  browsers  
3. Agenda   •  Web  Components   •  CreaNng  Elements  in  Polymer   •  Styling  Elements   •  Challenges   •  Single  Page  ApplicaNon  
4. Web  Components   Custom  Elements   HTML  Imports   HTML  Templates   Shadow  DOM  
5. Project  Polymer   •  Built  on  top  of  set  of  powerful  web  primiNves   •  Framework  –  for  complex  custom  elements   •  Library  –  polyfill  for  older  browsers   •  Rich  predefined  elements  –  core  and  paper  
7. CreaNng  Custom  Elements   var  XFoo  =  document.registerElement('x-­‐foo');   var  xFoo  =  new  XFoo();   xFoo.addEventListener('click',  function(e)  {      alert('Thanks!');   });   xFoo.innerHTML  =  “I  am  Custom  Element”   document.body.appendChild(xFoo);   <x-­‐foo>I  am  Custom  Element</x-­‐foo>  
8. Output  DOM  
9. CreaNng  Polymer  Elements   <link  rel="import"  href="/bower_components/polymer/polymer.html">     <polymer-­‐element  name="my-­‐element"  noscript>      <template>          <span>Hello  from  <b>my-­‐element</b>.  This  is  my  Shadow  DOM.</span>      </template>   </polymer-­‐element>   •  Custom  element  to  create  custom  element    
10. Using  Polymer  Elements   <head>    <script  src="bower_components/webcomponentsjs/              webcomponents.js"></script>    <link  rel="import"  href="/elements/my-­‐element.html">   </head>   <body>    <my-­‐element></my-­‐element>   </body>   •  webcomponents.js  –  provides  polyfill    
11. Output  DOM   •  Shadow  Root???    
12. CreaNng  Custom  Elements  with  Shadow  DOM   <script>    var  XFooProto  =  Object.create(HTMLElement.prototype);      XFooProto.createdCallback  =  function()  {      var  shadow  =  this.createShadowRoot();      shadow.innerHTML  =  "<b>I'm  in  the  element's  Shadow  DOM!</b>"  +                                                        "<content></content>";    };      var  XFoo  =  document.registerElement('x-­‐foo-­‐shadowdom',                        {prototype:  XFooProto});   </script>     <x-­‐foo-­‐shadowdom><p>This  is  my  content</p></x-­‐foo-­‐shadowdom>  
13. Output  DOM  
14. Styling  Custom  Elements   <style>    x-­‐foo  b  {      display:  inline-­‐block;      border-­‐radius:  50%;    }   </style>     <x-­‐foo><b>I  am  a  Custom  Element<b></x-­‐foo>   •  Selectors  –  keep  it  simple     •  Default  –  display:  inline  
15. Styling  Polymer  Elements   <polymer-­‐element  name="my-­‐element"  noscript>      <template>          <style  media="screen”  type="text/css”>              b  {                      color:  blue;              }          </style>          <span>Hello  from  <b>my-­‐element</b>.  This  is  my  Shadow  DOM.</span>          <content></content>      </template>   </polymer-­‐element>     •  Inside  shadow  DOM..!!    
16. Styling  Elements  from  outside   •  ::shadow   •  /deep/     <link  rel="stylesheet"    href="main.css"  shim-­‐shadowdom>  
17. Challenges   •  Performance   •  OpNmizaNon   •  Debugging   •  And  obviously  IE  
18. Performance   •  Network  request  per  import   •  Browser  Support   •  Polyfills  –  on  older  browsers   •  ajaxify  app  
19. Vulcanize   •  ConcatenaNng  web  components   •  Inline  JavaScript  –  CSP?    npm  install  –g  vulcanize        vulcanize  –o  build.html  index.html      vulcanize  –o  build.html  index.html  –-­‐inline      vulcanize  –o  build.html  index.html  -­‐-­‐csp  
20. Imports  block  rendering   <link  rel="import"  href="/elements/my-­‐element.html"  async>   •  Similar  to  <link  rel=“stylesheet”>   •  To  minimize  FOUC     •  :unresolved  –  hides  the  element   •  :resolved  -­‐  fades-­‐in  the  element  
21. Downside   •  Not  ProducNon  ready   •  Combined  Logic  and  Structure   •  Shadow  DOM  polyfills  –  almost  10  Nmes   slower   •  TesNng  –  Mocha  and  Chai  
22. <thank-­‐you/>