Multi-device apps with Web Components

Building a multi-device app is extremely challenging, unless you're an expert developer. It's time for the web to get its own collection of fast, beautiful, and responsive by default components. In this talk, we'll look at how you can use readily available Web Components to quickly build apps that look gorgeous on phones, tablets, and desktops. With these new tools we can greatly simplify the process of supporting multiple screen sizes, while also keeping our code sane and readable.

Transcript

1. with Web Components Multi-device apps @polymer @rob_dodson #jqcon
2. +RobDodson @rob_dodson
3. Agenda Web Components: Overview The ecosystem Join the revolution
4. Web Components
5. What problems are we solving?
6. @polymer @rob_dodson #jqcon
7. <h1> ! <ul> <p>
8. http://drbl.in/esYL Building UI tabs should be easy!
9. @polymer @rob_dodson #jqcon
10. @polymer @rob_dodson #jqcon
11. @polymer @rob_dodson #jqcon
12. @polymer @rob_dodson #jqcon
13. @polymer @rob_dodson #jqcon
14. <paper-tabs> <paper-tab>KNOWLEDGE</paper-tab> <paper-tab>HISTORY</paper-tab> <paper-tab>FOOD</paper-tab> </paper-tabs> Less code. Less confusion. Web Components
15. What are Web Components?
16. Custom Elements define new HTML/DOM elements
18. <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 Custom Elements define new HTML @polymer @rob_dodson #jqcon
19. declarative, readable meaningful HTML common way to extend Custom Elements define new HTML var tabs = document.querySelector('paper-tabs'); tabs.addEventListener('core-activate', function() { console.log(this.selected); }); @polymer @rob_dodson #jqcon
20. Templates native client-side templating
21. @polymer @rob_dodson #jqcon
22. Shadow DOM DOM/CSS scoping
23. <video src=“foo.webm” controls></video> @polymer @rob_dodson #jqcon
24. <video src=“foo.webm” controls></video> Actually Shadow DOM @polymer @rob_dodson #jqcon
25. <video src=“foo.webm” controls></video>
26. HTML Imports loading web components
27. @polymer @rob_dodson #jqcon
28. @polymer @rob_dodson #jqcon
29. Vulcanize $ vulcanize -o build.html index.html --csp --strip npm install -g vulcanize
30. grunt-vulcanize
31. gulp-vulcanize
32. 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
33. FIND
34. IMPORT
35. USE
36. USE
37. 36 Browser support Summer 2014 @polymer @rob_dodson #jqcon
38. @polymer @rob_dodson #jqcon
39. Polyfills Web Components with platform.js
40. Adds syntactic “sugar” with polymer.js
41. Browser support Summer 2014 (with Polymer)
42. Browser support Summer 2014 (with Polymer)
43. Sugaring: Custom Elements
44. vanilla polymer usage document.registerElement(‘paper-tabs’, { prototype: Object.create( HTMLElement.prototype ) }); <polymer-element name=“paper-tabs”> … </polymer-element> <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’);
45. vanilla polymer usage document.registerElement(‘paper-tabs’, { prototype: Object.create( HTMLElement.prototype ) }); <polymer-element name=“paper-tabs”> … </polymer-element> <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’);
46. vanilla polymer usage document.registerElement(‘paper-tabs’, { prototype: Object.create( HTMLElement.prototype ) }); <polymer-element name=“paper-tabs”> … </polymer-element> <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’);
47. vanilla polymer usage document.registerElement(‘paper-tabs’, { prototype: Object.create( HTMLElement.prototype ) }); <polymer-element name=“paper-tabs”> … </polymer-element> <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’);
48. Sugaring: Templates
52. Sugaring: Shadow DOM
53. var shadow = el.createShadowRoot(); shadow.innerHTML = “<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>
54. var shadow = el.createShadowRoot(); shadow.innerHTML = “<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>
55. var shadow = el.createShadowRoot(); shadow.innerHTML = “<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>
56. Components @polymer @rob_dodson #jqcon
57. <h1> ! <ul> <p>
58. <animated-pages> ! <menu-button> <page-scaffold>
59. 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. MY APP <core-toolbar> A container for controls like tabs or buttons @polymer @rob_dodson #jqcon
63. MY APP <core-toolbar> A container for controls like tabs or buttons <link rel=“import” href=“core-toolbar.html”> @polymer @rob_dodson #jqcon
64. MY APP <core-toolbar> A container for controls like tabs or buttons <core-toolbar> <div>MY APP</div> </core-toolbar> <link rel=“import” href=“core-toolbar.html”> @polymer @rob_dodson #jqcon
65. <core-toolbar> MY APP A container for controls like tabs or buttons <core-toolbar> <core-icon-button icon=“menu”> </core-icon-button> <div>MY APP</div> </core-toolbar> <link rel=“import” href=“core-toolbar.html”> @polymer @rob_dodson #jqcon
66. 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 @polymer @rob_dodson #jqcon
67. MY APP <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> A simple container with a header section and a content section <core-header-panel> @polymer @rob_dodson #jqcon
68. MY APP <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> A simple container with a header section and a content section <core-header-panel> @polymer @rob_dodson #jqcon
69. MY APP <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> A simple container with a header section and a content section <core-header-panel> @polymer @rob_dodson #jqcon
70. 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> @polymer @rob_dodson #jqcon
71. 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> @polymer @rob_dodson #jqcon
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> @polymer @rob_dodson #jqcon
74. paper-elements
75. Polymer Paper Elements Buttons Inputs Tabs Cards Panels …
76. polymer-project.org/apps/topeka/
78. polymer-project.org
79. We’re not alone
80. Mozilla Brick
81. brick-appbar brick-deck brick-tabbar
82. core-icon x-instagram (not shown)
83. Web Components can work together
84. Not just browser makers
86. github.com/tjvantoll/ui-web-components
87. <ui-progressbar value=“30” max=“100"> </ui-progressbar>
88. <ui-dialog title="Yo, dude"> Dig this sweet, sweet, dialog </ui-dialog>
89. <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>
90. <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() {
91. <ajax-form> github.com/garstasio/ajax-form Full Name Country City Join newsletter <form is="ajax-form" action="my/action"> <label>Full Name <input type="text" name=“full_name"> </label> … </form> √
92. Apps
93. polymer-project.org
94. chromestatus.com
95. polymer-project.org/tools/designer/
98. github.com/ForceDotComLabs/mobile-ui-elements github.com/ForceDotComLabs
99. APIs
100. APIs (as elements)
101. I want to add a marker to a Google map.
102. <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!
109. googlewebcomponents.github.io github.com/GoogleWebComponents
110. Join the revolution
111. Learn
113. polymer-project.org
114. Build
115. Start with <seed-element> github.com/PolymerLabs/seed-element
117. YO POLYMER npm install -g generator-polymer
118. Share!
119. customelements.io
120. { "name": "my-element", "version": "0.0.0", "description": "My awesome Custom Element", "license": "MIT", "keywords": [ "web-components" ], "ignore": [ "**/.*", "node_modules", "bower_components" ] } bower.json
121. EXPLORE
122. <thank-you> +RobDodson @rob_dodson