KEMBAR78
Vaadin & Web Components | PDF
Vaadin
X @joonaslehtinen
Founder & CEO



and

Web Components
Introduction to
Vaadin Framework
User interface
framework for rich
web applications
User Interface
Components
Developer
Productivity
Rich
UX
htmljava
What kind of devices does your app support?
98.1%
3Desktop
browsers
Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
s
your app
support?
25.7%
Phones
36.1%
O
thers2.1%
“Since gw
in
the enterp
explain
why tab
popular than
supp
phones”
Daniel
iPhone
Android
W
P
pplication
UI for
r 98%
of apps
overtaken
the
num
ber
rope.
36.1%
Tablets
“Since
gwt is used
extensi
in
the
enterprise, this m
explain
why tablets
popular than
su
phones”
iPadAndroid
W
indow
s
+
+
How does server-side
UI work, really?
• Initial HTML
• CSS (theme)
• Images
• JavaScript
1.2M total

307k
compress
135k
reduced
widgetset
• name=”Joonas”
• button clicked
261 bytes

• name=”Joonas”
• button clicked
261 bytes
• Add notification
267 bytes

Trends changing
Web Frameworks
Client -
Model View Whatever

Disruptive trend today
AngularJS
GWT
AngularJS:
Spreadsheet
for HTML
<input type="text"
ng-model="yourName">
<h1>Hello {{yourName}}!</h1>
=SUM(A1:A100)
<input type="text"
ng-model="yourName">
<h1>Hello {{yourName}}!</h1>
=SUM(A1:A100)
Enables
designers
to build
web prototypes
Enables
business people
to build
financial "apps"
"Designed by
a developer"
Design
driven
Developer productivity


Powerful testing
Web Components
The next disruptive trend?
<x-gangnam-style>
</x-gangnam-style>
<x-component></x-component>
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var div = document.createElement('div');
div.textContent = 'This is Custom Element';
this.appendChild(div);
};
var XComponent = document.registerElement('x-component', {
prototype: proto
});
var host = document.querySelector('#host');
var root = host.createShadowRoot(); // Create a Shadow Root
var div = document.createElement('div');
div.textContent = 'This is Shadow DOM';
root.appendChild(div); // Append elements to the Shadow Root
index.html
<link rel="import" href="component.html" >
component.html
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<template id="template">
<style>
...
</style>
<div>
<h1>Web Components</h1>
<img src="http://webcomponents.org/img/logo.svg">
</div>
</template>
<script>
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
var host = document.querySelector('#host');
host.appendChild(clone);
</script>
<div id="host"></div>
??disruptive
Simplification
Reusability
Robustness
Enables
developers & designers
to build UIs that would
otherwise be too hard or
expensive
Component oriented web frameworks
Statically typed Java
Components
Automated Communication
Statically typed Java
Components
Statically typed Java
Automated Communication
Statically typed Java
Disruption
Opportunity :)
Vaadin Components
C
Demos
</v-grid></v-slider> </v-progress-bar>
Vaadin Components 0.1
<v-grid><v-slider> <v-progress-bar>
<v-grid>
Super fast
lazy loading
rendering engine
Mobile friendly
Complex headers and footers
Renderers
Vaadin Labs
• stuff is still experimental
• timeline is not set
Automated Communication
Statically typed Java
Components
Automated Communication
Statically typed Java
Components
Framework
Components web
<v-grid>
Sass API for theme engine
<v-component> / JS API
GWT
API
Java Server
Automatic
communication
API
AngularJS
API
<v-absolute-layout id="absoluteLayout">
<v-label id="label" size-auto="true" :top="0px" :left="21px">
<h3>Edit customer</h3>
</v-label>
<v-form-layout id="formLayout" margin="" :top="69px" :right="22px" :left="20px">
<v-text-field caption="First name" id="firstName" width-full="true"></v-text-field>
<v-text-field caption="Last name" id="lastName" width-full="true"></v-text-field>
<v-text-field caption="Email" required="true" id="email"></v-text-field>
<v-popup-date-field caption="Birth day" id="birthDay"></v-popup-date-field>
<v-native-select caption="Status" id="status"></v-native-select>
</v-form-layout>
<v-horizontal-layout spacing="true" id="horizontalLayout" width-full="true"

:right="22px" :bottom="17px" :left="20px">
<v-button style-name="primary" id="save" plain-text="">Save</v-button>
<v-button id="cancel" plain-text="">Cancel</v-button>
<v-button style-name="FontAwesome" id="delete" plain-text="":expand="">!</v-button>
</v-horizontal-layout>
</v-absolute-layout>
design.html Framework
design.html Framework
Designer
design.html Framework
ComponentsDesigner
design.html Framework
ComponentsDesigner
Not if, but when?
Do web components
actually work?
Custom Elements
Support by browser market share
Shadow DOM
Support by browser market share
HTML Import
Support by browser market share
HTML Template
Support by browser market share
Summary
Only works in blink
Custom Element
HTML Template
Shadow DOM
HTML Import
CHROME OPERA FIREFOX SAFARI IE
Do web components
actually work?
No, but Yes :)
webcomponents.js
Polyfill
http://webcomponents.org/polyfills/
Web Components
Custom Elements
HTML Imports
Shadow DOM
DOM
WeakMap
Mutation Observers{
Timeline
When could you really use web components
With full CSS sandbox (native)
Evergreen browsers (polyfilled)
Old browsers

IE <10, Safari <6, < latest iOS/FF/Chrome/Android
Today Soonish? ∞
Building Web Components
With Polymer
<my-counter counter="10">Points</my-counter>
<polymer-element name="my-counter" attributes="counter">
<template>
<style> /*...*/ </style>
<div id="label"><content></content></div>
Value: <span id="counterVal">{{counter}}</span><br>
<button on-tap="{{increment}}">Increment</button>
</template>
<script>
Polymer({
counter: 0, // Default value
counterChanged: function() {
this.$.counterVal.classList.add('highlight');
},
increment: function() {
this.counter++;
}
});
</script>
</polymer-element>
Building Web Components
With GWT
<v-grid>

193 files
32 kLOC

17 months

5 persons
No human sacrifices ;)

</v-grid>
Elements.registerElement("v-grid", new WCVGrid());
@JsExport
@JsType
public class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached {
private Grid<JsArrayMixed> grid = new Grid<>();
@Override
public void attachedCallback() {
HTMLShadow shadow = createShadowRoot();
shadow.appendChild(style);
shadow.appendChild(container);
Panel shadowPanel = wrapAsWidget(container);
shadowPanel.add(grid);
}
@JsProperty
public void setDataSource(JavaScriptObject jso) {
grid.setDataSource(wrapJsoDataSource(jso));
}
}
Elements.registerElement("v-grid", new WCVGrid());
@JsExport
@JsType
public class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached {
private Grid<JsArrayMixed> grid = new Grid<>();
@Override
public void attachedCallback() {
HTMLShadow shadow = createShadowRoot();
shadow.appendChild(style);
shadow.appendChild(container);
Panel shadowPanel = wrapAsWidget(container);
shadowPanel.add(grid);
}
@JsProperty
public void setDataSource(JavaScriptObject jso) {
grid.setDataSource(wrapJsoDataSource(jso));
}
}
Elements.registerElement("v-grid", new WCVGrid());
@JsExport
@JsType
public class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached {
private Grid<JsArrayMixed> grid = new Grid<>();
@Override
public void attachedCallback() {
HTMLShadow shadow = createShadowRoot();
shadow.appendChild(style);
shadow.appendChild(container);
Panel shadowPanel = wrapAsWidget(container);
shadowPanel.add(grid);
}
@JsProperty
public void setDataSource(JavaScriptObject jso) {
grid.setDataSource(wrapJsoDataSource(jso));
}
}
Elements.registerElement("v-grid", new WCVGrid());
@JsExport
@JsType
public class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached {
private Grid<JsArrayMixed> grid = new Grid<>();
@Override
public void attachedCallback() {
HTMLShadow shadow = createShadowRoot();
shadow.appendChild(style);
shadow.appendChild(container);
Panel shadowPanel = wrapAsWidget(container);
shadowPanel.add(grid);
}
@JsProperty
public void setDataSource(JavaScriptObject jso) {
grid.setDataSource(wrapJsoDataSource(jso));
}
}
Elements.registerElement("v-grid", new WCVGrid());
@JsExport
@JsType
public class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached {
private Grid<JsArrayMixed> grid = new Grid<>();
@Override
public void attachedCallback() {
HTMLShadow shadow = createShadowRoot();
shadow.appendChild(style);
shadow.appendChild(container);
Panel shadowPanel = wrapAsWidget(container);
shadowPanel.add(grid);
}
@JsProperty
public void setDataSource(JavaScriptObject jso) {
grid.setDataSource(wrapJsoDataSource(jso));
}
}
Elements.registerElement("v-grid", new WCVGrid());
@JsExport
@JsType
public class WCVGrid extends HTMLElement.Prototype implements LifeCycle.Attached {
private Grid<JsArrayMixed> grid = new Grid<>();
@Override
public void attachedCallback() {
HTMLShadow shadow = createShadowRoot();
shadow.appendChild(style);
shadow.appendChild(container);
Panel shadowPanel = wrapAsWidget(container);
shadowPanel.add(grid);
}
@JsProperty
public void setDataSource(JavaScriptObject jso) {
grid.setDataSource(wrapJsoDataSource(jso));
}
}
Autogenerated
<v-grid>
Sass API for theme engine
<v-component> / JS API
AngularJS 2 GWT
API
Java Server
Automatic
communication
API
Polymer
JavaScript
GWT Element
Java
GWT Element
GWT Widget
Java
API
Getting started
Designer
Vaadin Labs
vaadin.com/labs
Elements
Vaadin Labs
vaadin.com/labs
Components
Vaadin Labs
vaadin.com/labs
vaadin-components-0.1.2.zip
• vaadin-components.js
• Polymer HTML fies
• GWT API wrappers
• AngularJS support
Read more at http://vaadin.com/labs
experim
ental
Bower vaadin-components
• vaadin-components.js
• Polymer HTML fies
• AngularJS support
Read more at http://vaadin.com/labs
experim
ental
cdn.vaadin.com
• vaadin-components.js
• Polymer HTML fies
• AngularJS support
Read more at http://vaadin.com/labs
experim
ental
github.com/vaadin/components
• 0.2 expected in April
• First stable version that has full Grid API
• We plan to add components to project one by one
developm
ent
vaadin-widgets-7.4.1.jar
• Grid Widget API
• Stable and supported
• Wide browser support
• IE8+
• All the modern ones: FF, Chrome, iOS, Android, …
• Example: https://github.com/Artur-/grid-gwt
Get from http://vaadin.com/downloadstable or Maven
@joonaslehtinen
Founder & CEO
joonas@vaadin.com
slides
slideshare.com/joonaslehtinen
feel free to reuse :)

Vaadin & Web Components