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

Web Components

Nikolaus Graf
September 12, 2013

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.

Nikolaus Graf

September 12, 2013
Tweet

More Decks by Nikolaus Graf

Other Decks in Programming

Transcript

  1. Web Components

    View Slide

  2. Who is this guy?
    nikgraf
    www.nikgraf.com
    [email protected]
    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
    [email protected]
    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