Vaadin - Rich web applications in plain Java without plugins or JavaScript

Alex EvangInternet and Web Development

Feb 7, 2012 (5 years and 8 months ago)

1,070 views

Vaadin is a UI library for desktop-like web apps

vaadin.com / joonas
Joonas Lehtinen, PhD,
CEO of IT Mill - company behind Vaadin
Vaadin - Rich web applications in plain
Java without plugins or JavaScript
Wednesday, December 16, 2009
Vaadin is a
UI library for
desktop-like
web apps
Wednesday, December 16, 2009
New configs,
taglibs and
syntax!?!
JavaScript,
DOM, Applet,
plugins?
No!

This is Java.
Nothing else.
Wednesday, December 16, 2009
Wednesday, December 16, 2009
1. Better user experience
works with Internet Explorer, Firefox,
Safari, Chrome and Opera -
no plugins
fully Ajaxified, rich user interface
good looking, powerful widgets
Wednesday, December 16, 2009
2. Faster development
server driven ria
architecture gives client,
communication and better security “for free”
single development language: Java -
static typing, refactoring, OO, JavaDocs, ..
use your favorite Java IDE and debugger -
special support for Eclipse and Maven
Wednesday, December 16, 2009
3. Freedom
open source and
free
to everyone:
Apache 2.0 license
deploy as standard servlet, portlet or
in Google App Engine
it’s just a single Java jar-file -
no dependencies
Wednesday, December 16, 2009
Limitations
~100.000 concurrent users per server
solely for Java-developers - script
developers should look elsewhere
not for building “read-only” web-pages
Wednesday, December 16, 2009
Gets more done
with less code
Wednesday, December 16, 2009
What can it do
in 20 minutes?
Wednesday, December 16, 2009
Wednesday, December 16, 2009
Wednesday, December 16, 2009
Server
Driven
RIA
Wednesday, December 16, 2009
“Web 1.0”
DOM
Client
Server
Vie
w
HTML
Page
over HttpResponse
Contr
o
ller
Mo
del
Parameters over
HttpRequest
DB
2
3
4
5
1
Wednesday, December 16, 2009
Client Side RIA
DOM
Client
Server
Vie
w
Contr
o
ller
Mo
del
DB
2
3
4
5
1
Requested data
to view as
XML
/ JSON
Changes to model
encoded as parameters
Wednesday, December 16, 2009
Ja
va t
o
Ja
vaScrip
t
Com
piler
Sub
s
et o
f
ja
va.l
a
n
g, ja
va.u
til
Widgets
et
Y
o
ur App
lic
ation UI
IE6
IE7
Fir
e
f
o
x
Sa
f
a
ri
Google Web Toolkit
Wednesday, December 16, 2009
Server Driven RIA
DOM
Client
Server
Vie
w
HTML
Page
over HttpResponse
Contr
o
ller
Mo
del
Parameters over
HttpRequest
DB
4
5
6
2
T
erm
in
a
lAda
p
t
er
T
erm
in
a
lAda
p
t
er
Automated by
the RIA
framework
3
7
1
9
8
Handled by the framework
Wednesday, December 16, 2009
Vaadin UI component
architecture
“UI Component”

Button, Table, Tree, ...

Server-side data

Full Java API
Java

Google Web Toolkit
“Widget”

Client-side peer for
the component

Runs on JavaScript
HTTP(S)
Java

Compiled with JDK
Wednesday, December 16, 2009
W
eb Ser
vice API Im
p
l
W
eb Ser
vice API
Us
er Int
e
f
a
ce
W
eb Ser
vice API Asyn
c
Us
er Int
e
f
a
ce
Ser
v
er
-side RIA v
ersion
[ IT Mill T
oo
lkit ]
Client-side RIA v
ersion
[ Goo
gle W
eb T
oo
lkit ]
[ Cus
t
om co
de ]
Runn
in
g on Client
[ Cus
t
om co
de ]
Runn
in
g on Ser
v
er
DB
Busin
e
ss Lo
gic
GWT
Client Side RIA
Vaadin
Server Driven RIA
Wednesday, December 16, 2009
Start with Vaadin
take a look of tutorials online
read the Book of Vaadin
ask questions on really active forum
download and start experimenting
play with demos at
vaadin.com
Wednesday, December 16, 2009
Questions
Comments
joonas@vaadin.com
+358-40-5035001
skype://joonaslehtinen
Wednesday, December 16, 2009
Additional
Topics
Wednesday, December 16, 2009
Maven
Wednesday, December 16, 2009
mvn archetype:generate
-DarchetypeGroupId=\
com.vaadin
-DarchetypeArtifactId=\
vaadin-archetype-sample
-DarchetypeVersion=LATEST
-Dpackaging=war
-DgroupId=myGroup
-DartifactId=myArtifact
-Dversion=1.0-SNAPSHOT
Wednesday, December 16, 2009
Wednesday, December 16, 2009
Extensively
Tested
Wednesday, December 16, 2009
IE 6, 7 & 8
Firefox 3.5
Chrome 3
Opera 10
Safari 4
Wednesday, December 16, 2009
Google App Engine
Tomcat 4.1.40, 5.5.28, 6.0.20
Jetty 5.1.15, 6.1.22, 7.0.0
JBoss 3.2.8, 4.2.3, 5.0.1
Glassfish 2.1.1
Liferay 5.2.3
WebLogic 9.2, 10.3
(WebSphere added shortly)
Wednesday, December 16, 2009
Vaadin
TestBench
Wednesday, December 16, 2009
Based on Selenium, adds:
Support for multiple browsers per virtualized
test host in Grid Hub
Screenshots based assertions to find errors
on CSS level (theme testing)
Understands Vaadin in widget level (not just
DOM testing) in order to make tests more robust
Wednesday, December 16, 2009
Creating New
Widgets
Wednesday, December 16, 2009


 



 
  
 

   
 

   
 
   

 


 

 

  

 


 

 
 
  
 
!" 

!" 
#  
    
 $% $
 $&$ $

'   ( 
   
 
   !

 $% $
 $
%
$
#  
 $% $
 $

!"  


  !
  
 $% $ $

 

 

"#"

$
%" !

$#&


'"
 $% $
 $&$ $

%
 
 

"#"
(
( !)
*(+,# !'
$#&
)$

-

!'
#&
(
*

(

'.
 
$
+,# !
$
##
$
+,# !


#&




)
 #
*
# 

 $% $
 $
$$/

,
 !
$$+,# !
/##"()",$$$,0
)$$1#$,#
2#
$.

"
*",3

(

*"1$1,0



 
 

"(#$$
"*"

 
 


   

 

  

  




 
"#
*(
  
 
!
#

(
1
*
*-
"3
"
./$$"
,3
*#

(


 
 



 

 

"  


# 
$
 

  

% 


&
  &


 


# 

 ' 




 
 
( 
 
 
 
 

# $) *



" 


+
+
/#

4*

*/#
#
4$$"1$1


4

*"'
*1$1 
#!
4#

1
*"

...
4,$"

$

4,$"


4$2
#


"#"

*#(
+ ,
-

3
#$$'"
*"
#$$'"
*2#3
"
#$$'"
*#
*
$$$3"##3,3
*#

/3561$(
4
7
(31

*-#$"!
'.
 $ $ /&  ( /

 0&

 $% $
 $
  
"#"

!!
Wednesday, December 16, 2009


 



 
  
 

   
 

   
 
   

 


 

 

  

 


 

 
 
  
 
!" 

!" 
#  
    
 $% $
 $&$ $

'   ( 
   
 
   !

 $% $
 $
%
$
#  
 $% $
 $

!"  


  !
  
 $% $ $

 

 

"#"

$
%" !

$#&


'"
 $% $
 $&$ $

%
 
 

"#"
(
( !)
*(+,# !'
$#&
)$

-

!'
#&
(
*

(

'.
 
$
+,# !
$
##
$
+,# !


#&




)
 #
*
# 

 $% $
 $
$$/

,
 !
$$+,# !
/##"()",$$$,0
)$$1#$,#
2#
$.

"
*",3

(

*"1$1,0



 
 

"(#$$
"*"

 
 


   

 

  

  




 
"#
*(
  
 
!
#

(
1
*
*-
"3
"
./$$"
,3
*#

(


 
 



 

 

"  


# 
$
 

  

% 


&
  &


 


# 

 ' 




 
 
( 
 
 
 
 

# $) *



" 


+
+
/#

4*

*/#
#
4$$"1$1


4

*"'
*1$1 
#!
4#

1
*"

...
4,$"

$

4,$"


4$2
#


"#"

*#(
+ ,
-

3
#$$'"
*"
#$$'"
*2#3
"
#$$'"
*#
*
$$$3"##3,3
*#

/3561$(
4
7
(31

*-#$"!
'.
 $ $ /&  ( /

 0&

 $% $
 $
  
"#"

!!
Wednesday, December 16, 2009


 



 
  
 

   
 

   
 
   

 


 

 

  

 


 

 
 
  
 
!" 

!" 
#  
    
 $% $
 $&$ $

'   ( 
   
 
   !

 $% $
 $
%
$
#  
 $% $
 $

!"  


  !
  
 $% $ $

 

 

"#"

$
%" !

$#&


'"
 $% $
 $&$ $

%
 
 

"#"
(
( !)
*(+,# !'
$#&
)$

-

!'
#&
(
*

(

'.
 
$
+,# !
$
##
$
+,# !


#&




)
 #
*
# 

 $% $
 $
$$/

,
 !
$$+,# !
/##"()",$$$,0
)$$1#$,#
2#
$.

"
*",3

(

*"1$1,0



 
 

"(#$$
"*"

 
 


   

 

  

  




 
"#
*(
  
 
!
#

(
1
*
*-
"3
"
./$$"
,3
*#

(


 
 



 

 

"  


# 
$
 

  

% 


&
  &


 


# 

 ' 




 
 
( 
 
 
 
 

# $) *



" 


+
+
/#

4*

*/#
#
4$$"1$1


4

*"'
*1$1 
#!
4#

1
*"

...
4,$"

$

4,$"


4$2
#


"#"

*#(
+ ,
-

3
#$$'"
*"
#$$'"
*2#3
"
#$$'"
*#
*
$$$3"##3,3
*#

/3561$(
4
7
(31

*-#$"!
'.
 $ $ /&  ( /

 0&

 $% $
 $
  
"#"

!!
Wednesday, December 16, 2009
Vaadin
Directory
Wednesday, December 16, 2009
Channel
for
distributing
Vaadin add-ons
Wednesday, December 16, 2009
widgets, themes,
data sources,
tools, ...
Wednesday, December 16, 2009
Wednesday, December 16, 2009
Wednesday, December 16, 2009
Vaadin
Trends
Wednesday, December 16, 2009
Wednesday, December 16, 2009