Building modern progressive web apps with Polymer...Building modern progressive web apps with...
Transcript of Building modern progressive web apps with Polymer...Building modern progressive web apps with...
![Page 1: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/1.jpg)
Building modern progressive web apps
with Polymer
![Page 2: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/2.jpg)
Image Source: giphy.com
![Page 4: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/4.jpg)
Topics Today
● What exactly are Progressive Web Apps ?● Tools and Libraries for Progressive Web Apps● Polymer overview● Building modern progressive web apps with Polymer● There’s no silver bullet
![Page 5: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/5.jpg)
What exactly is a Progressive Web App?
![Page 6: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/6.jpg)
Radically improving web user experience
![Page 7: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/7.jpg)
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
![Page 8: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/8.jpg)
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next
![Page 9: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/9.jpg)
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks
![Page 10: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/10.jpg)
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks
App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model
![Page 11: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/11.jpg)
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks
App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model
Fresh - Always up-to-date thanks to the service worker update process
![Page 12: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/12.jpg)
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks
App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model
Fresh - Always up-to-date thanks to the service worker update process
Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
![Page 13: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/13.jpg)
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks
App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model
Fresh - Always up-to-date thanks to the service worker update process
Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it
![Page 14: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/14.jpg)
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks
App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model
Fresh - Always up-to-date thanks to the service worker update process
Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it
Re-engageable - Makes re-engagement easy through features like push notifications
![Page 15: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/15.jpg)
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks
App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model
Fresh - Always up-to-date thanks to the service worker update process
Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it
Re-engageable - Makes re-engagement easy through features like push notifications
Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store
![Page 16: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/16.jpg)
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks
App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model
Fresh - Always up-to-date thanks to the service worker update process
Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it
Re-engageable - Makes re-engagement easy through features like push notifications
Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store
Linkable - Easily share via URL, does not require complex installation
![Page 17: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/17.jpg)
Image Source: giphy.com
![Page 18: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/18.jpg)
![Page 19: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/19.jpg)
![Page 20: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/20.jpg)
Housing.com: User Acquisition Costs
$ 3.75
Android App Mobile Web
$ 0.07
1 vs 53
![Page 21: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/21.jpg)
17 000+ developers across 35+ countries
![Page 23: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/23.jpg)
sw-precacheBuild-time precaching for static assets
github.com/GoogleChrome/sw-precache
![Page 24: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/24.jpg)
sw-toolboxRuntime caching strategies & expiration
github.com/GoogleChrome/sw-toolbox
![Page 25: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/25.jpg)
![Page 26: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/26.jpg)
![Page 27: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/27.jpg)
![Page 28: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/28.jpg)
![Page 29: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/29.jpg)
![Page 30: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/30.jpg)
Routing
Runtime Handlers
Request Behaviors
Framework Layers
![Page 31: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/31.jpg)
Framework Layers● Routes match URLs and apply Handlers
○ RegExpRoute○ ExpressRoute○ … and more!
Routing
![Page 32: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/32.jpg)
Framework Layers● Routes match URLs and apply Handlers
○ RegExpRoute○ ExpressRoute○ … and more!
● Called by Route, or used in your own code (Caching strategies)
○ StaleWhileRevalidate○ NetworkFirst○ … and more!
Routing
RuntimeHandlers
![Page 33: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/33.jpg)
Framework Layers● Routes match URLs and apply Handlers
○ RegExpRoute○ ExpressRoute○ … and more!
● Called by Route, or used in your own code
○ StaleWhileRevalidate○ NetworkFirst○ … and more!
● Custom callbacks for network & caches○ requestWillFetch (Custom Action)○ fetchDidFail (Custom Action)○ cacheDidUpdate (Custom Action)
Routing
RuntimeHandlers
RequestBehaviors
![Page 34: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/34.jpg)
BrowserRequest
Web API
Server
Traditional
![Page 35: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/35.jpg)
BrowserRequest
Web API
Server
Progressive web apps (PWA)
ServiceWorker
Cache
![Page 36: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/36.jpg)
Polymer overview
![Page 37: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/37.jpg)
Web Components
![Page 38: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/38.jpg)
Image Source: giphy.com
![Page 39: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/39.jpg)
![Page 40: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/40.jpg)
2014 - Polymer 0.5 (Developer preview)
2015 - Polymer 1.0
2016 and 2017 - Polymer 2.0
![Page 41: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/41.jpg)
500 + projects
6,000+ elements
![Page 42: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/42.jpg)
![Page 43: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/43.jpg)
My first component
Picture-frame.html
<link rel=”import” href="https://polygit2.appspot.com/components/polymer/polymer.html"><dom-module id=”picture-frame”> <template> <style> :host { display: block; } </style> <h1>Hello jstalks</h1> <!-- any children are rendered here → <content></content> </template> <script> Polymer({ ‘is’: ‘picture-frame’ }) </script></dom-module>
<picture-frame> <img src=”jstalks.png” alt=”jstalks” /></picture-frame>
![Page 44: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/44.jpg)
Image Source: Polymer Summit 2016
![Page 45: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/45.jpg)
Building modern progressive web apps
with Polymer
![Page 46: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/46.jpg)
Push components for initial route
Pre - cache components for remaining routes
Lazy - load & create next routes on-demand
Render the initial route asap
The PRPL Pattern
![Page 47: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/47.jpg)
![Page 48: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/48.jpg)
Image Source: bryanmmathers.com
![Page 49: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/49.jpg)
Security
![Page 50: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/50.jpg)
![Page 51: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/51.jpg)
![Page 52: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/52.jpg)
Template Shadow dom v0 Custom Elements v0 HTML Imports
![Page 53: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/53.jpg)
Template Shadow dom v1
Custom Elements v1 HTML Imports
![Page 54: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/54.jpg)
How I learned to stop worrying and love the Polymer toolbox (Polymer Summit 2016)
![Page 55: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/55.jpg)
#UseThePlatform
![Page 56: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/56.jpg)
Resourceshttps://goo.gl/A4w47C
![Page 57: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/57.jpg)
![Page 59: Building modern progressive web apps with Polymer...Building modern progressive web apps with Polymer There’s no silver bullet What exactly is a Progressive Web App? Radically improving](https://reader035.fdocuments.net/reader035/viewer/2022070715/5ed7933967b53e06555d299c/html5/thumbnails/59.jpg)
Questions