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
   

   View Slide

2. READY
   FOR
   PRODUCTION
   

   View Slide

3. The Polymer mission
   Image:
   

   View Slide

4. A different perspective
   Image:
   

   View Slide

5. Credit:
   

   View Slide

6. Image: Matthew McNulty (me)
   

   View Slide

7. View Slide

8. Images of shipping containers
   everywhere
   Image:
   

   View Slide

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

   View Slide

10. Interoperability
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. IOWA Animating
    

    View Slide

15. Custom and Interoperable
    

    View Slide

16. LET’S
    WORK
    TOGETHER
    Image:
    

    View Slide

17. What is Polymer?
    

    View Slide

18. Polymer is not a framework.
    

    View Slide

19. ALL
    

    View Slide

20. 0
    150
    300
    450
    600
    Time
    3x FASTER
    

    View Slide

21. 0
    750
    1500
    2250
    3000
    Time
    4x FASTER
    

    View Slide

22. 0.5
    1.0
    35% LESS CODE
    42kb
    19kb -
    

    View Slide

23. Faster, smaller, still awesome.
    Image:
    

    View Slide

24. 1.0 Features
    

    View Slide

25. 1.0 Features: Shady DOM
    

    View Slide

26. 1.0 Features: Theming
    

    View Slide

27. Theming with CSS Custom Properties
    <br/>body {<br/>--paper-tabs: {<br/>background-color: red;<br/>opacity: 0.5;<br/>};<br/>}<br/>
    Custom Property
    

    View Slide

28. And that’s not all…
    

    View Slide

29. Existing Frameworks
    Applications
    Web Platform
    Web Components Built with Polymer (or not)
    

    View Slide

30. There’s an element for that.
    

    View Slide

31. Elements
    Building blocks for a better web
    

    View Slide

32. http://bit.ly/1HGGNbI
    

    View Slide

33. core paper
    

    View Slide

34. core paper
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. 
    
    
    
    
    
    
    
    
    
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. 
    
    
    
    
    …
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. 
    
    
    
    
    
    …
    

    View Slide

47. View Slide

48. elements.polymer-project.org
    

    View Slide

49. There’s an element
    for that!
    

    View Slide

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

    View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. +
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. http://bit.ly/1SyS3x4
    

    View Slide

66. create a SPA
    - curious Polymer developer
    using web components?
    How do I setup i18n
    lazy load
    do routing
    
    

    View Slide

67. There’s an element for that!
    - Matthew McNulty ( 20 min ago )
    

    View Slide

68. @ebidel #polymerio
    @ebidel’s year
    

    View Slide

69. @ebidel #polymerio
    @ebidel’s year
    

    View Slide

70. @ebidel #polymerio
    @ebidel’s year
    

    View Slide

71. Polymer
    thestocks.im
    0.5
    

    View Slide

72. OBSOLETE!
    127,150 ++
    38,815 --
    flickr.com/photos/54268887@N00/5114160903/
    

    View Slide

73. // TODO: port to 1.0
    

    View Slide

74. Google Santa Tracker 2014
    santatracker.google.com
    

    View Slide

75. View Slide

76. There’s an element for that!
    - Taylor Savage ( moments ago )
    

    View Slide

77. 
    github.com/google/santa-tracker-web
    

    View Slide

78. 
    
    
    valueattr=“route”>
    
    …
    
    path=“scenes/santaselfie-{{lang}}.html”
    loadingBgColor="#83D7F5"
    loadingSrc=“scenes/selfie_loading.svg” hidden>…
    
    
    github.com/google/santa-tracker-web
    

    View Slide

79. Google I/O Web App
    events.google.com/io2015
    

    View Slide

80. IOWA
    upload.wikimedia.org/wikipedia/commons/0/09/Iowa_harvest_2009.jpg
    

    View Slide

81. @ebidel #polymerio
    events.google.com/io2015/
    

    View Slide

82. App manifest,
    Custom Elements, CSS will-change,,
    Service Worker, offline
    caching & analytics, Push Notifications, Picasa API,
    a11y, ES6, name=“theme-color”>, app
    HTML Imports, install banner,
    Polymer,
    , 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,
    I/O web app specs
    

    View Slide

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
    

    View Slide

84. Client-side templating
    SPA
    

    View Slide

85. There’s an element for that!
    - Addy Osmani ( sometime soon )
    

    View Slide

86. 
    thestocks.im
    

    View Slide

87. 
    I {{mood}} JS
    
    
    I {{mood}} Py
    
    
    I {{mood}} Go
    
    101
    

    View Slide

88. page1.html
    
    
    page2.html
    
    I {{mood}} Py
    
    page3.html
    
    I {{mood}} Go
    
    <br/>var t = document.getElementById('t');<br/>t.ref = 'js';<br/>
    Template’s content is ignored when `ref`
    is set. That content is used instead.
    site_layout.html
    I {{mood}} JS
    
    placeholder content
    
    
    
    I {{mood}} JS
    

    View Slide

89. 
    
    
    {% template "masthead" .%}
    
    
    
    
    {% template "content" .%}
    
    
    
    GET schedule.html
    Server renders markup on
    page load
    

    View Slide

90. 
    Schedule
    
    
    

    View Slide

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
    
    containing the page templates.
    lazy loading
    Polymer 1.0 code
    

    View Slide

92. Material design
    Web Animations API, Promises
    

    View Slide

93. Zero latency is !(a thing)
    thestocks.im
    

    View Slide

94. @ebidel #polymerio
    events.google.com/io2015/
    

    View Slide

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.
    });
    }
    

    View Slide

96. Offline first
    Service Worker
    

    View Slide

97. Service
    Worker
    thestocks.im
    caching / offline
    push notifications
    background sync
    intercept requests
    offline Google Analytics
    

    View Slide

98. First rule of offline:
    Let users know about
    offline
    thestocks.im
    

    View Slide

99. View Slide

100. 1. Gulp
     2. Service Worker
     3. Resources versioned in build step
     4. “Cache then network”
     requests are cached on-demand
     Usable offline
     

     View Slide

101. Notifications
     Service Worker, Push API
     

     View Slide

102. @ebidel #polymerio
     

     View Slide

103. thestocks.im
     First rule of notifications:
     Let users know about
     notifications
     

     View Slide

104. Unsupported browser :(
     Supported browser :)
     

     View Slide

105. UX: enabling notifications
     1. Bookmark a session
     2. Get sign-in toast
     3. Sign in
     4. Enable notifications
     5. Get confirmation toast
     

     View Slide

106. UX: notifications disabled
     1. Bookmark a session
     2. Get confirmation toast
     with learn more
     

     View Slide

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);
     });
     });
     

     View Slide

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
     

     View Slide

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
     
     

     View Slide

110. @addyosmani
     

     View Slide

111. How do I draw a baby?
     

     View Slide

112. Step 1
     

     View Slide

113. Step 2
     https://goo.gl/Y77E43
     

     View Slide

114. Step 1.5
     https://goo.gl/njyal0
     

     View Slide

115. We wanted to do better.
     

     View Slide

116. Learnings from Web Starter Kit, IO 2015 and Santa Tracker
     

     View Slide

117. Polymer Starter Kit
     

     View Slide

118. Polymer Starter Kit
     

     View Slide

119. DOWNLOAD
     developers.google.com/web/tools/polymer-starter-kit
     

     View Slide

120. 
     
     
     
     Material Design
     

     View Slide

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
     

     View Slide

122. Web App install banner
     Mobile Web defaults
     Meta theme colour
     

     View Slide

123. Icons
     

     View Slide

124. Adaptive UI
     

     View Slide

125. Image:
     Responsive breakpoints
     

     View Slide

126. Material Design breakpoints
     

     View Slide

127. Image:
     App templates
     

     View Slide

128. Navigation Cards Layout
     

     View Slide

129. Navigation List Detail
     

     View Slide

130. List Card Over
     

     View Slide

131. Offline-first (in your app)
     

     View Slide

132. If your app doesn't work
     offline, you don't really
     have a mobile web
     experience.
     - Rob Dodson
     

     View Slide

133. View Slide

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
     

     View Slide

135. There’s an element
     for that!
     - Matt, Taylor and Eric ( moments ago )
     

     View Slide

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
     

     View Slide

137. Service Worker caching
     Take your app offline with ease
     
     
     
     precache='["image.jpg", "results.json", "page.html"]'>
     
     
     

     View Slide

138. Production-ising Apps
     

     View Slide

139. https://goo.gl/lqZyhu
     

     View Slide

140. image: http://gulpjs.com
     

     View Slide

141. Build process out of the box
     

     View Slide

142. Live-reload and cross-device development
     

     View Slide

143. Real apps
     

     View Slide

144. http://goo.gl/7eKVyD
     

     View Slide

145. View Slide

146. Image:
     

     View Slide

147. There’s an element
     for that!
     

     View Slide

148. Google Feeds
     Download RSS, Atom or Media RSS feeds
     feed=“http://www.engadget.com/rss-full.xml"
     count=“25">
     
     

     View Slide

149. View Slide

150. There’s an element
     for that!
     

     View Slide

151. View Slide

152. Authenticate using Google, GitHub & other services
     location="https://polymer-tests.firebaseio.com"
     provider="google">
     
     

     View Slide

153. Get and set data using the Firebase APIs
     location="https://users1.firebaseio.com/users"
     data="{{users}}">
     
     [[user.name]]
     
     

     View Slide

154. View Slide

155. There’s (of course)
     an element for that!
     

     View Slide

156. View Slide

157. There’s an element
     for that too!
     

     View Slide

158. Push Notifications
     Stay informed of messages from your app
     title="You have new stories"
     message="4 RSS feeds have new stories"
     icon-url="rss.png"
     click-url=“feeds/new/“>
     
     

     View Slide

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
     

     View Slide

160. http://goo.gl/rr9rl9
     

     View Slide

161. There’s an element for
     many things.
     

     View Slide

162. There’s an element for
     many things. What are you
     going to build?
     

     View Slide

163. Recap
     

     View Slide

164. View Slide

165. View Slide

166. View Slide

167. Polymer Starter Kit
     

     View Slide

168. And this is just the beginning
     

     View Slide

169. polymer-project.org
     

     View Slide

170. Polymer Summit
     September 15, 2015
     Amsterdam
     

     View Slide

171. View Slide

172. @Polymer
     Thank You!
     

     View Slide

173. COMMAND-LINE TIPS
     $ !! # run the last command executed
     $ sudo !! # run the last command as root
     $ ! # run last command starting with a specific word
     $ !:p # ^ list, but don’t run that last command
     $ 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 # QuickLook preview from command-line
     $ top -o vsize # why is my mac slow?
     @addyosmani
     FOR MAC, BUT BASH TIPS WILL
     OF COURSE WORK ELSEWHERE.
     

     View Slide