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.

1. Intro to Web Components,
Polymer & Vaadin Elements
Manuel Carrasco Moñino
Senior GWT Expert at Vaadin

2. 1. Motivations
2. What are web components.
3. What’s polymer.
4. Introducing Polymer-Elements & Vaadin-Elements
5. Demo: full-stack app using Polymer
6. Progresive apps
Agenda

3. Demo
220 LOC
http://manolo.github.io/polymer-robots

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; }

7. Solution -> Shadow/Shady DOM
body { background-color: white; }

8. Encapsulation

9. Composition

10. Community

11. Web Components
State of the art

12. Browser support

13. Polyfill

14. Activity

15. What’s Polymer

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

20. 1. Composition
2. Encapsulation
3. Mediator pattern
An object that
encapsulates how a set of
objects interact
Build Apps with elements

21. Using Polymer

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}}">

24. 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>

25. let’s build a
Progressive Full-stack Application

26. Architecture
Elements
Polymer
PouchDB CouchDB
- Responsive
- Material Design
- Online/Offline
- Real Time

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’

30. Install tools video

31. What else?

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.

35. Thanks
Manuel Carrasco Moñino
+ManuelCarrascoMonino
manolo@vaadin.com
@dodotis