Polymer and modern web APIs: In production at Google scale

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.