1.
Vaadin
7introduction
@henrimuurimaa
SVP, Engineering

2.
Intro to
Vaadin
new Label(“Hello world”)

3.
What’s
new
Getting
started
QA

4.
User interface
framework for rich
web applications

5.
htmljava

6.
Server-
Client-
side
Optim
izedfor
Productivit
Optim
izedfor
Control

7.
Building blocks

8.
123Key Ideas

9.
1Rich
Components

10.
User Interface
Data Source
Theme

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

12.
500+ add-on
components

13.
User Interface
Data Source
Theme

14.
Grid
Form
Text field

15.
Grid
Form
Text field

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

17.
User Interface
Data Source
Theme

18.
$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;

19.
demo.vaadin.com/valo-theme

20.
2Server + Client

21.
Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

36.
Scaling up

37.
Demo

38.
3Embracing
Java

39.
Any language
on JVM

40.
Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android

41.
Servlet
Portlet
Clouds
· · ·
Anything Java

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

43.
Java EE
Spring
OSGi
REST
· · ·
Anything Java

44.
JavaScript
Integration

45.
Server Push

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

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

48.
Commercial support
available
Training, consulting, UI development

49.
getting
started

50.
Eclipse
Download plugin
from Martketplace

51.
IntelliJ IDEA
Built-in support

52.
Netbeans
Download plugin
Netbeans Plugin Portal

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

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

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