Web Components

Web Components are like Lego bricks. Easy to assemble and every piece simply fits together. But there is even more to it. Being able to create your own HTML-Tags with encapsulated style & logic changes the way you think about structuring your web applications. Get a sneak peek on how to develop scalable & maintainable applications in the future.

Transcript

1. Web Components
   

   View Slide

2. Who is this guy?
   nikgraf
   www.nikgraf.com
   nik@blossom.io
   Web Components
   

   View Slide

3. How to Use
   
   
   
   
   
   
   
   
   index.html
   Web Components
   

   View Slide

4. Web Components
   

   View Slide

5. How to Use
   
   
   
   
   
   location-y=”52.45077881417044”
   zoom=”5”>
   
   
   
   index.html
   Web Components
   

   View Slide

6. Web Components
   

   View Slide

7. Web Component
   Web Components
   

   View Slide

8. Why?
   Component
   Component
   Component
   ● Encapsulation
   ● Reusability
   ● Composability
   Web Components
   

   View Slide

9. Easier and Faster Prototyping
   
   Welcome to Berlin
   location-y=”52.45077881417044”
   zoom=”5”>
   
   
   Web Components
   

   View Slide

10. Web Component
    ● HTML Templates inert chunks of clonable DOM
    ● Custom Elements create new HTML elements
    ● Shadow DOM encapsulation & boundaries inside of DOM
    ● HTML Imports import html documents
    Web Components
    

    View Slide

11. Client Side Templating
    <br/><span class=”hour”></span>:<br/><span class=”minute”></span><br/>
    HTML
    encourages run-time string parsing (.innerHTML)
    user-supplied data → Cross-site scripting
    Web Components
    

    View Slide

12. HTML Templates
    
    :
    
    
    <br/>var template = document.querySelector("#clock-tmpl");<br/>// comment is a DocumentFragment<br/>var comment = template.content.cloneNode(true);<br/>
    Web Components
    HTML
    

    View Slide

13. HTML Templates
    Web Components
    Working directly with the DOM
    no runtime script parsing, smaller XSS attack vector
    Hidden from document
    cannot traverse into its DOM via JavaScript
    Content gets parsed, not rendered
    tags aren’t executed, images aren't loaded,<br/>media doesn't play, etc.<br/>

    View Slide

14. “
    ”
    Shadow DOM
    Web Components
    Shadow DOM gives us markup encapsulation,
    style boundaries, and exposes (to web
    developers) the same mechanics browsers
    vendors have been using to implement their
    internal UI.
    Eric Bidelman
    

    View Slide

15. Shadow DOM
    Web Components
    Let’s dig deeper
    

    View Slide

16. Web Components
    

    View Slide

17. Shadow DOM
    
    <br/>var host = document.querySelector('#clock');<br/>// use webkitCreateShadowRoot for now<br/>var shadowRoot = host.createShadowRoot();<br/>shadowRoot.innerHTML = "<span>14</span>:<br/><span>30</span>";<br/>
    Web Components
    HTML
    

    View Slide

18. Shadow DOM
    Black header
    <br/>var host = document.createElement('div');<br/>var shadowRoot = host.createShadowRoot();<br/>var content = "<style>h2 {color: red}</style>";<br/>content += "<h2>Red header</h2>";<br/>shadowRoot.innerHTML = content;<br/>document.body.appendChild(host);<br/>
    Black header
    Red header
    Web Components
    HTML
    

    View Slide

19. Shadow DOM
    shadowRoot.resetStyleInheritance = false;
    shadowRoot.applyAuthorStyles = false;
    @host {
    *:hover { color: red };
    }
    
    
    #clock::x-hour { color: blue; }
    Web Components
    HTML
    Component CSS
    clock.html Template
    index.html
    

    View Slide

20. Custom Elements
    var ClockPrototype = Object.create(HTMLElement.prototype);
    ClockPrototype.createdCallback = function() {
    this.impl.textContent = "14:20";
    };
    var Clock = document.register('custom-clock', {
    prototype: ClockPrototype
    });
    var clock = new Clock();
    // adds 14:20 to the DOM
    document.body.appendChild(clock);
    Web Components
    tick_tock_clock.html
    

    View Slide

21. 
    <br/>var link = document.querySelector('link[rel=import]');<br/>var content = link.import.querySelector('#clock');<br/>
    HTML Imports
    Web Components
    
    14:
    30
    
    clock.html
    index.html
    

    View Slide

22. Web Component
    Web Components
    
    14:
    30
    
    <br/>var ClockProto = Object.create(HTMLElement.prototype);<br/>ClockProto.createdCallback = function() {<br/>var template = document.querySelector('#clock-tmpl');<br/>var shadowRoot = this.createShadowRoot();<br/>var clone = template.content.cloneNode(true);<br/>shadowRoot.appendChild(clone);<br/>};<br/>document.register('my-clock', {prototype: ClockProto});<br/>
    
    
    clock.html
    index.html
    

    View Slide

23. Use Web Components today
    Web Components
    

    View Slide

24. Web Component (Polymer.js)
    Web Components
    
    
    14:
    30
    
    Polymer('my-clock');
    
    
    
    clock.html
    index.html
    

    View Slide

25. Think Big
    Web Components
    
    

    View Slide

26. Thanks for listening!
    nikgraf
    www.nikgraf.com
    nik@blossom.io
    Web Components
    

    View Slide

27. Further Reading
    Web Components
    Web Components
    http://www.youtube.com/watch?v=fqULJBBEVQE
    https://dvcs.w3.org/hg/webcomponents/raw-file/57f8cfc4a7dc/explainer/index.html
    HTML Templates
    http://www.html5rocks.com/en/tutorials/webcomponents/template/
    https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html
    HTML Imports
    http://robdodson.me/blog/2013/08/20/exploring-html-imports/
    https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/imports/index.html
    

    View Slide

28. Further Reading
    Web Components
    Shadow DOM
    http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
    http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
    http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/
    http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
    https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html
    Custom Elements
    http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
    https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html
    Resources
    Web Components https://plus.google.com/103330502635338602217/posts
    Lego Bricks http://commons.wikimedia.org/wiki/File:2_duplo_lego_bricks.jpg
    Polymer Architecture http://www.polymer-project.org/
    Icons http://pictos.cc/
    

    View Slide