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.

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?
7. <h1> ! <ul> <p>
8. http://drbl.in/esYL Building UI tabs should be easy!
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
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
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’);
33. Templates native client-side templating
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
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?
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>
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/
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/
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!
114. googlewebcomponents.github.io github.com/GoogleWebComponents
115. youtube.com/watch?v=eORqFaf_QzM
116. github.com/ForceDotComLabs/mobile-ui-elements github.com/ForceDotComLabs
118. Join the revolution
119. Learn
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
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