Building Progressive Web Apps with Polymer

Progressive webs apps are one of the hottest things in web development at the moment. In this talk, I give a general overview about them and how to use polymer - a Javascript library built on web components to build them - to get started building PWAs very easily..

Transcript

1. Building Progressive Web Apps with Polymer Kelvin Gobo DevFestSE 2017 - Nov 10, 2017
2. July 16, 2016
5. What are PWA’s? Immersive experiences that combine the best of web and mobile apps
6. Features & challenges
7. Features Reliable Fast Engaging
8. challenges... (are there any?)
9. Web apps have been restricted to the BROWSER But what if there was a way around that...
10. Enter Service Workers!
11. A script that can run in the background... even when the browser is not open
13. Recap Webapps have been restricted to the browser PWAs and Service workers give us a way beyond those restrictions to do more with web apps
14. Structuring your PWA Tip No matter the kind of app you are building, structure plays an important role.
15. Static content Dynamic content
17. Next Question How do I split my app?
18. Componentize your app #SplitYourSiteIntoSmallBits
19. import React, { Component } from 'react'; class AppToolbar extends Component { render() { return ( <img src="menu-icon.jpg" alt="menu icon"> <h1 className="App-title">Welcome to React</h1> ); } } export default AppToolbar; import { Component } from '@angular/core'; @Component({ selector: 'app-toolbar' , template: ` <img src=”menu-icon” alt=”menu icon”> <h1>App shell</h1> `, styleUrls: ['./app.component.css'] }) export class AppToolbar {} Components in popular frameworks
20. Framework give you a lot... But it comes at a cost: ➢ Size ➢ Load times ➢ No standards
21. Web Components Specifications a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.
22. Specs Web components are based on four main specifications: ➔ Custom Elements ➔ Shadow DOM ➔ HTML Imports ➔ HTML Template
23. Custom Elements ➢ lays the foundation for designing and using new types of DOM elements ➢ <devfest-home>, <image-slider>
24. Shadow DOM ➢ defines how to use encapsulated style and markup in web components
25. HTML Imports ➢ defines the inclusion and reuse of HTML documents in other HTML documents ➢ <link rel=”import” src=”devfest-home.html”>
26. HTML Template ➢ defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime ➢ <template> <img src=”some-image.jpg” alt=”some image”> <div>Some title</div> </template>
27. // register the new element class AppToolbar extends HTMLElement { ... } // register the new element customElements.define('app-toolbar', AppToolbar); Creating a vanilla custom element
28. // register the new element class AppToolbar extends HTMLElement { constructor() { super(); // always call super() first in the constructor. // Add event listeners, shadow root // Don’t inspect attributes or children } } // register the new element customElements.define('app-toolbar', AppToolbar); Lifecycle callbacks
29. // register the new element class AppToolbar extends HTMLElement { connectedCallback(){ // called anytime your element is inserted into the DOM // running setup code like rendering or fetching resources } disconnectedCallback(){ // called anytime your element is removed from the DOM // remove event listeners } } // register the new element customElements.define('app-toolbar', AppToolbar); Lifecycle callbacks
30. // register the new element class AppToolbar extends HTMLElement { // Monitor the 'src' attribute for changes. static get observedAttributes() { return ['title']; } // Respond to attribute changes. attributeChangedCallback(attr, oldValue, newValue) { // set attr if there is a new value this[attr] = newValue; } } // register the new element customElements.define('app-toolbar', AppToolbar); Lifecycle callbacks
31. // register the new element class AppToolbar extends HTMLElement { set height(height) { this.height = height; } get height(){ return this.height; } } // register the new element customElements.define('app-toolbar', AppToolbar); Setters/Getters
32. The Polymer Project
33. “Our mission is to make life better for users and developers, by helping them unlock the web platform’s full potential and by spurring the web platform to evolve and Improve” - The Polymer Team
34. Polymer library Elements App Toolbox PRPL Tooling
35. Polymer Library
36. class AppToolbar extends Polymer.Element { } Creating Custom elements in Polymer
37. class AppToolbar extends Polymer.Element { static get is() { return 'app-toolbar'; } } Creating Custom elements in Polymer
38. class AppToolbar extends Polymer.Element { static get is() { return 'app-toolbar'; } } window.customElements.define(AppToolbar.is, AppToolbar); Creating Custom elements in Polymer
39. class AppToolbar extends Polymer.Element { static get is() { return 'my-view404'; } static get properties() { return { title: String, }; } } window.customElements.define(AppToolbar.is, AppToolbar); Creating Custom elements in Polymer
40. class AppToolbar extends Polymer.Element { static get is() { return 'my-view404'; } static get properties() { return { title: String, }; } constructor() { this.page = 'view404'; } connectedCallback() { this.page = 'view404'; } } window.customElements.define(AppToolbar.is, AppToolbar); Creating Custom elements in Polymer
41. Elements
45. App Toolbox
46. “Polymer App Toolbox is a collection of components, tools and templates for building Progressive Web Apps with Polymer.”
47. Features ➢ Component-based architecture using Polymer and web components ➢ Responsive design using the app layout components. ➢ Offline caching as a progressive enhancement, using service workers ➢ Build tooling to support serving your app multiple ways: HTTP/1 or HTTP/2
48. PRPL
49. PRPL Pattern Push critical resources for initial route Render the initial route Pre-cache components for the remaining routes Lazy-load remaining routes on demand
50. Tooling
51. Polymer CLI
52. CLI Commands • polymer init • polymer serve • polymer test • polymer build
57. Who is building PWAs?
63. Useful Links Polymer project - https://www.polymer-project.org Workbox - https://developers.google.com/web/tools/workbox/ Web components - https://www.webcomponents.org/introduction Progressive Web Apps -https://developers.google.com/web/progressive-web-apps
64. Thank you! @kelvingobo