7
Vaadin
introduction to
@joonaslehtinen
Founder & CEO

Intro to
Vaadin
“Hello world”)
new Label(

New in
7

Getting
started
QA

User interface
framework for rich
web applications

Sounds like GWT?
Kinda…

Building blocks

Developer
Productivity
Rich
UX

java
html

123
Key Ideas

1
Rich
Components

User Interface
Data Source
Theme

s
3
3.5 Browsers to support in 2012
yo
ur
ap
Desktop
3.5 Browsers to support in 2012
browsers
pp
p
su
lic
pp
at
r 9 io n
or
t?
8% U
I fo
ov of
er ap r
th take ps
e
nu n
ro
pe mb
er
.
36
.1%
6/7
IE 6/7
6/7
Opera
Safari
14%
IE 6/7
14%
Ta
bl
et
s
18%
9
10
36%
36%
18%
Safari
IE 9
79%
79%
9
98.1%
IE 10
80%
80%
10
2.
O
Opera
th
er
Chrome
s
1%
94%
iP
ad
94%
An
3
W dr6
in o.1
do id%
“S
w What kind of devices does yourh app support?
in ince
ex t e gw
s
po plai ent t is
8
ph pul n w erp us
e
r
a
h
IE 9
IE 10
Browsers developers expect to support in 2013
Browsers developers expect to support in 2013
on r
is
d
es tha y ta e, t ex
”
n ble his ten
su ts
m si
Chrome
in
8
54%
54%
IE 8
Firefox
Ph
on
es
94% iPh
A
94%nd one
2
Firefox
inc
e
ex the gw
po plain ente
ph pula wh rp
on r t y t
es ha ab
n
”
su
pp
8
IE 8
“S
W 5 ro
P .7 id
8%
Da
ni
el

350+ add-on
components

User Interface
Data Source
Theme

User Interface
Data Source
Theme

InMemory, Bean, Method,
Collection, JDBC, JPA, Hibernate,
TextFile, FileSystem, Properties,
EclipseLink, Lucene, Mockups,
GAE, ...

2
Server + Client

Web application layers
Backend
server
Web
server
Communication
JavaScript

Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
required
required
optional
required
required
required
required

Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
1 layer
required
vs
required
3 layers
-50% codelines
-50% development
required
required
-50% maintenance
easier to learn
required
required
optional

Server-side
Client-side GWT-RPC
Client-side Vaadin-RPC
First name
Last name
Phone number
Table cell
Table cell
Server-side
Email address
Table cell
Offline
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Far far away, behind the
far from the countries Vok
Consonantia, there live th
Separated they live in Bo
right at the coast of the S
large language ocean.
Table cell
Edit
First name
Phone number
Delete
New
Last name
Email address
Save
Cancel
A small river named Dude
place and supplies it with
regelialia. It is a paradise
which roasted parts of se
your mouth.
Even the all-powerful Poi
control about the blind tex
almost unorthographic life
however a small line of b
name of Lorem Ipsum de
for the far World of Gram
Oxmox advised her not to
because there were thou
Commas.

Server-side!
(with Vaadin)
Client-side!
(with GWT-RPC)
AddressbookEditor
~270loc
implements
Proxy
0loc
(generated)
Client
ServiceAsync
Server
AddressbookEditor
17loc
~150loc
68loc
RPCServlet
Frontend
equal
Service
implements
Backend
Address
AddressbookBackend
Impl
19loc

How does it work,
really?

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

• name=”Joonas”
• button clicked
!
261 bytes

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

Development cycle

Source
https://github.com/vaadin/documentmanager
HOWTO Screencast
https://vaadin.com/learn

3
Embracing
Java

Any language
on JVM

Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android

No
browser
plugins
!
Nothing to
install

Servlet
Portlet
(most) clouds

Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
ŁŁŁ

Vaadin += GWT
1/7

GWT
Compatible

ity
tiv
or
df
ize
tim uc
Op
od
Pr
O
tim
p
fo
ed
iz
e rol
d ont
i C
s
r
e
v
r
e
S
r
tien
Cl

Architecture

Bleeding
edgE

Renewed
from Inside
JS
Sass
HTML5
+=
GWT
sh
RPC
State
Pu
Complete
stack
UI
Field

vaadin.com/7

Demo
Sass
Syntactically Awesome Stylesheets

JavaScript
Add-ons

Publish API from Java
getPage().getJavaScript().addFunction("myCallback",
new JavaScriptCallback() {
public void call(JSONArray arguments) throws JSONException {
// Do something with the arguments
}
});
Use from JavaScript
window.myCallback('foo', 100);

Server-side Java API for Widget
!
public class MyWidget extends AbstractJavaScriptComponent {
public MyWidget() {
addFunction("plotClick", new JavaScriptFunction() {
public void call(JSONArray arguments) throws JSONException {
// Do something with the event
}
});
}
!
public static class MyWidgetState extends JavaScriptComponentState {
public List<List<List<Double>>> plotSeriesData =
new ArrayList<List<List<Double>>>();
}
public MyWidgetState getState() { return (MyWidgetState) super.getState(); }
!
!
}

Widget implementation in JavaScript
window.com_example_MyWidget = function() {
var element = $(this.getWidgetElement());
// Draw a plot for any server-side (plot data) state change
this.onStateChange = function() {
$.plot(element, this.getState().series, {grid: {clickable: true}});
}
!
// Communicate local events back to server-side component
element.bind('plotclick', function(event, point, item) {
if (item) {
var onPlotClick = this.getCallback("plotClick");
onPlotClick(item.seriesIndex, item.dataIndex);
}
});
}

Server Push

@Push MyUI
!
!
<async-supported/>
!
!
vaadin-push dependency

RPC
State

7
Demo
Widget
Connector
client
server
State
RPC
Component

getting
started

Eclipse
Download plugin
from Martketplace

IntelliJ IDEA
Built-in support

Netbeans
Download plugin
Netbeans Plugin Portal

Maven
mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=
7.1.9

Download for Free
vaadin.com/book
-93-
1970
-1
01
728 pages
PDF, ePub, HTML

Apache
License

community of
~100.000
developers
Ohloh
#2 used
Java Web
Framework

Hybrid Applications
!
Theming Workshop
!
Vaadin Intro Workshop
1:30pm

?
slideshare.com/
joonaslehtinen
joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen