Web components are coming! This presentation gives you a solid intro on web components and why they are the future of the web. After an introduction to the tools and concepts you will see hands-on how easy it is to develop modular web apps with Polymer and Vaadin Components.
4. Motivations
Former Ui Development
- Verbose code
- Difficult to share
- No mobile in mind
Web Components
- Standard specs.
- Prod. ready collections
- Active Development
- Google
- Vaadin
5. 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 DOM
c. Easy to share (bower)
d. Easy to integrate
6. Problem -> DOM unique tree
body { background-color: white; }
16. 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
17. Polymer Elements
A 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 ...
18. 1. It’s NOT a framework but a small library
a. 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
19. 1. HTML is the Component Model
2. … and a powerful Declarative Language
3. 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
22. 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>
23. <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}}">
27. 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.
28. - 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
29. Demo
Checkout the Code (each commit is one step)
http://manolo.github.io/polymer-robots
Run the live App
https://github.com/manolo/polymer-robots
Tip: open it in Chrome-Android and from the menu select ‘Add to the home Screen’
32. - 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
33. Progressive Apps
1. Responsive: to fit any form factor
2. Connectivity independent: Progressively-enhanced
to let them work offline
3. Fresh: Transparently always up-to-date
4. Discoverable: Are identifiable as “applications”
thanks to W3C Manifests
5. Installable: to the home screen through browser-
provided prompts
6. Linkable: zero-install, and easy to share.
34. Additional tools
api-generator: It’s a code generator to produce GWT
wrappers & Vaadin Connectors, for JS components.
a. Scrapes source documentation
b. 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.