Polymer and modern web APIs: In production at Google scale

Polymer and modern web APIs: In production at Google scale

96270e4c3e5e9806cf7245475c00b275?s=128

Addy Osmani

May 29, 2015
Tweet

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)

  7. None
  8. Images of shipping containers everywhere Image:

  9. What’s this got to do with web development?

  10. Interoperability

  11. None
  12. None
  13. None
  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

  35. None
  36. None
  37. None
  38. <google-drive> <google-calendar> <google-hangout-button> <google-cloud> <google-castable-video> <google-analytics> <google-map> <google-sheets> <google-translate> <google-youtube>

  39. None
  40. None
  41. None
  42. <platinum-sw> <platinum-sw-fetch> <platinum-sw-cache> <platinum-sw-register> <platinum-push-messaging> …

  43. None
  44. None
  45. None
  46. <gold-cc-input> <gold-zip-input> <gold-cc-expiration-input> <gold-cc-cvc-input> <gold-phone-input> <gold-email-input> …

  47. None
  48. elements.polymer-project.org

  49. There’s an element for that!

  50. http://bit.ly/1JgiQb6

  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. +

  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  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

  75. None
  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

  99. None
  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
  133. None
  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

  145. None
  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>
  149. None
  150. There’s an element for that!

  151. None
  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>
  154. None
  155. There’s (of course) an element for that!

  156. None
  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

  164. None
  165. None
  166. None
  167. Polymer Starter Kit

  168. And this is just the beginning

  169. polymer-project.org

  170. Polymer Summit September 15, 2015 Amsterdam

  171. None
  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.