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.

95c3a3b33ea51545229c625bef42e343?s=128

Rob Dodson

August 25, 2014
Tweet

Transcript

  1. The Web Component Ecosystem A wonderful world of Web Components

    Rob Dodson Brazil - Aug, 2014
  2. +RobDodson @rob_dodson

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

  4. Web Components: Overview

  5. What problems are we solving?

  6. None
  7. <h1> ! <ul> <p>

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

  9. None
  10. None
  11. None
  12. None
  13. None
  14. <paper-tabs> <paper-tab>KNOWLEDGE</paper-tab> <paper-tab>HISTORY</paper-tab> <paper-tab>FOOD</paper-tab> </paper-tabs> Less markup. Less JS. Less

    confusion. Web Components
  15. How do they work?

  16. 36 Browser support Summer 2014

  17. None
  18. Layers · sugaring · polymer.js: declarative, data-binding, · property observation,

    gestures, …) · components · core elements, paper elements · polyfills · <script src=“platform.js”>
  19. Browser support Summer 2014 (with Polymer)

  20. Browser support Summer 2014 (with Polymer)

  21. Custom Elements define new HTML/DOM elements

  22. None
  23. <paper-tabs selected=“1”> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs> declarative,

    readable meaningful HTML common way to extend → reusable Custom Elements define new HTML
  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); });
  25. document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype) }); vanilla polymer <polymer-element name=“paper-tabs”> …

    </polymer-element> usage <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’);
  26. document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype) }); vanilla polymer <polymer-element name=“paper-tabs”> …

    </polymer-element> usage <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’);
  27. document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype) }); vanilla polymer <polymer-element name=“paper-tabs”> …

    </polymer-element> usage <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’);
  28. document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype) }); vanilla polymer <polymer-element name=“paper-tabs”> …

    </polymer-element> usage <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’);
  29. None
  30. None
  31. None
  32. None
  33. Templates native client-side templating

  34. None
  35. None
  36. None
  37. None
  38. Shadow DOM DOM/CSS scoping

  39. <video src=“foo.webm” controls></video>

  40. <video src=“foo.webm” controls></video> Actually Shadow DOM

  41. <video src=“foo.webm” controls></video>

  42. var shadow = el.createShadowRoot(); shadow.innerHTML = “<style>h2 { color: red;

    }</style>” +
 “<h2>I’m a profile-card</h2>”; vanilla polymer <polymer-element name=“profile-card” noscript> <template> <link rel=“stylesheet” href=“styles.css”> <h2>I’m a profile-card</h2> </template> </polymer-element>
  43. var shadow = el.createShadowRoot(); shadow.innerHTML = “<style>h2 { color: red;

    }</style>” +
 “<h2>I’m a profile-card</h2>”; vanilla polymer <polymer-element name=“profile-card” noscript> <template> <link rel=“stylesheet” href=“styles.css”> <h2>I’m a profile-card</h2> </template> </polymer-element>
  44. var shadow = el.createShadowRoot(); shadow.innerHTML = “<style>h2 { color: red;

    }</style>” +
 “<h2>I’m a profile-card</h2>”; vanilla polymer <polymer-element name=“profile-card” noscript> <template> <link rel=“stylesheet” href=“styles.css”> <h2>I’m a profile-card</h2> </template> </polymer-element>
  45. html5rocks.com/en/tutorials/webcomponents/shadowdom

  46. HTML Imports loading web components

  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  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
  54. The ecosystem

  55. Elements

  56. <h1> ! <ul> <p>

  57. <animated-pages> ! <menu-button> <page-scaffold>

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

  59. None
  60. <core-field> <core-icon> <paper-fab> <core-drawer-panel>

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

  62. <core-toolbar> <core-header-panel> <core-drawer-panel> <core-menu> <core-icon> <core-overlay> Visual <core-ajax> <core-localstorage> <core-range>

    <core-shared-lib> <core-media-query> <core-iconset> Non-visual And many more… Image: http://bit.ly/1kuX889,
  63. <core-toolbar> A basic container for controls like tabs or buttons

    MY APP
  64. <link rel=“import” href=“core-toolbar.html”> <core-toolbar> A basic container for controls like

    tabs or buttons MY APP
  65. <core-toolbar> <div>MY APP</div> </core-toolbar> <link rel=“import” href=“core-toolbar.html”> <core-toolbar> A basic

    container for controls like tabs or buttons MY APP
  66. <core-toolbar> <core-icon-button icon=“menu”> </core-icon-button> <div>MY APP</div> </core-toolbar> <link rel=“import” href=“core-toolbar.html”>

    <core-toolbar> A basic container for controls like tabs or buttons MY APP
  67. A simple container with a header section and a content

    section <core-header-panel> <core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel> MY APP
  68. A simple container with a header section and a content

    section <core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel> <core-header-panel> MY APP
  69. A simple container with a header section and a content

    section <core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel> <core-header-panel> MY APP
  70. A simple container with a header section and a content

    section <core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel> <core-header-panel> MY APP
  71. <core-header-panel mode=“scroll” flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar>

    <div class=“content”>…</div> </core-header-panel> Toolbar will scroll with the page <core-header-panel>
  72. A responsive container that combines a left- or right-side drawer

    panel and a main content area. <core-drawer-panel> <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </core-drawer-panel>
  73. <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel...

    </div> </core-drawer-panel> A responsive container that combines a left- or right-side drawer panel and a main content area. <core-drawer-panel>
  74. <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel...

    </div> </core-drawer-panel> A responsive container that combines a left- or right-side drawer panel and a main content area. <core-drawer-panel>
  75. None
  76. Material design

  77. Preview @ Google I/O

  78. paper-elements

  79. <paper-input floatinglabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not

    a number!"> </paper-input>
  80. <paper-checkbox></paper-checkbox>

  81. <div class=“card”> <img src=“science.svg”> <paper-ripple fit></paper-ripple> </div> A reactive ink

    effect for indicating touch and mouse actions <paper-ripple>
  82. <div class=“card”> <paper-shadow z=“5” animated> </paper-shadow> </div> A dynamic shadow

    for conveying z-depth and spatial relationships <paper-shadow>
  83. polymer-project.org/apps/topeka/

  84. None
  85. polymer-project.org

  86. We’re not alone

  87. Mozilla Brick

  88. brick-appbar brick-deck brick-tabbar

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

  90. Web Components can work together

  91. Not just browser makers

  92. <bootstrap-elements>…?

  93. <twbs-grid> github.com/mvaldetaro/twbs-grid <bs-row> <bs-col md=“8">.bs-col-md-8</bs-col> <bs-col md="4">.bs-col-md-4</bs-col> </bs-row>

  94. <app-router> github.com/erikringsmuth/app-router my-site.com/order/:id <app-router> <!-- matches an exact path -->

    <app-route path="/home" import="/pages/home-page.html"></app-route> ! <!-- matches using a path variable --> <app-route path="/order/:id" import=“/pages/order-page.html"></app-route> </app-router>
  95. <page-er> github.com/addyosmani/page-er <page-er perpage="5" previous=“<< Previous" next=“Next >>"></page-er> ! var

    pager = document.querySelector("page-er"); document.addEventListener("polymer-ready", function() { pager.data = model.items; });
  96. <ajax-form> github.com/garstasio/ajax-form Full Name Country City Join newsletter √ <form

    is="ajax-form" action="my/form/handler"> <label>Full Name <input type="text" name=“full_name"> </label> … </form>
  97. Apps

  98. polymer-project.org

  99. chromestatus.com

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

  101. None
  102. None
  103. APIs

  104. APIs (as elements)

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

  106. <style> #map { height: 400px; } </style> ! <div id="map"></div>

    ! <script src=“http://maps.googleapis.com/maps/api/js?callback=mapReady"> </script> <script> var marker = null; function getCurrentLocation(callback) { navigator.geolocation.watchPosition(callback); } ! function addMarker(opts, info) { var marker = new google.maps.Marker(opts); ! var infoWindow = new google.maps.InfoWindow({content: info}); ! google.maps.event.addListener(marker, 'click', function() { infoWindow.open(opts.map, marker); }); ! return marker; } ! function mapReady() { var container = document.querySelector('#map'); var map = new google.maps.Map(container, { zoom: 14, disableDefaultUI: true }); getCurrentLocation(function(pos) { var current = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); map.setCenter(current); ! // Re-position marker or create new one. if (marker) { marker.setPosition(map.getCenter()); } else { marker = addMarker({ position: current, map: map, title: 'Your location' }, '<b>Your location</b>'); } }); } </script> So much code for one map marker!
  107. None
  108. None
  109. None
  110. None
  111. None
  112. None
  113. None
  114. googlewebcomponents.github.io github.com/GoogleWebComponents

  115. youtube.com/watch?v=eORqFaf_QzM

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

  117. None
  118. Join the revolution

  119. Learn

  120. None
  121. polymer-project.org

  122. Build

  123. YO ELEMENT npm install -g generator-element

  124. YO POLYMER npm install -g generator-polymer

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

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

  128. Share!

  129. customelements.io

  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
  131. EXPLORE

  132. <thank-you> +RobDodson @rob_dodson