Embed Size (px)
Citation preview
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
