Polymer and modern web APIs: In production at Google scale

Video: https://www.youtube.com/watch?v=fD2As5RmM8Q

Transcript

1. 15 Polymer and modern web APIs: In production at Google scale + Matthew McNulty @mattsmcnulty +Taylor Savage @taylorthesavage +Eric Bidelman @ebidel +Addy Osmani @addyosmani
2. READY FOR PRODUCTION
3. The Polymer mission Image:
4. A different perspective Image:
5. Credit:
6. Image: Matthew McNulty (me)
8. Images of shipping containers everywhere Image:
9. What’s this got to do with web development?
10. Interoperability
14. IOWA Animating
15. Custom and Interoperable
16. LET’S WORK TOGETHER Image:
17. What is Polymer?
18. Polymer is not a framework.
19. ALL
20. 0 150 300 450 600 Time 3x FASTER
21. 0 750 1500 2250 3000 Time 4x FASTER
22. 0.5 1.0 35% LESS CODE 42kb 19kb -
23. Faster, smaller, still awesome. Image:
24. 1.0 Features
25. 1.0 Features: Shady DOM
26. 1.0 Features: Theming
27. Theming with CSS Custom Properties <style> body { --paper-tabs: { background-color: red; opacity: 0.5; }; } </style> Custom Property
28. And that’s not all…
29. Existing Frameworks Applications Web Platform Web Components Built with Polymer (or not)
30. There’s an element for that.
31. Elements Building blocks for a better web
32. http://bit.ly/1HGGNbI
33. core paper
34. core paper
38. <google-drive> <google-calendar> <google-hangout-button> <google-cloud> <google-castable-video> <google-analytics> <google-map> <google-sheets> <google-translate> <google-youtube>
42. <platinum-sw> <platinum-sw-fetch> <platinum-sw-cache> <platinum-sw-register> <platinum-push-messaging> …
46. <gold-cc-input> <gold-zip-input> <gold-cc-expiration-input> <gold-cc-cvc-input> <gold-phone-input> <gold-email-input> …
48. elements.polymer-project.org
49. There’s an element for that!
50. http://bit.ly/1JgiQb6
58. +
65. http://bit.ly/1SyS3x4
66. create a SPA - curious Polymer developer using web components? How do I setup i18n lazy load do routing <insert thing>
67. There’s an element for that! - Matthew McNulty ( 20 min ago )
68. @ebidel #polymerio @ebidel’s year
69. @ebidel #polymerio @ebidel’s year
70. @ebidel #polymerio @ebidel’s year
71. Polymer thestocks.im 0.5
72. OBSOLETE! 127,150 ++ 38,815 -- flickr.com/photos/54268887@N00/5114160903/
73. // TODO: port to 1.0
74. Google Santa Tracker 2014 santatracker.google.com
76. There’s an element for that! - Taylor Savage ( moments ago )
77. <santa-app></santa-app> github.com/google/santa-tracker-web
78. <!-- route controller --> <santa-router route="{{route}}" autoHash></santa-router> <!-- scenes elements are upgraded on demand --> <lazy-pages selected=“{{route}}” selectedItem=“{{selectedScene}}” valueattr=“route”> <!-- scenes elements inherit from base-scene.html --> <village-scene route=“village" path=“scenes/village_{{lang}}.html” hidden>… <!-- scenes can specify their own loading image & background --> <santaselfie-scene route="santaselfie" path=“scenes/santaselfie-{{lang}}.html” loadingBgColor="#83D7F5" loadingSrc=“scenes/selfie_loading.svg” hidden>… </lazy-pages> <santa-app> </santa-app> github.com/google/santa-tracker-web
79. Google I/O Web App events.google.com/io2015
80. IOWA upload.wikimedia.org/wikipedia/commons/0/09/Iowa_harvest_2009.jpg
81. @ebidel #polymerio events.google.com/io2015/
82. App manifest, Custom Elements, CSS will-change,, Service Worker, offline caching & analytics, Push Notifications, Picasa API, a11y, ES6, <meta name=“theme-color”>, app HTML Imports, install banner, Polymer, <template>, Google Sheets API , Google Sign-in 2.0, Google Drive API , WebGL, Web Audio API, Web Worker, Google Cloud Messaging, App Engine, YouTube, material design, Sass, Promises, Gulp, Go , Web Animations API, Vulcanize, Google Web Components, Web Starter Kit, Add to Homescreen, <canvas> I/O web app specs
83. +Eric Bidelman @ebidel lead +Jeff Posnick @jeffposnick service worker / notifications +Brendan Kenny @brendankenny WebGL globe +Alex Vaghin @crhym3 backend, API design +Ewa Gasperowicz @devnook page animations / router +Paul Lewis @aerotwist countdown / cheerleader +Rob Dodson @rob_dodson cheerleader #2
84. Client-side templating SPA
85. There’s an element for that! - Addy Osmani ( sometime soon )
86. <template> thestocks.im
87. <template id=“js”> I {{mood}} <b>JS</b> </template> <template id=“python”> I {{mood}} <b>Py</b> </template> <template id=“go”> I {{mood}} <b>Go</b> </template> <template> 101
88. page1.html <template id=“js”> </template> page2.html <template id=“python”> I {{mood}} <b>Py</b> </template> page3.html <template id=“go”> I {{mood}} <b>Go</b> </template> <script> var t = document.getElementById('t'); t.ref = 'js'; </script> Template’s content is ignored when `ref` is set. That content is used instead. site_layout.html I {{mood}} <b>JS</b> <template id=“t” ref=“” bind> <span>placeholder content</span> </template> <template id=“t” ref=“js” bind> </template> I {{mood}} <b>JS</b>
89. <body> <div class="masthead"> <template id=“template-masthead" ref bind> {% template "masthead" .%} </template> </div> <main> <template id=“template-content" ref bind> {% template "content" .%} </template> </main> </body> GET schedule.html Server renders markup on page load
90. <template data-target-template=“template-masthead“> <h1>Schedule</h1><!-- Schedule page markup --> </template> <template data-target-template=“template-content“> <!-- Schedule page markup —> <script> (function initPage() { var page = IOWA.Elements.Template.pages[‘about’]; if (page.hasBeenLoaded) { return; } page.load = function() { … }; page.unload = function() { … }; page.load(); page.hasBeenLoaded = true; })(); </script> </template> GET schedule.html?partial Page-specific JS is part of the page’s <template>. Pages define their own load/unload handlers and configure state.
91. Dynamic HTML Imports Router.prototype.importPage = function(page) { return new Promise(function(resolve, reject) { Polymer.Base.importHref(page + '?partial', function(e) { resolve(e.target.import); }, reject); }); }; importPage('schedule').then(doAnimations); Dynamically loads <link rel=“import” href=“schedule?partial”> containing the page templates. lazy loading Polymer 1.0 code
92. Material design Web Animations API, Promises
93. Zero latency is !(a thing) thestocks.im
94. @ebidel #polymerio events.google.com/io2015/
95. Animation flow promises, promises, promises Router.prototype.runPageTransition = function() { var startPage = this.state.start.page; var endPage = this.state.end.page; IOWA.PageAnimation.runExitAnimation() // 1. Fires ‘page-transition-start’ event. .then(runPageHandler('unload', startPage)) // 2. Run start page's unload handler. .then(importPage(endPage.pageName)) // 3. Fetch new page content. .then(runPageHandler('load', endPage)) // 4. Run destination page's load handler. .then(renderTemplates) // 5. Swap template refs to the new page's. .then(IOWA.PageAnimation.runEnterAnimation) // 6. Play entry sequence. .then(function() { runPageHandler('onPageTransitionDone', endPage) // 7. Tell page transitions are done. // Fires ‘page-transition-done’ event. }); }
96. Offline first Service Worker
97. Service Worker thestocks.im caching / offline push notifications background sync intercept requests offline Google Analytics
98. First rule of offline: Let users know about offline thestocks.im
100. 1. Gulp 2. Service Worker 3. Resources versioned in build step 4. “Cache then network” requests are cached on-demand Usable offline
101. Notifications Service Worker, Push API
102. @ebidel #polymerio
103. thestocks.im First rule of notifications: Let users know about notifications
104. Unsupported browser :( Supported browser :)
105. UX: enabling notifications 1. Bookmark a session 2. Get sign-in toast 3. Sign in 4. Enable notifications 5. Get confirmation toast
106. UX: notifications disabled 1. Bookmark a session 2. Get confirmation toast with learn more
107. Sending a notification More: chromestatus.com/features/5416033485586432 service-worker.js self.addEventListener('push', function(e) { e.waitUntil(loadToken().fetchUpdates().then(function() { var note = { title: 'Some events in My Schedule have been updated', body: 'Polymer and modern web APIs:...', icon: '/images/icon.png' }; return self.registration.showNotification(note.title, note); }); });
108. self.addEventListener('notificationclick', function(e) { var url = new URL('schedule#myschedule', location.href); url.search += (url.search ? '&' : '') + 'utm_source=notification'; self.clients.openWindow(url.toString()); }); Re-engagement from a notification service-worker.js
109. +Eric Bidelman @ebidel Google Santa Tracker app: santatracker.google.com src: github.com/google/santa-tracker-web Google I/O web app app: events.google.com/io2015/ src: github.com/GoogleChrome/ioweb2015 <thank-you>
110. @addyosmani
111. How do I draw a baby?
112. Step 1
113. Step 2 https://goo.gl/Y77E43
114. Step 1.5 https://goo.gl/njyal0
115. We wanted to do better.
116. Learnings from Web Starter Kit, IO 2015 and Santa Tracker
117. Polymer Starter Kit
118. Polymer Starter Kit
119. DOWNLOAD developers.google.com/web/tools/polymer-starter-kit
120. <paper-toolbar> <paper-drawer-panel> <paper-header-panel> <paper-menu> Material Design
121. App-wide Theming #303f9f CSS custom properties --dark-primary-color --light-primary-color --accent-color --primary-text-color #303f9f --dark-primary-color --light-primary-color --accent-color --primary-text-color
122. Web App install banner Mobile Web defaults Meta theme colour
123. Icons
124. Adaptive UI
125. Image: Responsive breakpoints
126. Material Design breakpoints
127. Image: App templates
128. Navigation Cards Layout
129. Navigation List Detail
130. List Card Over
131. Offline-first (in your app)
132. If your app doesn't work offline, you don't really have a mobile web experience. - Rob Dodson
134. // While there is only one cache in this example, the same logic will handle the case where // there are multiple versioned caches. var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) { return CURRENT_CACHES[key]; }); event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (expectedCacheNames.indexOf(cacheName) == -1) { // If this cache name isn't present in the array of "expected" cache names, then delete it. console.log('Deleting out of date cache:', cacheName); return caches.delete(cacheName); } }) ); }) ); }); // This sample illustrates an aggressive approach to caching, in which every valid response is
135. There’s an element for that! - Matt, Taylor and Eric ( moments ago )
136. Polymer Catalog New Service Worker Elements Fe Iron Elements Polymer core elements Md Paper Elements Material design elements Pt Service Worker Service Worker elements
137. Service Worker caching Take your app offline with ease <script src="webcomponents-lite.min.js"></script> <link rel="import" href="platinum-sw-elements.html"> <platinum-sw> <platinum-sw-cache default-cache-strategy="networkFirst" precache='["image.jpg", "results.json", "page.html"]'> </platinum-sw-cache> </platinum-sw>
138. Production-ising Apps
139. https://goo.gl/lqZyhu
140. image: http://gulpjs.com
141. Build process out of the box
142. Live-reload and cross-device development
143. Real apps
144. http://goo.gl/7eKVyD
146. Image:
147. There’s an element for that!
148. Google Feeds Download RSS, Atom or Media RSS feeds <google-feeds feed=“http://www.engadget.com/rss-full.xml" count=“25"> </google-feeds>
150. There’s an element for that!
152. Authenticate using Google, GitHub & other services <firebase-auth location="https://polymer-tests.firebaseio.com" provider="google"> </firebase-auth>
153. Get and set data using the Firebase APIs <firebase-collection location="https://users1.firebaseio.com/users" data="{{users}}"></firebase-collection> <template is="dom-repeat" items="[[users]]" as="user"> <img src="[[user.img]]"><span>[[user.name]]</span> </template>
155. There’s (of course) an element for that!
157. There’s an element for that too!
158. Push Notifications Stay informed of messages from your app <platinum-push-messaging title="You have new stories" message="4 RSS feeds have new stories" icon-url="rss.png" click-url=“feeds/new/“> </platinum-push-messaging>
159. Components for nearly any app, out of the box. Complete build chain for bringing your app to production. Flexible app theming using custom properties Responsive app layout boilerplate & routing Material Design ready
160. http://goo.gl/rr9rl9
161. There’s an element for many things.
162. There’s an element for many things. What are you going to build?
163. Recap
167. Polymer Starter Kit
168. And this is just the beginning
169. polymer-project.org
170. Polymer Summit September 15, 2015 Amsterdam
172. @Polymer Thank You!
173. COMMAND-LINE TIPS $ !! # run the last command executed $ sudo !! # run the last command as root $ !<word> # run last command starting with a specific word $ !<word>:p # ^ list, but don’t run that last command $ <space>command # execute a command w/out saving in history $ echo "ls -l" | at midnight # execute command at given time $ caffeinate -u -t 3600 # stop your mac from sleeping for 1h $ ls -lhS # sort files by size in a directory $ qlmanage -p <file> # QuickLook preview from command-line $ top -o vsize # why is my mac slow? @addyosmani FOR MAC, BUT BASH TIPS WILL OF COURSE WORK ELSEWHERE.