Slide 1
Slide 1 text
Building Progressive Web
Apps with Polymer
Kelvin Gobo
DevFestSE 2017 - Nov 10, 2017
Slide 2
Slide 2 text
July 16, 2016
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
What are PWA’s?
Immersive experiences that combine the best of
web and mobile apps
Slide 6
Slide 6 text
Features & challenges
Slide 7
Slide 7 text
Features
Reliable Fast Engaging
Slide 8
Slide 8 text
challenges...
(are there any?)
Slide 9
Slide 9 text
Web apps have been
restricted to the
BROWSER
But what if there was a
way around that...
Slide 10
Slide 10 text
Enter
Service Workers!
Slide 11
Slide 11 text
A script that can run
in the background...
even when the
browser is not open
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Structuring your
PWA
Tip
No matter the kind of
app you are building,
structure plays an
important role.
Slide 15
Slide 15 text
Static content Dynamic content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Next Question
How do I split my app?
Slide 18
Slide 18 text
Componentize your
app
#SplitYourSiteIntoSmallBits
Slide 19
Slide 19 text
import React, { Component } from 'react';
class AppToolbar extends Component {
render() {
return (
Welcome to React
); } } export default AppToolbar; import { Component } from '@angular/core'; @Component({ selector: 'app-toolbar' , template: `App shell
`, styleUrls: ['./app.component.css'] }) export class AppToolbar {} Components in popular frameworksSlide 20
Slide 20 text
Framework give you a lot...
But it comes at a cost:
➢ Size
➢ Load times
➢ No standards
Slide 21
Slide 21 text
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.
Slide 22
Slide 22 text
Specs
Web components are based on four main
specifications:
➔ Custom Elements
➔ Shadow DOM
➔ HTML Imports
➔ HTML Template
Slide 23
Slide 23 text
Custom Elements
➢ lays the foundation for designing and using new types of DOM
elements
➢ ,
Slide 24
Slide 24 text
Shadow DOM
➢ defines how to use encapsulated style and markup in web
components
Slide 25
Slide 25 text
HTML Imports
➢ defines the inclusion and reuse of HTML documents in other HTML
documents
➢
Slide 26
Slide 26 text
HTML Template
➢ defines how to declare fragments of markup that go unused at
page load, but can be instantiated later on at runtime
➢
Some title
Slide 27
Slide 27 text
// register the new element
class AppToolbar extends HTMLElement {
...
}
// register the new element
customElements.define('app-toolbar', AppToolbar);
Creating a vanilla custom element
Slide 28
Slide 28 text
// 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
Slide 29
Slide 29 text
// 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
Slide 30
Slide 30 text
// 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
Slide 31
Slide 31 text
// 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
Slide 32
Slide 32 text
The
Polymer Project
Slide 33
Slide 33 text
“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
Slide 34
Slide 34 text
Polymer library
Elements
App Toolbox
PRPL
Tooling
Slide 35
Slide 35 text
Polymer Library
Slide 36
Slide 36 text
class AppToolbar extends Polymer.Element {
}
Creating Custom elements in Polymer
Slide 37
Slide 37 text
class AppToolbar extends Polymer.Element {
static get is() { return 'app-toolbar'; }
}
Creating Custom elements in Polymer
Slide 38
Slide 38 text
class AppToolbar extends Polymer.Element {
static get is() { return 'app-toolbar'; }
}
window.customElements.define(AppToolbar.is, AppToolbar);
Creating Custom elements in Polymer
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
Elements
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
App Toolbox
Slide 46
Slide 46 text
“Polymer App Toolbox is a collection of
components, tools and templates for building
Progressive Web Apps with Polymer.”
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
PRPL
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
Tooling
Slide 51
Slide 51 text
Polymer CLI
Slide 52
Slide 52 text
CLI Commands
●
polymer init
●
polymer serve
●
polymer test
●
polymer build
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
Who is building PWAs?
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
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
Slide 64
Slide 64 text
Thank you!
@kelvingobo