Intro to Web Components, Polymer & Vaadin Elements
-
Upload
manuel-carrasco-monino -
Category
Software
-
view
841 -
download
4
Transcript of 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.