Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen

Rich Web Applications in
Server-side Java without
Plug-ins or JavaScript
Joonas Lehtinen, PhD
Vaadin Ltd - CEO
vaadin.com/vaadin

@joonaslehtinen

Vaadin is a
UI framework
for rich web
applications

healthcare portal, >100 kloc of perl,
89
19

web 1.0, netscape, ie5, ie6, ...

thinking of
object oriented design, desktop, Java, U and I ...

desktop programming paradigm for web!

found millstone ajax google web toolkit
00

08
02

05
20

20

20

20

re-released as
09
20

Used by >50.000
developers in >150
countries

Building apps for
fortune 500, startups,
governments, ...
across all industries

Collaborating by
conributing > 200
plug-ins and helping
plug-ins, mainstream each other on a forum
with >1500 posts / m
10

11

Backed by 50+ person
20

20

full-time team

see our transparent vaadin.com/roadmap
12
20

Contents

Server-side Discussion
RIA
What is it? Pros & cons?

Vaadin
Technology, Features, Getting started
In practice
Coding a Vaadin
application step-by-step

“Web 1.0”

Client 5
Server
HTML Page
DOM over HttpResponse View 4

3
Model

Parameters over
HttpRequest
Controller
2
DB
1

Client-side RIA

Client 4 Server
Requested data
View to view as
XML / JSON
5

DOM Model
3
1

Changes to model
Controller encoded as parameters
DB
2

Refactoring?

Compile-
Automated
API docs? weak typing time
checking?

Code
completion?

> 1 developers
+
JavaScript
facilitated weak typing
spaghetti +
> 10k SLOC

performance
browsers
are bugs
different

features

Subset of IE6
java.lang, java.util

Java to IE7
Widgetset JavaScript
Compiler
Firefox

Your Application UI Safari

simpler
• 100% Java
• Static typing
• Object oriented
• Excellent tooling

less bugs
• Stop debugging
JavaScript spaghetti
• Ignore most
browser differences

client-side
• UI in client
• Asyncronous RPC
• Services (for UI)

Building wonderful
apps doesn’t
require writing fat
web clients.

Server-side RIA

Client 8
Server
9 7
TerminalAdapter

TerminalAdapter
HTML Page
over HttpResponse View 6

Automated by 5
DOM the RIA framework Model

Handled by the framework Parameters over
HttpRequest Controller
1 4
3 DB
2

High level
simpler
• 100% Java
Strong • Strong typing
• Object oriented
programming • Excellent tooling
model

less bugs
• No JavaScript debugging
• Ignore browsers

server enviroment
• Access any library
• Use any language
• Runtime is not
limited by browser
• Trusted
• Well defined

simplified
communications
• No RPC layer
• No services (for UI)
• Synchronous
• Direct access to
server API

secure
• Code stays in server
• No services (for UI)
• Predictable runtime

not as scalable
UI state is stored in
the server memory

Measured 12.000
active concurrent
users per server
for a ticketing app
* Amazon EC2-large; 20.622 Ajax requests /
minute peak; limited by storage layer

no offline mode
connection to server
is always required

#1 benefit
development
is really fast

2 Java class files
~ 50 LOC + imports
no HTML
no CSS
no JavaScript
no Cut-n-Paste

https://github.com/
jojule/DocumentManager

Developer
experience
goals User
expecience
Scalability

User Inteface
Data Source
Theme

Reindeer
Runo
Chameleon
Custom

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

Table
or any other UI component

SQLContainer

FreeformQuery

JDBC

SELECT * FROM ...

connectionPool =
new SimpleJDBCConnectionPool(
"org.hsqldb.jdbc.JDBCDriver",
"jdbc:hsqldb:mem:sqlcontainer",
"password", "", 2, 2);
SQLContainer container =
new SQLContainer(
new FreeformQuery(
"SELECT * FROM people",
Arrays.asList("ID"),
connectionPool));
Table table = new Table(null, container);

Table
or any other UI component

SQLContainer

TableQuery

JDBC

Database Table

• lazy loading
• advanced filtering
• sorting
• connection pooling
• transactions
• optimistic locking
• autocommit mode

• HSQLDB
• MySQL
• PostgreSQL
• Oracle
• MS SQL Server

2
combine power of
• Server-side RIA
• Google Web Toolkit

Layers of abstraction
backend frontend
RPC browser browser
server server
any language any language json / xml java ➠ javascript
ExtJS GWT Vaadin

required required optional optional optional

required required required required optional

required required required X required

• Initial HTML
• CSS (theme)
• Images
• JavaScript

830k total
compress

250k
reduced
widgetset

120k

• name=”Joonas”
• button clicked
150 bytes

• name=”Joonas”
• button clicked
150 bytes

• Add
notification
466 bytes

Vaadin UI component
architecture
HTTP(S)
“UI Component” “Widget”
• Button, Table, Tree, ... • Client-side peer for
• Server-side data the component
• Full Java API • Runs on JavaScript

Java Java

• Compiled with JDK • Google Web Toolkit

Creating new UI
components is
really easy

Implement two classes

Server-side Client-side

“UI Component” Automatic “Widget”
• Deﬁne API • Render to DOM
• Receive client events • Collect user events
• Send UI updates
back

Serve
ucr-od
ize
Pr
tim
Op

f or
ed
tiv
iz
df
or
ity
tim
e rol
Op
t-

s d ont
i C
ien
Cl

Client
Co
Op

- im t
ntr
f or
ol ize
df
iz ed iv ity
or
tim c t
sid
Op
u
od
r-
e
P r
rve
Se

Scalawith Scaladin add-on
val layout =
new VerticalLayout(width = 100 pct, height = 100 pct) {
add(new Label(content = "Persons"))
add(new Table(width = 100 pct, height = 100 pct),
ratio = 1)
add(new HorizontalLayout(spacing = true) {
add(new Button("Edit selected", _ => editClicked()))
add(new Button("Add new", _ => addNewClicked()))
})
}
getMainWindow.setContent(layout)

Internet Explorer
6..
Chrome
Firefox
Safari
Opera
iOS
Android

No
browser
plugins
Nothing to
install

Servlet
Portlet
(most) clouds

Apache Tomcat, version 4.1 or later
Oracle WebLogic Server, version 9.2 or later
Oracle WebLogic Portal, version 10gR3
IBM WebSphere Application Server, version 6.1 or later
IBM WebSphere Portal, version 6.1 and 7.0
JBoss Application Server, version 3.2.8 or later
Jetty, version 5 or later
Glassﬁsh, version 2 or later
Liferay Portal 5.2 or later
GateIn Portal 3.1
eXo Platform 3
Google App Engine
Vaadin supports Java Servlet API 2.3
and JSR-168 and JSR-286 Portlet
Speciﬁcations and should work with
any Java application server that conforms
to these standards.

Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
Spring Roo
∙∙∙

Maven
mvn archetype:generate
-DarchetypeGroupId=com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-clean

mvn package yourproject-1.0.war

Download for Free
vaadin.com/book

Vaadin is
a
for build n open source
ing mod J
look gre ern web ava framework
at, applicat
your use perform well a ion
rs happ nd make s that
y. you and
http://va
adin.com
/

SBN 978
-9 52-92-67
53-8
90000

9 7 8 95 2
9 267538
$29.95

4th Editio
n

674 pages

brought to you by...
#85
Get More Refcardz! Visit refcardz.com

CONTENTS INCLUDE:
About Vaadin

Getting Started with Vaadin
Creating An Application
Components
Layout Components
Themes
Data Binding and more...
By Marko Grönroos

ABOUT VAADIN Web
Browser External
Client-Side Resources
Vaadin is a server-side Ajax web application development Engine
framework that allows you to build web applications just like AJAX Requests

with traditional desktop frameworks, such as AWT or Swing. An Servlet Container
Java File
application is built from user interface components contained Servlet Resources
hierarchically in layout components.
Data
In the server-driven model, the application code runs on Application UI Binding Default
Class Component Theme
a server, while the actual user interaction is handled by a
client-side engine running in the browser. The client-server Inherits Events Changes Inherits

communications and any client-side technologies, such as User Event Data Application Application
HTML and JavaScript, are invisible to the developer. As the Application Listener Model Themes Resources
client-side engine runs as JavaScript in the browser, there is no
need to install plug-ins. Vaadin is released under the Apache Database
License 2.0.
Web Java Vaadin Your Web Figure 2: Architecture for Vaadin Applications
Browser Web UI Java Service
Client-Side Server Components Application
You can get a reference to the application object
.dzone.com

Engine EJB Hot
Tip from any component attached to the application with
DB

Event Listeners
Figure 1: Vaadin Client-Server Architecture
In the event-driven model, user interaction with user interface
If the built-in selection of components is not enough, you can
components triggers server-side events, which you can handle

Questions?
Comments?

joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen
#vaadin Expert services
Better
Online support
Results
Training
Slides available on Faster
slideshare Tools

vaadin.com/pro

Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen (20)

Recently uploaded (20)

Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joonas Lehtinen