Building Progressive Web Apps with Polymer

F95fe2cd54f59ca0453914b9f2ae7233?s=47 Kelvin Gobo
November 10, 2017

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..

F95fe2cd54f59ca0453914b9f2ae7233?s=128

Kelvin Gobo

November 10, 2017
Tweet

Transcript

  1. Building Progressive Web Apps with Polymer Kelvin Gobo DevFestSE 2017

    - Nov 10, 2017
  2. July 16, 2016

  3. None
  4. None
  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
  12. None
  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

  16. None
  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

  42. None
  43. None
  44. None
  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
  53. None
  54. None
  55. None
  56. None
  57. Who is building PWAs?

  58. None
  59. None
  60. None
  61. None
  62. None
  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