This document introduces the Vaadin framework, which is a user interface framework for building rich web applications. It discusses how Vaadin enables developer productivity through features like user interface components, automated communication between the client and server, and support for multiple devices. The document also covers trends in web frameworks like AngularJS and web components, and how Vaadin is exploring these trends through new components in Vaadin Labs and building web components with GWT.
10. 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
+
+
75. 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? โ
78. 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));
}
}
79. 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));
}
}
80. 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));
}
}
81. 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));
}
}
82. 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));
}
}
83. 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));
}
}
84. <v-grid>
Sass API for theme engine
<v-component> / JS API
GWT
API
Java Server
Automatic
communication
API
AngularJS
API
85. Autogenerated
<v-grid>
Sass API for theme engine
<v-component> / JS API
AngularJS GWT
API
Java Server
Automatic
communication
API
Polymer
JavaScript
GWT Element
Java
GWT Element
GWT Widget
Java
API
97. vaadin-widgets-7.4.0.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/downloadbeta or Maven