Location: Progressive Web App Dev Summit, GDG Madrid 21-Jul-2016 Abstract: Progressive Web Apps (PWA) have responsive layout, works offline, and can be on the home screen. WebComponents allows build all those missing HTML pieces. Polymer is a library for manipulating Web Components. This presentation joins all those new technologies for creating the Future Apps.

1. Web Components the
best marriage for a PWA
Manuel Carrasco Moñino
Senior GWT Expert
Vaadin Elements Team

2. About me

3. Agenda
1.Demystifying PWAs
2.Introducing web-components and Polymer
3.Why use Polymer in PWAs
4. Vaadin Motivations for building web components
5. PWA Demos

4. Demystifying PWAs

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

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

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

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

9. Introducing web
components

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

11. 1. Isolation
body {background-color: white;}
Shadow DOM

12. 2. Encapsulation
3. Composition

13. 4. Sharing

14. 1. HTML is the Component Model
2.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

15. 1. Isolation
2. Composition
3.Encapsulation
How to build Apps with elements
Mediator pattern
An object that encapsulates
how a set of other ones
interact

16. What about Polymer

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

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

19. PWAs and Polymer

20. 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
Why Polymer in your PWAs

21. Standards for Enterprise PWA

22. Vaadin & web components

23. Motivations

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

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

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

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

28. PWA Demos

29. Demo architecture
WebComp
Polymer
PouchDB CouchDB
Serv. Worker HTTP/2
IndexedDB

30. - Expense Manager
https://github.com/vaadin/expense-manager-demo
https://demo.vaadin.com/expense-manager
- Polymer Robots Chat Room
https://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

31. Thanks
Manuel Carrasco Moñino
+ManuelCarrascoMonino
manolo@vaadin.com
@dodotis