Vaadin
7introduction
@henrimuurimaa
SVP, Engineering

Intro to
Vaadin
new Label(“Hello world”)

What’s
new
Getting
started
QA

User interface
framework for rich
web applications

htmljava

Server-
Client-
side
Optim
izedfor
Productivit
Optim
izedfor
Control

Building blocks

123Key Ideas

1Rich
Components

User Interface
Data Source
Theme

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

500+ add-on
components

User Interface
Data Source
Theme

Grid
Form
Text field

Grid
Form
Text field

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

User Interface
Data Source
Theme

$v-background-color: #000;
$v-focus-color: #ffa500;
$v-font-size: 15px;
$v-font-weight: 600;
$v-unit-size: 42px;
$v-bevel: false;
$v-shadow: false;
$v-gradient: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-border-radius: 0;
$v-border: 22px solid v-tone;
$v-overlay-shadow: 0 0 0 2px (v-tint 10);
$v-focus-style: $v-focus-color;
$v-font-family: "Lato", sans-serif;
$v-font-weight--header: 600;

demo.vaadin.com/valo-theme

2Server + Client

Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript

Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript
Client-side UI

Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript
Server-side UI Automated

Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
requiredrequired
JS
required required

Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required

Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
nication
optional
Vaadin
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required

Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
nication
optional
Vaadin
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required
1 layer
vs
3 layers
-50% dev. time
-50% maintenance
vs
full control over DOM
and communications

Google
http://domain.com
Web Page Title
First name
Table cell
Table cell
Phone number
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
Last name
Table cell
Table cell
Email address
Table cell
Table cell
Far far away, behind the word mountains,
far from the countries Vokalia and
Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove
right at the coast of the Semantics, a
large language ocean.
A small river named Duden flows by their
place and supplies it with the necessary
regelialia. It is a paradisematic country, in
which roasted parts of sentences fly into
your mouth.
Even the all-powerful Pointing has no
control about the blind texts it is an
almost unorthographic life One day
however a small line of blind text by the
name of Lorem Ipsum decided to leave
for the far World of Grammar. The Big
Oxmox advised her not to do so,
because there were thousands of bad
Commas.
Server-side
Offline
Client-side Vaadin-RPC
Client-side GWT-RPC
Server-side
Edit Delete New
Save Cancel
First name Last name
Phone number Email address
https://github.com/jojule/hybrid

AddressbookBackendAddress Impl
Backend
Frontend
Server-side
(with Vaadin)
Client-side
(with GWT-RPC)
AddressbookEditor
AddressbookEditor
RPCServlet Service
ServiceAsync
View
Connector
Client
Server
Proxy
(generated)
create
place
implements
implements
equal

How does server-side
UI work, really?

• Initial HTML
• CSS (theme)
• Images
• JavaScript
135k
reduced
widgetset

• name=”Joonas”
• button clicked
261 bytes

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

So Vaadin is server-side -
does it scale?
QuickTickets
• A fictitious movie tickets sales system
• Vaadin, Spring, Tomcat, MySQL, EhCache, Memcached
• Deployed in AWS
• Tested with JMeter
www.vaadin.com/blog/-/blogs/vaadin-scalability-study-quicktickets

Test results
20,622 AJAX requests / minute before exceeding
1% rejected connections
MPAA reports 1,34 billion US
movie tickets sold in 2013.
~2,550 tickets / minute.
5,496 tickets / minute
~11,000 concurrent users
On a single Amazon EC2
Large instance

Scaling up

Demo

3Embracing
Java

Any language
on JVM

Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android

Servlet
Portlet
Clouds
· · ·
Anything Java

Eclipse
IntelliJ IDEA
Netbeans
Maven / Gradle / Ant / SBT
· · ·
Anything Java

Java EE
Spring
OSGi
REST
· · ·
Anything Java

JavaScript
Integration

Server Push

> 130.000 developers from
> 10.000 cities
> 500 add-ons in the
marketplace
Other
4%Asia
20%
Americas
22%
Europe
54%
Open Source community
Apache-licensed

Who is using
Vaadin?
worldofwebapplications
Giants named HTML5 and JVM p.4 · Coffee with R&D: Turning Java into Java p.28
Moleculenix,
Rums, SentiOne
and many more...
https://vaadin.com/who-is-using-vaadin
https://vaadin.com/dock

Commercial support
available
Training, consulting, UI development

getting
started

Eclipse
Download plugin
from Martketplace

IntelliJ IDEA
Built-in support

Netbeans
Download plugin
Netbeans Plugin Portal

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

Download for Free
vaadin.com/book
PDF, ePub, HTML

? @henrimuurimaa
henri@vaadin.com
Thank you!
Don’t forget to rate the talk:
www.gwtcreate.com/agenda