Web Components Meetup 2017 - Amsterdam

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

2. About me

3. Agenda
1. Motivations
2. Demystifying and Understanding PWAs
3. Introducing web-components and Polymer
4. Why use Polymer in PWAs

5. Vaadin Motivations
Former UI Components
- Verbose code
- Coupled to FW
- Difficult to share
- No device in mind

6. Vaadin Motivations
Web Components
- Standard specs
- Declarative
- FW agnostic
- Multidevice
- Active Development
- Google, Vaadin, etc
- Huge community

7. Why PWA

8. Why Web Components

9. Introduction to PWAs

10. - A web application that has a responsive
layout, works offline and can be installed on
the home screen of a device.
- Uses modern web capabilities to deliver an
app-like user experience.
- different to ‘classic hybrid app’, an HTML5
application contained in a native wrapper installed
from an app store.
Progressive Apps

11. - PWAs are being regarded with caution and confusion.
- Lots of backlash on the Internet about people not liking
that PWA’s 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 PWA’s

12. - More than a set of technologies or tools, PWA’s 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.
Reality

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

14. Characteristics of PWAs

15. App Shell

16. - Give quick feedback to the user
- App shell
- Download the minimal stuff in the first screen
- First user interaction
- Progressive enhance the view
- Cache stuff while idle
- Service workers
- HTTP2 push
Fast Loading

17. Responsive and App Like

18. Offline first

19. - Runs in its own script context, no DOM access.
- Not tied to pages, works in the background
- Desktop: When browser is opened or minimised.
- Mobile: Can wake up the browser
- HTTPS is Mandatory
- Use cases
- Intercept Network -> Content Caching.
- Offline start -> Replace HTML5 AppCache
- Background features such as push messaging and background
synchronization
Offline: Service Workers

20. Offline: Data
- Offline View
- Detect Network status
- Use Local Storage
- Manual synchronisation
- Out-of-the-box solutions
- PouchDb + CouchDb
- Firebase

21. Installable

22. Installable

23. - Centralized JSON file with the
metadata associated with a web
application.
- It is the key for defining installable
apps.
Installable: The W3C manifest.json

24. - State of the Art:
- Service-workers Chrome, FF
- Web App manifest Chrome
- Native Install banners Chrome
- Alternatives:
- Application cache for non ServWorkers browsers
- Manually add to home screen or use phonegap
Installable & Offline apps

25. - Phonegap
- Not need of a native container any more
- HW access is now possible from browser
What is replacing/killing PWA?
- Native SDKs
- Browser might be the only native App in devices
- O.S. of devices
- Just the kernel and the browser ?
- App stores
- New ways to make money ?

26. Web Components & Polymer

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

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

29. 2. Encapsulation
3. Composition

30. 4. Sharing

31. 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)
DOM is the framework
Web Components is for missing HTML pieces.

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

33. What about Polymer

34. 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
- Polymer platform enables reusing & sharing UI
components
- Estable API, helpful CLI
- Good Polyfill
- Well documented
Production ready platform: library, elements & tools

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

36. PWAs and Polymer

37. 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.
4. Performance on mind
➠ Lightweight
➠ #useThePlatform
Why Polymer in your PWAs
Polymer & Chrome teams working side-by-side

38. Standards for Enterprise PWA

39. Vaadin & web components

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

41. PWA Demos

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

43. - Expense Manager
https://demo.vaadin.com/expense-manager
https://github.com/vaadin/expense-manager-demo
- 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

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