$30 off During Our Annual Pro Sale. View Details »

The Web Component Ecosystem

The Web Component Ecosystem

Web Components give us the power to invent our own HTML elements, designed to be future-facing, interoperable, and beautiful on the multi-device web. With tools like Polymer and X-Tag, we can start taking advantage of this new technology today. Let’s take a look at some of the amazing elements that are already being produced, and explore how you can start leveraging them in your own projects.

Rob Dodson

August 25, 2014
Tweet

More Decks by Rob Dodson

Other Decks in Programming

Transcript

  1. The Web Component Ecosystem
    A wonderful world of Web Components
    Rob Dodson
    Brazil - Aug, 2014

    View Slide

  2. +RobDodson
    @rob_dodson

    View Slide

  3. Agenda
    Web Components: Overview
    The ecosystem
    Join the revolution

    View Slide

  4. Web Components: Overview

    View Slide

  5. What problems are we solving?

    View Slide

  6. View Slide


  7. !


    View Slide

  8. http://drbl.in/esYL
    Building UI tabs
    should be easy!

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide


  14. KNOWLEDGE
    HISTORY
    FOOD

    Less markup. Less JS. Less confusion.
    Web Components

    View Slide

  15. How do they work?

    View Slide

  16. 36
    Browser support
    Summer 2014

    View Slide

  17. View Slide

  18. Layers ·
    sugaring
    ·
    polymer.js: declarative, data-binding,
    ·
    property observation, gestures, …)
    ·
    components
    ·
    core elements, paper elements
    ·
    polyfills
    ·
    <br/>

    View Slide

  19. Browser support
    Summer 2014 (with Polymer)

    View Slide

  20. Browser support
    Summer 2014 (with Polymer)

    View Slide

  21. Custom Elements
    define new HTML/DOM elements

    View Slide

  22. View Slide


  23. Tab 1
    Tab 2
    Tab 3

    declarative, readable
    meaningful HTML
    common way to extend → reusable
    Custom Elements
    define new HTML

    View Slide

  24. declarative, readable
    meaningful HTML
    common way to extend → reusable
    Custom Elements
    define new HTML
    var tabs = document.querySelector('paper-tabs');
    tabs.addEventListener('core-activate', function() {
    console.log(this.selected);
    });

    View Slide

  25. document.registerElement(‘paper-tabs’, {
    prototype: Object.create(HTMLElement.prototype)
    });
    vanilla
    polymer



    usage …
    // document.createElement(‘paper-tabs’);

    View Slide

  26. document.registerElement(‘paper-tabs’, {
    prototype: Object.create(HTMLElement.prototype)
    });
    vanilla
    polymer



    usage …
    // document.createElement(‘paper-tabs’);

    View Slide

  27. document.registerElement(‘paper-tabs’, {
    prototype: Object.create(HTMLElement.prototype)
    });
    vanilla
    polymer



    usage …
    // document.createElement(‘paper-tabs’);

    View Slide

  28. document.registerElement(‘paper-tabs’, {
    prototype: Object.create(HTMLElement.prototype)
    });
    vanilla
    polymer



    usage …
    // document.createElement(‘paper-tabs’);

    View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. Templates
    native client-side templating

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. Shadow DOM
    DOM/CSS scoping

    View Slide


  39. View Slide


  40. Actually Shadow DOM

    View Slide


  41. View Slide

  42. var shadow = el.createShadowRoot();
    shadow.innerHTML = “h2 { color: red; }” +

    “I’m a profile-card”;
    vanilla
    polymer



    I’m a profile-card


    View Slide

  43. var shadow = el.createShadowRoot();
    shadow.innerHTML = “h2 { color: red; }” +

    “I’m a profile-card”;
    vanilla
    polymer



    I’m a profile-card


    View Slide

  44. var shadow = el.createShadowRoot();
    shadow.innerHTML = “h2 { color: red; }” +

    “I’m a profile-card”;
    vanilla
    polymer



    I’m a profile-card


    View Slide

  45. html5rocks.com/en/tutorials/webcomponents/shadowdom

    View Slide

  46. HTML Imports
    loading web components

    View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. Custom Elements
    Create new HTML elements and extend existing ones
    Templates
    Native templating in the browser
    Shadow DOM
    Scoped CSS!!! + encapsulated markup
    HTML Imports
    Load custom element definitions and resources

    View Slide

  54. The ecosystem

    View Slide

  55. Elements

    View Slide


  56. !


    View Slide


  57. !


    View Slide

  58. What if we designed HTML
    for the mobile web?

    View Slide

  59. View Slide





  60. View Slide

  61. http://bit.ly/1jkTo5c
    core-elements
    Image:

    View Slide







  62. Visual






    Non-visual
    And many more…
    Image: http://bit.ly/1kuX889,

    View Slide


  63. A basic container for controls
    like tabs or buttons
    MY APP

    View Slide

  64. href=“core-toolbar.html”>

    A basic container for controls
    like tabs or buttons
    MY APP

    View Slide


  65. MY APP

    href=“core-toolbar.html”>

    A basic container for controls
    like tabs or buttons
    MY APP

    View Slide




  66. MY APP

    href=“core-toolbar.html”>

    A basic container for controls
    like tabs or buttons
    MY APP

    View Slide

  67. A simple container with a header
    section and a content section





    MY APP



    MY APP

    View Slide

  68. A simple container with a header
    section and a content section




    MY APP



    MY APP

    View Slide

  69. A simple container with a header
    section and a content section




    MY APP



    MY APP

    View Slide

  70. A simple container with a header
    section and a content section




    MY APP



    MY APP

    View Slide





  71. MY APP



    Toolbar will scroll with the page

    View Slide

  72. A responsive container that
    combines a left- or right-side drawer
    panel and a main content area.


    Drawer panel...
    Main panel...

    View Slide


  73. Drawer panel...
    Main panel...

    A responsive container that
    combines a left- or right-side drawer
    panel and a main content area.

    View Slide


  74. Drawer panel...
    Main panel...

    A responsive container that
    combines a left- or right-side drawer
    panel and a main content area.

    View Slide

  75. View Slide

  76. Material design

    View Slide

  77. Preview @ Google I/O

    View Slide

  78. paper-elements

    View Slide

  79. label="Type only numbers... (floating)"
    validate="^[0-9]*$"
    error="Input is not a number!">

    View Slide


  80. View Slide





  81. A reactive ink effect for indicating touch
    and mouse actions

    View Slide





  82. A dynamic shadow for conveying
    z-depth and spatial relationships

    View Slide

  83. polymer-project.org/apps/topeka/

    View Slide

  84. View Slide

  85. polymer-project.org

    View Slide

  86. We’re not alone

    View Slide

  87. Mozilla Brick

    View Slide

  88. brick-appbar
    brick-deck
    brick-tabbar

    View Slide

  89. core-icon
    x-instagram
    (not shown)

    View Slide

  90. Web Components
    can work together

    View Slide

  91. Not just browser makers

    View Slide

  92. …?

    View Slide


  93. github.com/mvaldetaro/twbs-grid

    .bs-col-md-8
    .bs-col-md-4

    View Slide


  94. github.com/erikringsmuth/app-router
    my-site.com/order/:id



    !



    View Slide


  95. github.com/addyosmani/page-er
    >">
    !
    var pager = document.querySelector("page-er");
    document.addEventListener("polymer-ready", function() {
    pager.data = model.items;
    });

    View Slide


  96. github.com/garstasio/ajax-form
    Full Name
    Country City
    Join newsletter


    Full Name




    View Slide

  97. Apps

    View Slide

  98. polymer-project.org

    View Slide

  99. chromestatus.com

    View Slide

  100. polymer-project.org/tools/designer/

    View Slide

  101. View Slide

  102. View Slide

  103. APIs

    View Slide

  104. APIs (as elements)

    View Slide

  105. I want to add a marker
    to a Google map.

    View Slide

  106. <br/>#map {<br/>height: 400px;<br/>}<br/>
    !

    !
    <br/>
    <br/>var marker = null;<br/>function getCurrentLocation(callback) {<br/>navigator.geolocation.watchPosition(callback);<br/>}<br/>!<br/>function addMarker(opts, info) {<br/>var marker = new google.maps.Marker(opts);<br/>!<br/>var infoWindow = new google.maps.InfoWindow({content: info});<br/>!<br/>google.maps.event.addListener(marker, 'click', function() {<br/>infoWindow.open(opts.map, marker);<br/>});<br/>!<br/>return marker;<br/>}<br/>!<br/>function mapReady() {<br/>var container = document.querySelector('#map');<br/>var map = new google.maps.Map(container, {<br/>zoom: 14, disableDefaultUI: true<br/>});<br/>getCurrentLocation(function(pos) {<br/>var current = new google.maps.LatLng(pos.coords.latitude,<br/>pos.coords.longitude);<br/>map.setCenter(current);<br/>!<br/>// Re-position marker or create new one.<br/>if (marker) {<br/>marker.setPosition(map.getCenter());<br/>} else {<br/>marker = addMarker({<br/>position: current, map: map, title: 'Your location'<br/>}, '<b>Your location</b>');<br/>}<br/>});<br/>}<br/>
    So much code for
    one map marker!

    View Slide

  107. View Slide

  108. View Slide

  109. View Slide

  110. View Slide

  111. View Slide

  112. View Slide

  113. View Slide

  114. googlewebcomponents.github.io
    github.com/GoogleWebComponents

    View Slide

  115. youtube.com/watch?v=eORqFaf_QzM

    View Slide

  116. github.com/ForceDotComLabs/mobile-ui-elements
    github.com/ForceDotComLabs

    View Slide

  117. View Slide

  118. Join the revolution

    View Slide

  119. Learn

    View Slide

  120. View Slide

  121. polymer-project.org

    View Slide

  122. Build

    View Slide

  123. YO ELEMENT
    npm install -g generator-element

    View Slide

  124. YO POLYMER
    npm install -g generator-polymer

    View Slide

  125. Start with
    github.com/PolymerLabs/seed-element

    View Slide

  126. View Slide

  127. youtube.com/watch?v=2toYLLcoY14

    View Slide

  128. Share!

    View Slide

  129. customelements.io

    View Slide

  130. {
    "name": "my-element",
    "version": "0.0.0",
    "description": "My awesome Custom Element",
    "license": "MIT",
    "keywords": [
    "web-components"
    ],
    "ignore": [
    "**/.*",
    "node_modules",
    "bower_components"
    ]
    }
    bower.json

    View Slide

  131. EXPLORE

    View Slide


  132. +RobDodson
    @rob_dodson

    View Slide