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