Building modern Progressive Web Apps with Polymer

  • Published on
    27-Jan-2017

  • View
    118

  • Download
    0

Transcript

Building modern progressive web apps with PolymerImage Source: giphy.comhttps://media.giphy.com/media/3o6UBil4zn1Tt03PI4/giphy.gifhttps://media.giphy.com/media/3o6UBil4zn1Tt03PI4/giphy.gif@d_danailovhttps://twitter.com/d_danailovhttps://twitter.com/d_danailovTopics Today What exactly are Progressive Web Apps ? Tools and Libraries for Progressive Web Apps Polymer overview Building modern progressive web apps with Polymer Theres no silver bullet What exactly is a Progressive Web App?Radically improving web user experienceProgressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.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 nextProgressive - 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 nextConnectivity independent - Enhanced with service workers to work offline or on low-quality networksProgressive - 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 nextConnectivity independent - Enhanced with service workers to work offline or on low-quality networksApp-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell modelProgressive - 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 nextConnectivity independent - Enhanced with service workers to work offline or on low-quality networksApp-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell modelFresh - Always up-to-date thanks to the service worker update processProgressive - 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 nextConnectivity independent - Enhanced with service workers to work offline or on low-quality networksApp-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell modelFresh - Always up-to-date thanks to the service worker update processSafe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.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 nextConnectivity independent - Enhanced with service workers to work offline or on low-quality networksApp-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell modelFresh - Always up-to-date thanks to the service worker update processSafe - 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 itProgressive - 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 nextConnectivity independent - Enhanced with service workers to work offline or on low-quality networksApp-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell modelFresh - Always up-to-date thanks to the service worker update processSafe - 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 itRe-engageable - Makes re-engagement easy through features like push notificationsProgressive - 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 nextConnectivity independent - Enhanced with service workers to work offline or on low-quality networksApp-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell modelFresh - Always up-to-date thanks to the service worker update processSafe - 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 itRe-engageable - Makes re-engagement easy through features like push notificationsInstallable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app storeProgressive - 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 nextConnectivity independent - Enhanced with service workers to work offline or on low-quality networksApp-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell modelFresh - Always up-to-date thanks to the service worker update processSafe - 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 itRe-engageable - Makes re-engagement easy through features like push notificationsInstallable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app storeLinkable - Easily share via URL, does not require complex installationImage Source: giphy.comhttps://media.giphy.com/media/3o6UBil4zn1Tt03PI4/giphy.gifhttps://media.giphy.com/media/3o6UBil4zn1Tt03PI4/giphy.gifHousing.com: User Acquisition Costs$ 3.75Android App Mobile Web$ 0.071 vs 5317 000+ developers across 35+ countriesImage Source: Novatvhttp://nova.bg/livehttp://nova.bg/livesw-precacheBuild-time precaching for static assetsgithub.com/GoogleChrome/sw-precachesw-toolboxRuntime caching strategies & expirationgithub.com/GoogleChrome/sw-toolboxRoutingRuntime HandlersRequest BehaviorsFramework LayersFramework Layers Routes match URLs and apply Handlers RegExpRoute ExpressRoute and more!RoutingFramework 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!RoutingRuntimeHandlersFramework 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)RoutingRuntimeHandlersRequestBehaviorsBrowserRequestWeb APIServerTraditionalBrowserRequestWeb APIServerProgressive web apps (PWA)ServiceWorkerCachePolymer overviewWeb ComponentsImage Source: giphy.comhttps://media.giphy.com/media/3o6UBil4zn1Tt03PI4/giphy.gifhttps://media.giphy.com/media/3o6UBil4zn1Tt03PI4/giphy.gif2014 - Polymer 0.5 (Developer preview)2015 - Polymer 1.02016 and 2017 - Polymer 2.0500 + projects6,000+ elementsMy first componentPicture-frame.html :host { display: block; } Hello jstalks Image Source: Polymer Summit 2016https://www.polymer-project.org/summithttps://www.polymer-project.org/summit Building modern progressive web apps with PolymerPush components for initial routePre - cache components for remaining routesLazy - load & create next routes on-demandRender the initial route asapThe PRPL PatternImage Source: bryanmmathers.comhttp://bryanmmathers.com/wp-content/uploads/2015/05/no-silver-bullet.pnghttp://bryanmmathers.com/wp-content/uploads/2015/05/no-silver-bullet.pngSecurityTemplate Shadow dom v0 Custom Elements v0 HTML ImportsTemplate Shadow dom v1Custom Elements v1 HTML ImportsHow I learned to stop worrying and love the Polymer toolbox (Polymer Summit 2016)https://youtu.be/6t2JRKTCYbI?t=21m44shttps://youtu.be/6t2JRKTCYbI?t=21m44s#UseThePlatformResourceshttps://goo.gl/A4w47CMyTeletouch your phone as TV-PC wireless keyboardhttps://goo.gl/vvOCnzhttps://goo.gl/vvOCnzQuestions