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.

1. Vaadin
X @joonaslehtinen
Founder & CEO

2. Introduction to
Vaadin Framework

3. User interface
framework for rich
web applications

4. User Interface
Components

5. Developer
Productivity
Rich
UX

6. htmljava

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
+
+

11. How does server-side
UI work, really?

13. • Initial HTML
• CSS (theme)
• Images
• JavaScript
1.2M total
307k
compress
135k
reduced
widgetset

15. • name=”Joonas”
• button clicked
261 bytes

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

18. Trends changing
Web Frameworks

19. Client -
Model View Whatever
Disruptive trend today

21. AngularJS
GWT

22. ??

23. AngularJS:
Spreadsheet
for HTML

24. <input type="text"
ng-model="yourName">
<h1>Hello {{yourName}}!</h1>
=SUM(A1:A100)

25. <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"

26. "Designed by
a developer"
Design
driven

27. Developer productivity
Powerful testing

28. Web Components
The next disruptive trend?

30. <x-gangnam-style>
</x-gangnam-style>

32. ??disruptive

33. Simplification
Reusability
Robustness

34. Enables
developers & designers
to build UIs that would
otherwise be too hard or
expensive

35. Component oriented web frameworks

36. value
proposition
Statically typed Java
Components
Automated Communication
Statically typed Java
Components

37. Statically typed Java
Automated Communication
Statically typed Java

39. Disruption

40. Opportunity :)

41. Vaadin Components
C

42. </v-grid></v-slider> </v-progress-bar>
Vaadin Components 0.1
<v-grid><v-slider> <v-progress-bar>

50. <v-grid>
Super fast
lazy loading
rendering engine
Mobile friendly
Complex headers and footers
Renderers

51. Vaadin Labs
• stuff is still experimental
• timeline is not set

52. Automated Communication
Statically typed Java
Components

53. Automated Communication
Statically typed Java
Components
Framework
Components web

54. <v-grid>
Sass API for theme engine
<v-component> / JS API
GWT
API
Java Server
Automatic
communication
API
AngularJS
API

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

57. design.html Framework

61. design.html Framework
Designer

62. design.html Framework
ComponentsDesigner

63. design.html Framework
ComponentsDesigner

64. Not if, but when?

65. Do web components
actually work?

67. HTML Template
Support by browser market share

68. Custom Elements
Support by browser market share

69. Shadow DOM
Support by browser market share

70. HTML Import
Support by browser market share

71. Summary
Only works in blink
Custom Element
HTML Template
Shadow DOM
HTML Import
CHROME OPERA FIREFOX SAFARI IE

72. Do web components
actually work?
No, but Yes :)

73. webcomponents.js
Polyfill
http://webcomponents.org/polyfills/
Web Components
Custom Elements
HTML Imports
Shadow DOM
DOM
WeakMap
Mutation Observers{

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? ∞

76. Building Web Components
With GWT

77. <v-grid>
193 files
32 kLOC
17 months
5 persons
No human sacrifices ;)
</v-grid>

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

86. github.com/vaadin/components

87. Getting started

88. Designer

89. Vaadin Labs
vaadin.com/labs

90. Elements

91. Vaadin Labs
vaadin.com/labs

92. Components

93. Vaadin Labs
vaadin.com/labs

94. vaadin-components-0.1.0.zip
• vaadin-components.js
• Polymer HTML fies
• GWT API wrappers
• AngularJS support
Read more at http://vaadin.com/labs
experim
ental

95. Bower vaadin-components
• vaadin-components.js
• Polymer HTML fies
• AngularJS support
Read more at http://vaadin.com/labs
experim
ental

96. cdn.vaadin.com
• vaadin-components.js
• Polymer HTML fies
• AngularJS support
Read more at http://vaadin.com/labs
experim
ental

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

98. @joonaslehtinen
Founder & CEO
joonas@vaadin.com
slides
slideshare.com/joonaslehtinen
feel free to reuse :)