Vaadin - Rich Web Apps in Server-Side Java without Plug-ins or JavaScript

Rich Web Applications in
Server-side Java without
Plug-ins or JavaScript
twitter: #vaadin @joonaslehtinen

Joonas Lehtinen, PhD
Vaadin Ltd - CEO
joonas@vaadin.com

sunnuntaina 13. helmikuuta 2011

Vaadin is a
UI framework
for desktop-like
web apps


New configs,
taglibs and
syntax!?!

No! {
JavaScript,
DOM, Applet,
plugins?
This is
Nothin Java.
g else
.


java html


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


Vaadin is now
21 months young
and 10 years old


Apache
License


Contents

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

Vaadin
Big picture, Extending, Getting started
In practice
Coding a Vaadin
application step-by-step


Server-side RIA


“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


challenge
web is
not easy


different
features
in different
browsers


different
performance
in different
browsers


different
bugs
in different
browsers


Google Web Toolkit


Subset of IE6
java.lang, java.util

Java to IE7
Widgetset JavaScript
Compiler
Firefox

Your Application UI Safari


simpler
• Java only
• forget the web


cost-effective
stop debugging
JavaScript spaghetti


♲ modular
extensible


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

Parameters over
HttpRequest Controller
1 4
3 DB
2


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


the benefits
of Java
simpler
forget the web

Java
cost-effective
no JavaScript
debugging

modular
extensible ♲

even simpler
• forget the client-side
• synchronous
• server resources


more flexible
• all Java tools and
libraries
• any JVM language
Scala Groovy

more secure
• code stays in server
• less web services


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; limited by storage layer]


no offline mode
server is always
required


#1 benefit
development
is really fast


Vaadin
Framework


1
Great UI
Components

Combined power of
• Server-side RIA
• Google Web Toolkit


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

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


First class
Java citizen


3
First class
Java citizen

Servlet
Portlet
App Engine


Eclipse
Maven
Netbeans
Spring Roo


PROD
UCTIV
I

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


vaadin setup
--applicationPackage ~.web
--baseName PizzaShop
--themeName pizza
--useJpaContainer false

vaadin generate all
--package ~.web.ui
--visuallyComposable true


ﬁeld string --class ~.domain.Pizza
--notNull --ﬁeldName name --sizeMin 3


getting
started


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

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

GET A
Free
9 78952
9 267538
US $24.9
5

Vaadin 6

Copy
.4 Edition


brought to you by...
#85Get 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
w.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
sunnuntaina 13. helmikuuta 2011 components with the Google Web Toolkit (GWT)
develop new

Forums with
1000 msgs/m

Ask the
[really active, world wide]
102,776
Community

Questions
Comments

joon as@vaadin.com
vaadin.com/joonas
twitter: joonaslehtinen


Vaadin - Rich Web Apps in Server-Side Java without Plug-ins or JavaScript

More Related Content

Viewers also liked

Similar to Vaadin - Rich Web Apps in Server-Side Java without Plug-ins or JavaScript

Vaadin - Rich Web Apps in Server-Side Java without Plug-ins or JavaScript