web components the best marriage for a pwa
TRANSCRIPT
![Page 1: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/1.jpg)
Web Components the best marriage for a PWA
Manuel Carrasco MoñinoSenior GWT Expert
Vaadin Elements Team
![Page 2: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/2.jpg)
About me
![Page 3: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/3.jpg)
Agenda1.Demystifying PWAs2.Introducing web-components and Polymer3.Why use Polymer in PWAs
4. Vaadin Motivations for building web components5. PWA Demos
![Page 4: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/4.jpg)
Demystifying PWAs
![Page 5: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/5.jpg)
- 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
![Page 6: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/6.jpg)
- 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
![Page 7: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/7.jpg)
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
![Page 8: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/8.jpg)
- 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 ?
![Page 9: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/9.jpg)
Introducing web components
![Page 10: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/10.jpg)
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)
![Page 11: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/11.jpg)
1. Isolationbody {background-color: white;}
Shadow DOM
![Page 12: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/12.jpg)
2. Encapsulation
3. Composition
![Page 13: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/13.jpg)
4. Sharing
![Page 14: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/14.jpg)
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
![Page 15: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/15.jpg)
1. Isolation2. Composition3.Encapsulation
How to build Apps with elements
Mediator patternAn object that encapsulates how a set of other ones interact
![Page 16: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/16.jpg)
What about Polymer
![Page 17: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/17.jpg)
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
![Page 18: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/18.jpg)
<!-- 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>
![Page 19: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/19.jpg)
PWAs and Polymer
![Page 20: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/20.jpg)
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
![Page 21: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/21.jpg)
Standards for Enterprise PWA
![Page 22: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/22.jpg)
Vaadin & web components
![Page 23: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/23.jpg)
Motivations
![Page 24: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/24.jpg)
Motivations Traditional Dev of UI Components- Verbose code- Coupled to Frameworks- Difficult to share- No device in mind
![Page 25: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/25.jpg)
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
![Page 26: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/26.jpg)
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
![Page 27: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/27.jpg)
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)
![Page 28: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/28.jpg)
PWA Demos
![Page 29: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/29.jpg)
Demo architecture
WebComp
Polymer
PouchDB CouchDB
Serv. Worker HTTP/2
IndexedDB
![Page 30: Web Components the best marriage for a PWA](https://reader033.vdocument.in/reader033/viewer/2022052514/586f86511a28ab54768b54cf/html5/thumbnails/30.jpg)
- 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