Slide 1
Slide 1 text
15
Polymer and modern web APIs: In
production at Google scale
+ Matthew McNulty
@mattsmcnulty
+Taylor Savage
@taylorthesavage
+Eric Bidelman
@ebidel
+Addy Osmani
@addyosmani
Slide 2
Slide 2 text
READY
FOR
PRODUCTION
Slide 3
Slide 3 text
The Polymer mission
Image:
Slide 4
Slide 4 text
A different perspective
Image:
Slide 5
Slide 5 text
Credit:
Slide 6
Slide 6 text
Image: Matthew McNulty (me)
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Images of shipping containers
everywhere
Image:
Slide 9
Slide 9 text
What’s this got to do with web development?
Slide 10
Slide 10 text
Interoperability
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
IOWA Animating
Slide 15
Slide 15 text
Custom and Interoperable
Slide 16
Slide 16 text
LET’S
WORK
TOGETHER
Image:
Slide 17
Slide 17 text
What is Polymer?
Slide 18
Slide 18 text
Polymer is not a framework.
Slide 19
Slide 19 text
ALL
Slide 20
Slide 20 text
0
150
300
450
600
Time
3x FASTER
Slide 21
Slide 21 text
0
750
1500
2250
3000
Time
4x FASTER
Slide 22
Slide 22 text
0.5
1.0
35% LESS CODE
42kb
19kb -
Slide 23
Slide 23 text
Faster, smaller, still awesome.
Image:
Slide 24
Slide 24 text
1.0 Features
Slide 25
Slide 25 text
1.0 Features: Shady DOM
Slide 26
Slide 26 text
1.0 Features: Theming
Slide 27
Slide 27 text
Theming with CSS Custom Properties
body {
--paper-tabs: {
background-color: red;
opacity: 0.5;
};
}
Custom Property
Slide 28
Slide 28 text
And that’s not all…
Slide 29
Slide 29 text
Existing Frameworks
Applications
Web Platform
Web Components Built with Polymer (or not)
Slide 30
Slide 30 text
There’s an element for that.
Slide 31
Slide 31 text
Elements
Building blocks for a better web
Slide 32
Slide 32 text
http://bit.ly/1HGGNbI
Slide 33
Slide 33 text
core paper
Slide 34
Slide 34 text
core paper
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
…
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
…
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
elements.polymer-project.org
Slide 49
Slide 49 text
There’s an element
for that!
Slide 50
Slide 50 text
http://bit.ly/1JgiQb6
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
+
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
http://bit.ly/1SyS3x4
Slide 66
Slide 66 text
create a SPA
- curious Polymer developer
using web components?
How do I setup i18n
lazy load
do routing
Slide 67
Slide 67 text
There’s an element for that!
- Matthew McNulty ( 20 min ago )
Slide 68
Slide 68 text
@ebidel #polymerio
@ebidel’s year
Slide 69
Slide 69 text
@ebidel #polymerio
@ebidel’s year
Slide 70
Slide 70 text
@ebidel #polymerio
@ebidel’s year
Slide 71
Slide 71 text
Polymer
thestocks.im
0.5
Slide 72
Slide 72 text
OBSOLETE!
127,150 ++
38,815 --
flickr.com/photos/54268887@N00/5114160903/
Slide 73
Slide 73 text
// TODO: port to 1.0
Slide 74
Slide 74 text
Google Santa Tracker 2014
santatracker.google.com
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
There’s an element for that!
- Taylor Savage ( moments ago )
Slide 77
Slide 77 text
github.com/google/santa-tracker-web
Slide 78
Slide 78 text
…
…
github.com/google/santa-tracker-web
Slide 79
Slide 79 text
Google I/O Web App
events.google.com/io2015
Slide 80
Slide 80 text
IOWA
upload.wikimedia.org/wikipedia/commons/0/09/Iowa_harvest_2009.jpg
Slide 81
Slide 81 text
@ebidel #polymerio
events.google.com/io2015/
Slide 82
Slide 82 text
App manifest,
Custom Elements, CSS will-change,,
Service Worker, offline
caching & analytics, Push Notifications, Picasa API,
a11y, ES6, , 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
Slide 83
Slide 83 text
+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
Slide 84
Slide 84 text
Client-side templating
SPA
Slide 85
Slide 85 text
There’s an element for that!
- Addy Osmani ( sometime soon )
Slide 86
Slide 86 text
thestocks.im
Slide 87
Slide 87 text
I {{mood}} JS
I {{mood}} Py
I {{mood}} Go
101
Slide 88
Slide 88 text
page1.html
page2.html
I {{mood}} Py
page3.html
I {{mood}} Go
var t = document.getElementById('t');
t.ref = 'js';
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
Slide 89
Slide 89 text
{% template "masthead" .%}
{% template "content" .%}
GET schedule.html
Server renders markup on
page load
Slide 90
Slide 90 text
Schedule
Slide 91
Slide 91 text
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
Slide 92
Slide 92 text
Material design
Web Animations API, Promises
Slide 93
Slide 93 text
Zero latency is !(a thing)
thestocks.im
Slide 94
Slide 94 text
@ebidel #polymerio
events.google.com/io2015/
Slide 95
Slide 95 text
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.
});
}
Slide 96
Slide 96 text
Offline first
Service Worker
Slide 97
Slide 97 text
Service
Worker
thestocks.im
caching / offline
push notifications
background sync
intercept requests
offline Google Analytics
Slide 98
Slide 98 text
First rule of offline:
Let users know about
offline
thestocks.im
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
1. Gulp
2. Service Worker
3. Resources versioned in build step
4. “Cache then network”
requests are cached on-demand
Usable offline
Slide 101
Slide 101 text
Notifications
Service Worker, Push API
Slide 102
Slide 102 text
@ebidel #polymerio
Slide 103
Slide 103 text
thestocks.im
First rule of notifications:
Let users know about
notifications
Slide 104
Slide 104 text
Unsupported browser :(
Supported browser :)
Slide 105
Slide 105 text
UX: enabling notifications
1. Bookmark a session
2. Get sign-in toast
3. Sign in
4. Enable notifications
5. Get confirmation toast
Slide 106
Slide 106 text
UX: notifications disabled
1. Bookmark a session
2. Get confirmation toast
with learn more
Slide 107
Slide 107 text
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);
});
});
Slide 108
Slide 108 text
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
Slide 109
Slide 109 text
+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
Slide 110
Slide 110 text
@addyosmani
Slide 111
Slide 111 text
How do I draw a baby?
Slide 112
Slide 112 text
Step 1
Slide 113
Slide 113 text
Step 2
https://goo.gl/Y77E43
Slide 114
Slide 114 text
Step 1.5
https://goo.gl/njyal0
Slide 115
Slide 115 text
We wanted to do better.
Slide 116
Slide 116 text
Learnings from Web Starter Kit, IO 2015 and Santa Tracker
Slide 117
Slide 117 text
Polymer Starter Kit
Slide 118
Slide 118 text
Polymer Starter Kit
Slide 119
Slide 119 text
DOWNLOAD
developers.google.com/web/tools/polymer-starter-kit
Slide 120
Slide 120 text
Material Design
Slide 121
Slide 121 text
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
Slide 122
Slide 122 text
Web App install banner
Mobile Web defaults
Meta theme colour
Slide 123
Slide 123 text
Icons
Slide 124
Slide 124 text
Adaptive UI
Slide 125
Slide 125 text
Image:
Responsive breakpoints
Slide 126
Slide 126 text
Material Design breakpoints
Slide 127
Slide 127 text
Image:
App templates
Slide 128
Slide 128 text
Navigation Cards Layout
Slide 129
Slide 129 text
Navigation List Detail
Slide 130
Slide 130 text
List Card Over
Slide 131
Slide 131 text
Offline-first (in your app)
Slide 132
Slide 132 text
If your app doesn't work
offline, you don't really
have a mobile web
experience.
- Rob Dodson
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
// 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
Slide 135
Slide 135 text
There’s an element
for that!
- Matt, Taylor and Eric ( moments ago )
Slide 136
Slide 136 text
Polymer Catalog
New Service Worker Elements
Fe
Iron
Elements
Polymer core elements
Md
Paper
Elements
Material design elements
Pt
Service
Worker
Service Worker elements
Slide 137
Slide 137 text
Service Worker caching
Take your app offline with ease
Slide 138
Slide 138 text
Production-ising Apps
Slide 139
Slide 139 text
https://goo.gl/lqZyhu
Slide 140
Slide 140 text
image: http://gulpjs.com
Slide 141
Slide 141 text
Build process out of the box
Slide 142
Slide 142 text
Live-reload and cross-device development
Slide 143
Slide 143 text
Real apps
Slide 144
Slide 144 text
http://goo.gl/7eKVyD
Slide 145
Slide 145 text
No content
Slide 146
Slide 146 text
Image:
Slide 147
Slide 147 text
There’s an element
for that!
Slide 148
Slide 148 text
Google Feeds
Download RSS, Atom or Media RSS feeds
Slide 149
Slide 149 text
No content
Slide 150
Slide 150 text
There’s an element
for that!
Slide 151
Slide 151 text
No content
Slide 152
Slide 152 text
Authenticate using Google, GitHub & other services
Slide 153
Slide 153 text
Get and set data using the Firebase APIs
[[user.name]]
Slide 154
Slide 154 text
No content
Slide 155
Slide 155 text
There’s (of course)
an element for that!
Slide 156
Slide 156 text
No content
Slide 157
Slide 157 text
There’s an element
for that too!
Slide 158
Slide 158 text
Push Notifications
Stay informed of messages from your app
Slide 159
Slide 159 text
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
Slide 160
Slide 160 text
http://goo.gl/rr9rl9
Slide 161
Slide 161 text
There’s an element for
many things.
Slide 162
Slide 162 text
There’s an element for
many things. What are you
going to build?
Slide 163
Slide 163 text
Recap
Slide 164
Slide 164 text
No content
Slide 165
Slide 165 text
No content
Slide 166
Slide 166 text
No content
Slide 167
Slide 167 text
Polymer Starter Kit
Slide 168
Slide 168 text
And this is just the beginning
Slide 169
Slide 169 text
polymer-project.org
Slide 170
Slide 170 text
Polymer Summit
September 15, 2015
Amsterdam
Slide 171
Slide 171 text
No content
Slide 172
Slide 172 text
@Polymer
Thank You!
Slide 173
Slide 173 text
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.