Web Components with Polymer

Vinay Raghu / @rvinay88  / viii.in

Vinay Raghu



  • viii.in | @rvinay88 
  • UI / UX developer
  • Consulting and coaching
  • Meetup enthusiast
  • Open source contributor
  • Writer

    • What we are going to see?


    1. A quick intro to web components 
    2. Creating our own web component with Polymer

    Best new web technology

    https://thenetawards.com/ 

    Declarative and Compose-able

    <select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

    Declarative and Compose-able

     <select name='options'>
  <option value='option-1' disabled>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

    Declarative and Compose-able

    <select name='options' multiple>
  <option value='option-1' disabled>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

    Web Components



    1. Shadow DOM
    2. HTML imports
    3. Templates
    4. Custom elements

    Shadow DOM


    Think of Shadow DOM as a better way to do iframes

    Technology that browsers use


    Encapsulate styles and scripts


    HTML imports


    There is no good way to package HTML documents
    <script src="../platform/platform.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="import" href="new-widget.html">

    Using Bootstrap Tabs

    1. Copy markup
    2. Include script
    3. Include CSS
    4. Instantiate tabs 

    Componentize the web


    <twbs-tabs title="tab-one">Tab content</twbs-tabs>

    • Less boilerplate
    • More app-specific code

    Templates 

    Inert pieces of DOM that can be reused

    <template>
  <h3>Inert Template</h3>
  <img src="http://i.imgur.com/w2RByDr.jpg"> 
  <script>
    alert("Shots fired"); // Does not execute
  </script>
</template>

    Templates


    • No network calls until activated
    • No resources loaded
    • No scripts executed 

    Custom elements

    Templates + Shadow DOM

    • Must contain a hyphen
    • <chart-doughnut></chart-doughnut>
    • <chart-pie></chart-pie>

    Web Components


    • Combination of the before mentioned technologies
    • Experimental web features 
    • Not production ready 

    Resources 



    http://webcomponents.org/
    • Elements
    • Presentations
    • Articles
    • Best practices 

    Projects


    • Polymer project by Google
    • Brick by Mozilla
    • X-tags

    Polymer Project



    Why Web Components / Polymer?


  • Techtonic shift - or is it?
  • Fully available in Chrome stable 
    • Interoperability between react and angular

    The real reasons


  • Backed by Google
  • Material design, Android L, Web starter kit
  • 250+ Google APIs will soon implement polymer

    • Code Sample


    http://rvinay88.github.io/gmselect-element/

    Arguments


    • Its XML all over again 
    • View source is a great way to learn
    • Best practices 
    • Repeated efforts 

    Questions?

    Made with Slides.com