Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building modern
progressive web apps
with Polymer
Image Source: giphy.com
@d_danailov
Topics Today
● What exactly are Progressive Web Apps ?
● Tools and Libraries for Progressive Web Apps
● Polymer overview
●...
What exactly is a
Progressive Web App?
Radically improving web user experience
Progressive - Works for every user, regardless of
browser choice because it's built with progressive
enhancement as a core...
Progressive - Works for every user, regardless of
browser choice because it's built with progressive
enhancement as a core...
Progressive - Works for every user, regardless of
browser choice because it's built with progressive
enhancement as a core...
Progressive - Works for every user, regardless of
browser choice because it's built with progressive
enhancement as a core...
Progressive - Works for every user, regardless of
browser choice because it's built with progressive
enhancement as a core...
Progressive - Works for every user, regardless of
browser choice because it's built with progressive
enhancement as a core...
Progressive - Works for every user, regardless of
browser choice because it's built with progressive
enhancement as a core...
Progressive - Works for every user, regardless of
browser choice because it's built with progressive
enhancement as a core...
Progressive - Works for every user, regardless of
browser choice because it's built with progressive
enhancement as a core...
Progressive - Works for every user, regardless of
browser choice because it's built with progressive
enhancement as a core...
Image Source: giphy.com
Housing.com: User Acquisition Costs
$ 3.75
Android App Mobile Web
$ 0.07
1 vs 53
17 000+ developers across 35+ countries
Image Source: Novatv
sw-precache
Build-time precaching for static assets
github.com/GoogleChrome/sw-precache
sw-toolbox
Runtime caching strategies & expiration
github.com/GoogleChrome/sw-toolbox
Routing
Runtime Handlers
Request Behaviors
Framework Layers
Framework Layers
● Routes match URLs and apply Handlers
○ RegExpRoute
○ ExpressRoute
○ … and more!
Routing
Framework Layers
● Routes match URLs and apply Handlers
○ RegExpRoute
○ ExpressRoute
○ … and more!
● Called by Route, or u...
Framework Layers
● Routes match URLs and apply Handlers
○ RegExpRoute
○ ExpressRoute
○ … and more!
● Called by Route, or u...
Browser
Request
Web API
Server
Traditional
Browser
Request
Web API
Server
Progressive web apps (PWA)
Service
Worker
Cache
Polymer overview
Web Components
Image Source: giphy.com
2014 - Polymer 0.5 (Developer preview)
2015 - Polymer 1.0
2016 and 2017 - Polymer 2.0
500 + projects
6,000+ elements
My first component
Picture-frame.html
<link rel=”import” href="https://polygit2.appspot.com/components/polymer/polymer.htm...
Image Source: Polymer Summit 2016
Building modern
progressive web apps
with Polymer
Push components for initial route
Pre - cache components for remaining routes
Lazy - load & create next routes on-demand
R...
Image Source: bryanmmathers.com
Security
Template Shadow dom v0
Custom
Elements v0
HTML Imports
Template
Shadow dom
v1
Custom
Elements v1
HTML Imports
How I learned to stop worrying and love the Polymer toolbox (Polymer Summit 2016)
#UseThePlatform
Resources
https://goo.gl/A4w47C
MyTeletouch your phone as TV-PC wireless keyboard
Questions
Building modern Progressive Web Apps with Polymer
Building modern Progressive Web Apps with Polymer
Building modern Progressive Web Apps with Polymer
Building modern Progressive Web Apps with Polymer
Building modern Progressive Web Apps with Polymer
Building modern Progressive Web Apps with Polymer
Building modern Progressive Web Apps with Polymer
Building modern Progressive Web Apps with Polymer
Building modern Progressive Web Apps with Polymer
Building modern Progressive Web Apps with Polymer
Building modern Progressive Web Apps with Polymer
Building modern Progressive Web Apps with Polymer
Building modern Progressive Web Apps with Polymer
Upcoming SlideShare
Loading in …5
×

Building modern Progressive Web Apps with Polymer

233 views

Published on

Taylor Savage on Polymer and Progressive Web Apps: Building on the modern web

The Polymer library, re-written from the ground up with its 1.0 release last year, helps you build composable, interoperable components to use in your web applications. We'll go over the latest features of the library, show how to use some powerful newly-released components, show how Polymer is used in practice, dive into the cutting-edge tools for shipping component-based applications, reveal a brand-new way to get started building Progressive Web Applications with Polymer, and a take sneak peek into the future of the project.

Published in: Software

Building modern Progressive Web Apps with Polymer

  1. 1. Building modern progressive web apps with Polymer
  2. 2. Image Source: giphy.com
  3. 3. @d_danailov
  4. 4. 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
  5. 5. What exactly is a Progressive Web App?
  6. 6. Radically improving web user experience
  7. 7. Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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.
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. Image Source: giphy.com
  18. 18. Housing.com: User Acquisition Costs $ 3.75 Android App Mobile Web $ 0.07 1 vs 53
  19. 19. 17 000+ developers across 35+ countries
  20. 20. Image Source: Novatv
  21. 21. sw-precache Build-time precaching for static assets github.com/GoogleChrome/sw-precache
  22. 22. sw-toolbox Runtime caching strategies & expiration github.com/GoogleChrome/sw-toolbox
  23. 23. Routing Runtime Handlers Request Behaviors Framework Layers
  24. 24. Framework Layers ● Routes match URLs and apply Handlers ○ RegExpRoute ○ ExpressRoute ○ … and more! Routing
  25. 25. 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 Runtime Handlers
  26. 26. 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 Runtime Handlers Request Behaviors
  27. 27. Browser Request Web API Server Traditional
  28. 28. Browser Request Web API Server Progressive web apps (PWA) Service Worker Cache
  29. 29. Polymer overview
  30. 30. Web Components
  31. 31. Image Source: giphy.com
  32. 32. 2014 - Polymer 0.5 (Developer preview) 2015 - Polymer 1.0 2016 and 2017 - Polymer 2.0
  33. 33. 500 + projects 6,000+ elements
  34. 34. 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>
  35. 35. Image Source: Polymer Summit 2016
  36. 36. Building modern progressive web apps with Polymer
  37. 37. 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
  38. 38. Image Source: bryanmmathers.com
  39. 39. Security
  40. 40. Template Shadow dom v0 Custom Elements v0 HTML Imports
  41. 41. Template Shadow dom v1 Custom Elements v1 HTML Imports
  42. 42. How I learned to stop worrying and love the Polymer toolbox (Polymer Summit 2016)
  43. 43. #UseThePlatform
  44. 44. Resources https://goo.gl/A4w47C
  45. 45. MyTeletouch your phone as TV-PC wireless keyboard
  46. 46. Questions

×