The 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. Session explains 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 More information and materials about the presentation: http://vaadin.com/web/joonas/wiki/-/wiki/Main/Server-side%20RIA

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

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

3. ?

5. Vaadin is a
UI framework
for rich web
applications

6. java html

7. History behind Vaadin

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

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

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

11. desktop programming paradigm for web!

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

13. re-released as
09
20

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

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

16. Apache
License

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

18. Server-side RIA

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

20. client-side ria
fat client

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

22. challenge
web is
not easy

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

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

25. performance
browsers
are bugs
different
features

26. Google Web Toolkit

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

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

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

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

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

32. server-side ria
thin client

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

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

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

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

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

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

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

40. no offline mode
connection to server
is always required

41. #1 benefit
development
is really fast

42. © National Geographic Channel 2010
Seeing is believing

43. What we can do
in 20 minutes?

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

48. Vaadin
Framework

49. Developer
experience
goals User
expecience
Scalability

50. 123
ideas

51. 1
amazing
components

52. User Inteface
Data Source
Theme

55. User Inteface
Data Source
Theme

56. Reindeer
Runo
Chameleon
Custom

57. User Inteface
Data Source
Theme

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

60. example
SQLContainer

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

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

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

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

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

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

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

68. How does it
work, really?

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

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

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

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

75. Creating new UI
components is
really easy

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

84. PaperStack notes = new PaperStack();
!
! @Override
! public void init() {
// === Layout ========================================================
! ! HorizontalLayout lo= new HorizontalLayout();
! ! Window mainWindow = new Window("Postitnotes Application", lo);
! ! lo.setSizeFull();
! ! lo.addComponent(notes);
! ! lo.setComponentAlignment(notes, Alignment.MIDDLE_CENTER);
! ! setMainWindow(mainWindow);!!
! ! notes.setWidth("350px");
! ! notes.setHeight("350px");
! !
// === Note 1 ========================================================
! ! notes.addComponent(new Label("<h1>TODO / Today</h1><div style='font-size: 24px'>” +
“<p>Enjoy the conference...</p></div>", Label.CONTENT_XHTML), "#fef49c");
// === Note 2 ========================================================
! ! notes.addComponent(new Label("<h1>TODO / Tomorrow</h1><div style='font-size: 24px'>” +
“<p>Learn Vaadin!</p></div>", Label.CONTENT_XHTML), "#b2ffa1");
// === Note 3 ========================================================
! ! notes.addComponent(new Label("<div style='font-size: 60px'><center><br/><br/><br/>” +
“DOUBLE<br/><br/><br/>SPEED</center></div>", Label.CONTENT_XHTML), "#b2ffa1");
// === Note 4 ========================================================
! ! com.vaadin.ui.RichTextArea rta = new RichTextArea();
! ! rta.setSizeFull();
! ! notes.addComponent(rta);
! ! rta.setValue("<span style='font-size: 35pt; color: green;'>You can use any “ +
“Vaadin components here...</span>");
! }

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. PROD
UCTIV

97. persistence setup --provider HIBERNATE
--database HYPERSONIC_IN_MEMORY
entity --class ~.domain.Topping
field string --fieldName name --notNull
entity --class ~.domain.Pizza
field number --fieldName price
--type java.lang.Float
field set --fieldName toppings
--type ~.domain.Topping

100. vaadin setup
--applicationPackage ~.web
--baseName PizzaShop
--themeName pizza
--useJpaContainer false
vaadin generate all
--package ~.web.ui
--visuallyComposable true

106. field string --class ~.domain.Pizza
--notNull --fieldName name --sizeMin 3

108. getting
started

110. vaadin.com/download

111. vaadin.com/comparison

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

113. $43

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

116. Questions
Comments
vaadin. com/joonas
@ joonaslehtinen
#vaadin