Intro to Web Components, Polymer & Vaadin Elements

Intro to Web Components, Polymer & Vaadin Elements

Manuel Carrasco MoñinoSenior GWT Expert at Vaadin

1. Motivations2. What are web components.3. What’s polymer.4. Introducing Polymer-Elements & Vaadin-Elements5. Demo: full-stack app using Polymer6. Progresive apps

Agenda

Demo

220 LOChttp://manolo.github.io/polymer-robots

MotivationsFormer Ui Development

- Verbose code- Difficult to share- No mobile in mind

Web Components- Standard specs.- Prod. ready collections- Active Development

- Google- Vaadin

What are Web Components?

1. It’s a new TAG for your browser ‘<my-ui-component>’

2. Based on standard specifications.3. Advantages:

a. Goodbye to browser plugins (WC + HTML5)

b. Isolated from other elemens in DOMc. Easy to share (bower)d. Easy to integrate

Problem -> DOM unique treebody { background-color: white; }

Solution -> Shadow/Shady DOM

body { background-color: white; }

Encapsulation

Composition

Community

Web ComponentsState of the art

Browser support

Polyfill

Activity

What’s Polymer

Polymer- Polymer is a library that allows us to use Web

Components, even though some APIs for 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 sharing UI components between developers.

- JS: estable API - polyfills: lightweight shim for Web Components.- Documentation system- Production ready components

Polymer ElementsA catalog of ready to use elements built with polymer:

- Iron Elements (layout, ajax, icons …)- Paper Elements (Material Design)- Neon Elements (Animations)- Gold Elements (Ecomerce)- Platinum Elements (offline, push …)- Google Elements (google apis)- Vaadin Core Elements (enterprise

components)- Vaadin Chart Elements (charts)- And much more ...

1. It’s NOT a framework but a small librarya. polymer-micro.html (16K - 7K) b. polymer-mini.html (54K - 11K)c. polymer.html (122K - 29K)

2. Polymer Elements are not part of the library, but developed by the team and contributions.

3. Neither the optional Polyfill is part of it.a. webcomponents-lite.min.js (40K - 12K) b. webcomponents.min.js (118K - 33K)

Polymer is the library

1. HTML is the Component Model2. … and a powerful Declarative Language3. Data flow is handled with

a. attributes <input value=”foo”>

b. properties myInput.value = “foo”

c. events myInput.addEventListener(‘foo’, bar)

4. Web Components is for missing HTML pieces.5. Polymer facilitates creating and manipulating them.

DOM is the framework

1. Composition2. Encapsulation3. Mediator pattern

An object that encapsulates how a set of objects interact

Build Apps with elements

Using Polymer

Polymer: data-binding<!-- 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 with function execution --> <div>Your name 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 --><script> Polymer({ is: "input-echo", _format: function(name) { return name.toUpperCase(); } });</script>

<input-echo value="Manolo">

Polymer: bound directions

<input-echo value="{{name}}">

<div>Your name is: [[_format(name)]]</div>

<paper-input value="{{name}}">

<input value="{{name::keyup}}">

Polymer: events, observers, notifiers<dom-module id="input-echo"> <template> ... <div on-tap="_onTap">Your name is: [[_format(name)]]</div> ... </template></dom-module>

<script> Polymer({ is: "input-echo", ... properties: { foo: { type: Object, notify: true, reflectToAttribute: true, value: {} } }, observers: [ '_onChange(foo.*)' ], _onTap: function(e) { this.set('foo.bar', this.name); }, _onChange: function(path, object) { this.fire('foo-changed-event', this.foo); } });</script>

let’s build a Progressive Full-stack Application

Architecture

Elements

Polymer

PouchDB CouchDB

- Responsive- Material Design- Online/Offline- Real Time

Components

- PolymerElements & VaadinCoreElements - Polymer platform- CouchDB is a database that completely embraces

the web. - Store your data with JSON documents- Access your data via HTTP- Serve pages directly

- PouchDB is database inspired by Apache CouchDB that is designed to run well within the browser.

- atom: just another text editor. It’s built on top of Chrome by github.

- node.js: a JS runtime based on V8 the Chrome JS engine

- npm: the node package manager- gulp: a make like for javascript projects- bower: a dependency manager for web projects- git: npm and bower packages and stored in git

repos.

Usual Tools for Polymer

Demo

Checkout the Code (each commit is one step)http://manolo.github.io/polymer-robots

Run the live Apphttps://github.com/manolo/polymer-robots

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

Install tools video

What else?

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

- It is different from a ‘classic hybrid app’, which is an HTML5 application contained in a native wrapper installed from an app store.

- Polymer is perfect for modularize and hidde stuff inside web components (web-workers, localstorage, database access, offline cache …)

- Try to

Progressive Apps

Progressive Apps1. Responsive: to fit any form factor2. Connectivity independent: Progressively-enhanced

to let them work offline3. Fresh: Transparently always up-to-date4. Discoverable: Are identifiable as “applications”

thanks to W3C Manifests5. Installable: to the home screen through browser-

provided prompts6. Linkable: zero-install, and easy to share.

Additional toolsapi-generator: It’s a code generator to produce GWT wrappers & Vaadin Connectors, for JS components.

a. Scrapes source documentationb. Right now polymer, but considering other sources.c. Uses standard JS libraries to parse components.

- node.js, npm, bower, gulp- hydrolysis parser + lodash.template

JsInterop: GWT Export java code and use JS without boiler-plate.

Thanks

Manuel Carrasco Moñino+ManuelCarrascoMonino

manolo@vaadin.com@dodotis