Get introduced to the Vaadin framework by one of its core developers. Vaadin provides a desktop-like programming model on the server for creating Rich Internet Applications (RIAs) in plain Java - without the need for HTML, XML, plug-ins or JavaScript. In this session, Joonas lays out the key concepts of the server-side RIA development model and compares it to client-side RIA. To demonstrate the use of framework, an example application is developed during the session step-by-step. The presentation is concluded with pointers on how to start developing your own applications with Apache-licensed Vaadin-framework. You'll learn: * How to create a desktop like web application in Java * Difference between page oriented, client-side RIA and server-side RIA architectures * How Vaadin can be extended with Google Web Toolkit

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

3. Vaadin is a
UI framework
for rich web
applications

4. java html

5. History behind Vaadin

6. healthcare portal, >100 kloc of perl,
89
19

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

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

9. desktop programming paradigm for web!

10. found millstone ajax google web toolkit
00
08
02
05
20
20
20
20

11. re-released as
09
20

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

13. see our transparent vaadin.com/roadmap
12
20

14. Apache
License

15. Contents
Server-side Discussion
RIA
What is it? Pros & cons?
Vaadin
Technology, Features, Getting started
In practice
Coding a Vaadin
application step-by-step

16. Server-side RIA

17. “Web 1.0”
Client 5
Server
HTML Page
DOM over HttpResponse View 4
3
Model
Parameters over
HttpRequest
Controller
2
DB
1

18. client-side ria
fat client

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

20. challenge
web is
not easy

21. Refactoring?
Compile-
Automated
API docs? weak typing time
checking?
Code
completion?

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

23. performance
browsers
are bugs
different
features

24. Google Web Toolkit

25. Subset of IE6
java.lang, java.util
Java to IE7
Widgetset JavaScript
Compiler
Firefox
Your Application UI Safari

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

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

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

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

30. server-side ria
thin client

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

32. High level
simpler
• 100% Java
Strong • Strong typing
• Object oriented
programming • Excellent tooling
model
less bugs
• No JavaScript debugging
• Ignore browsers

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

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

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

36. not as scalable
UI state is stored in
the server memory

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

38. no offline mode
connection to server
is always required

39. #1 benefit
development
is really fast

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

42. https://github.com/
jojule/DocumentManager

43. Vaadin
Framework

44. Developer
experience
goals User
expecience
Scalability

45. 123
ideas

46. 1
amazing
components

47. User Inteface
Data Source
Theme

51. User Inteface
Data Source
Theme

52. Reindeer
Runo
Chameleon
Custom

53. User Inteface
Data Source
Theme

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

56. example
SQLContainer

57. Table
or any other UI component
SQLContainer
FreeformQuery
JDBC
SELECT * FROM ...

58. 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);

59. Table
or any other UI component
SQLContainer
TableQuery
JDBC
Database Table

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

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

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

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

64. How does it
work, really?

66. • Initial HTML
• CSS (theme)
• Images
• JavaScript
830k total
compress
250k
reduced
widgetset
120k

67. • name=”Joonas”
• button clicked
150 bytes

69. • name=”Joonas”
• button clicked
150 bytes
• Add
notification
466 bytes

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

71. Creating new UI
components is
really easy

73. Implement two classes
Server-side Client-side
“UI Component” Automatic “Widget”
• Define API • Render to DOM
• Receive client events • Collect user events
• Send UI updates
back

79. Vaadin += GWT

81. GWT
Compatible

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

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

84. Commercial
Support

85. 3
embrace
java

86. Any JVM
Language

87. 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)

88. Internet Explorer
6..
Chrome
Firefox
Safari
Opera
iOS
Android

89. No
browser
plugins
Nothing to
install

90. Servlet
Portlet
(most) clouds

91. 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
Glassfish, 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
Specifications and should work with
any Java application server that conforms
to these standards.

92. Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
Spring Roo
∙∙∙

94. Maven
mvn archetype:generate
-DarchetypeGroupId=com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-clean
mvn package yourproject-1.0.war

95. getting
started

97. vaadin.com/download

98. vaadin.com/comparison

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

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

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