Web Components the best marriage for a PWA

Manuel Carrasco MoñinoSenior GWT Expert

Vaadin Elements Team

About me

Agenda1.Demystifying PWAs2.Introducing web-components and Polymer3.Why use Polymer in PWAs

4. Vaadin Motivations for building web components5. PWA Demos

Demystifying PWAs

- PWAs are being regarded with caution and confusion.- Lots of backlash on the Internet about people not

liking that PWAs are this monolithic thing.- PWAs are not only a Google thing, that rely on only a

few technologies, and are entirely new.- Actually, most parts of what makes a PWA has been

for years.

Demystifying PWAs

- A web app that has a responsive layout, works offline, and can be on the home screen of a device.

- More than a set of technologies or tools, PWAs are a way of building web apps that transparently improve UX across platforms, demographics, and use cases.

- You can implement individual enhancements in new and existing web apps.

PWA basis

PWA manifest Alex Russell (06-2015)

Familiar Technologies- Responsiveness: CSS3, widgets- On/Offline: cache-manifest, localstorage,

indexedDb ...- App Like Interactions: RIA, SPI, HardW.

API- Fresh: HTTP update- Secure: HTTPS- Linkable: URI, QS, hash-fragment

New Technologies- Connectivity: Service-Workers, HTTP/2- Re-engageable: Push notifications- Discoverable & Installable: manifest.json

- Phonegap○ Not need of a native container any more○ HW access is now possible from browser

What is replacing/killing PWA?

- Native SDKs○ The browser will be the only native App in

devices- O.S. of devices○ Just the kernel and the browser ?

- App stores○ New ways to make money ?

Introducing web components

What are Web Components?- It’s a NEW TAG for your browser

<my-ui-component>- Based on Standard Specifications.

- Advantages:○ No browser plugins just HTML ○ Easy to share: bower & npm○ Framework agnostic○ Multipurpose (UI, Func)

1. Isolationbody {background-color: white;}

Shadow DOM

2. Encapsulation

3. Composition

4. Sharing

1. HTML is the Component Model2.HTML is a powerful Declarative Language

3. The Data flow is simply handled with○ attributes <input value=”foo”>○ properties myInput.value = “foo”○ events myInput.addEventListener(‘foo’, bar)

Web Components is for missing HTML pieces.

DOM is the framework

1. Isolation2. Composition3.Encapsulation

How to build Apps with elements

Mediator patternAn object that encapsulates how a set of other ones interact

What about Polymer

Understanding Polymer- Polymer is a library (not a framework) that allows us

creating and manipulating Web Components, even though some APIs are missing in some browsers.

- Polymer makes easier and faster create anything from a button to a complete application across desktop, mobile, and beyond.

- Polymer platform enables reusing & sharing UI components between developers and frameworks.○ Estable API, useful CLI○ Reliable polyfill: lightweight shim○ Full documented

Production ready platform: library, elements & tools

<!-- Create an element by composition --><dom-module id="input-echo"> <template> <!-- Bidirectional data binding --> <paper-input label="Type your name" value="{{name}}"></paper-input> <!-- One way data binding and function execution --> <div> Your [[field]] is: [[_format(name)]]</div> <!-- Native elements do not have two-way binding support built in, use Polymer's event-observer syntax instead --> <label>Type your name: </label> <input type="text" value="{{name::keyup}}"> </template></dom-module><!-- Register the element and define its data model --><script> Polymer({ is: "input-echo", properties: {field: String, name: String}, _format: function(name) { return name.toUpperCase(); } });</script>

<!-- Use the element --><input-echo field="Surname"></input-element>

PWAs and Polymer

1. Both are built on top of new Standards○PWA & polymer require new browsers

2.Both Focused on simplicity○Easy APIs, CLI tools, scaffolding

3.Framework agnostic.○Application Shell

4.Performance on mind○Reuse & Lightweight

Polymer & Chrome teams working side-by-side

Why Polymer in your PWAs

Standards for Enterprise PWA

Vaadin & web components

Motivations

Motivations Traditional Dev of UI Components- Verbose code- Coupled to Frameworks- Difficult to share- No device in mind

Motivations Traditional Dev of UI Components- Verbose code- Coupled to Frameworks- Difficult to share- No device in mind

New Web Components Dev- Standard specs- Declarative lang- Framework agnostic- Multidevice & Production ready- Active Development

- Google & Vaadin collaboration- Huge community

Vaadin Elements- Vaadin Core elements is an Apache 2.0 licensed

set of web components designed for business applications

- Vaadin Charts A commercial Web Component for high quality charts

Vaadin Tools- polymer-themer (working on)

○replace material design by custom themes (bootstrap, valo)- angular2-polymer v1.0.0-beta2

○ directive factory bridge for using Polymer components in Angular 2 applications.

○angular2-polymer-cli (soon)- gwt-polymer-elements v1.2.3.0

○Enables Polymer Elements to be used in GWT projects○gwt-polymer-api-generator v1.2.1

- vaadin-polymer-components (internal 0.0.1.alpha1)○vaadin-polymer-api-generator (internal)

PWA Demos

Demo architecture

WebComp

Polymer

PouchDB CouchDB

Serv. Worker HTTP/2

IndexedDB

- Expense Managerhttps://github.com/vaadin/expense-manager-demohttps://demo.vaadin.com/expense-manager

- Polymer Robots Chat Roomhttps://wc.demo.vaadin.com/robots/https://github.com/manolo/polymer-robots

Tip: open it in Chrome-Android and from the menu select ‘Add to the home Screen’

Demo links

ThanksManuel Carrasco Moñino

+ManuelCarrascoMoninomanolo@vaadin.com

@dodotis