SlideShare a Scribd company logo
7

Vaadin
intro

@joonaslehtinen
Founder & CEO
Intro to
Vaadin
“Hello world”)
new Label(
New in

7
Getting
started

QA
Vaadin intro
User interface
framework for rich
web applications
Building blocks
Developer
Productivity

Rich
UX
java

html
123
Key Ideas
1

Rich
Components
User Interface
Data Source
Theme
User Interface
Data Source
Theme
Vaadin intro
Vaadin intro
s

3

3.5 Browsers to support in 2012

yo
ur

ap

Desktop
3.5 Browsers to support in 2012
browsers

pp
p
su
lic
pp
at
r 9 io n
or
t?
8% U
I fo
ov of
er ap r
th take ps
e
nu n
ro
pe mb
er
.

36

.1%

6/7
IE 6/7

6/7

Opera

Safari

14%
IE 6/7

14%

Ta
bl
et
s

18%

9

10

36%
36%

18%
Safari

IE 9

79%
79%
9

98.1%

IE 10

80%
80%
10

2.

O

Opera

th

er

Chrome

s

1%
94%

iP
ad
94%
An
3
W dr6
in o.1
do id%
“S
w What kind of devices does yourh app support?
in ince
ex t e gw
s
po plai ent t is
8
ph pul n w erp us
e
r
a
h
IE 9

IE 10

Browsers developers expect to support in 2013

Browsers developers expect to support in 2013

on r
is
d
es tha y ta e, t ex
”
n ble his ten
su ts
m si

Chrome

in

8

54%
54%
IE 8

Firefox

Ph

on
es

94% iPh
A
94%nd one
2
Firefox

inc

e
ex the gw
po plain ente
ph pula wh rp
on r t y t
es ha ab
n
”
su
pp

8
IE 8

“S

W 5 ro
P .7 id
8%

Da

ni

el
415+ add-on
components
Vaadin intro
Vaadin intro
Vaadin intro
User Interface
Data Source
Theme
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
User Interface
Data Source
Theme
Vaadin intro
InMemory, Bean, Method,
Collection, JDBC, JPA, Hibernate,
TextFile, FileSystem, Properties,
EclipseLink, Lucene, Mockups,
GAE, ...
2

Server + Client
Web application layers

Backend
server

Web
server

Communication

JavaScript
Web application layers

JS

GWT Vaadin

Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

required

required

optional

optional

optional

required

required

required

required

optional

required

required

required

required
Web application layers

JS

GWT Vaadin

Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

required

required

optional

optional

optional

required

required

1 layer

required

vs

required

3 layers

-50% codelines
-50% development
required
required
-50% maintenance
easier to learn
required

required

optional
How does it work,
really?
Vaadin intro
•
•
•
•

Initial HTML
CSS (theme)
Images
JavaScript

!

1.2M total

compress

307k
reduced
widgetset

135k
• name=”Joonas”
• button clicked
!

261 bytes

Vaadin intro
• name=”Joonas”
• button clicked
!

261 bytes

• Add notification
!

267 bytes

Hello World!
Vaadin intro
Source
https://github.com/vaadin/documentmanager
HOWTO Screencast
https://vaadin.com/learn
3

Embracing
Java
Any language
on JVM
Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android
No browser
plugins / JRE
!

Nothing to
install
∙
∙

Servlet
Portlet
(most) clouds
∙∙∙
Anything Java
∙
∙

Eclipse
IntelliJ IDEA
Netbeans
Maven / Gradle / Ant
∙∙∙
Anything Java
Java EE
Spring
OSGi
REST
∙∙∙
Anything Java
7

Vaadin

.1
v0.1
2001
v3
2002

Open
Source
v4
2006

Ajax
v5
2007
7
v6
2009

2013
934 tickets closed during 16 months of
development
Oldest ticket created 3/2008
Newest ticket 2/2013
3939 commits made by 23 authors
93 % by 6 persons
> 1 000 000 lines of code touched
Renewed
from Inside

JS
Sass
HTML5
+=
GWT

sh

RPC
State

Pu

Complete
stack

UI

Field
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
Vaadin intro
vaadin.com/7
7

Favorite picks
Vaadin += GWT
Vaadin intro
Vaadin intro
Vaadin intro
GWT
Compatible
ity

tiv

or

df

ize

tim uc
Op
od
Pr

O

tim
p

fo
ed
iz

e rol
d ont
i C
s

r
e
v
r
e
S

r

tien
Cl
or

df

ize

O

P

d
ro

tim
p

ed
iz

or
f

it
iv
ct
u

rrve
Se
ol
tim
ntr

Op

e
sid
Co

t
n
e
i
l
C
Architecture
Vaadin intro
Demo

Sass


Syntactically Awesome Stylesheets
Variables & functions
Mixins
Nesting
Selector Inheritance
Redesigned
Forms
public class Employee {	
	 String firstName;	
	 String lastName;	
	 double salary;	
	 Date birthDate;	
// Getters, setters, …	
}	
!

Form form = new Form();	
form.setItemDataSource(	
new BeanItem<Employee>(employee));

6
Vaadin intro
Vaadin intro
form.setFormFieldFactory(new FormFieldFactory() {	
!

	 	 	 public Field createField(Item item, Object propertyId,	
	 	 	 	 	 Component uiContext) {	
!

	
	
	
	
	

	
	
	
	
	

	
	
	
	
	

	
	
	
	
	

6

if ("birthDate".equals(propertyId)) {	
	 DateField df = new DateField();	
	 df.setResolution(DateField.RESOLUTION_DAY);	
	 return df;	
}	

!

// ..	
!

	
	
	
	

	
	
	
	

	 	 return DefaultFieldFactory.createFieldByPropertyType(item	
	 	 	 	 .getItemProperty(propertyId).getType());	
	 }	
});
GridLayout form = new GridLayout(2,2) {	

	
	
	
	

	
	
	
	

	
	
	
	

TextField
TextField
TextField
DateField

	
	
	
	
	
	
	
	
	

	
	
	
	
	
	
	
	
	

	 {	
	 	
	 	
	 	
	 	
	 	
	 	
	 }	
};	

firstName = new TextField("First name");	
lastName = new TextField("Last name");	
salary = new TextField("Salary");	
birthDate = new DateField("Birth date");	

7

birthDate.setResolution(Resolution.DAY);	
setSpacing(true);	
addComponent(firstName);	
addComponent(lastName);	
addComponent(birthDate);	
addComponent(salary);	

	 	 BeanFieldGroup<Employee> fieldGroup = new BeanFieldGroup<Employee>(Employee.class);	
	 	 fieldGroup.bindMemberFields(form);	
	 	 fieldGroup.setItemDataSource(new BeanItem<Employee>(employee));
public class Person {
!

@Size(min = 5, max = 50)
private String name;
!

@Min(0)
@Max(100)
private int age;
!

// + constructor + setters + getters
}
“Joonas Lehtinen”

presentation
model

Component

firstName = “Joonas”!
lastName = “Lehtinen”

Demo
Server Push
@Push MyUI
!
!

<async-supported/>
!
!

vaadin-push dependency
getting
started
getting
started
Vaadin intro
Eclipse

Download plugin
from Martketplace
IntelliJ IDEA

Built-in support
Netbeans

Download plugin
Netbeans Plugin Portal
Maven

mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=
7.1.7
Download for Free
vaadin.com/book

-93-

1970
-1

01

728 pages

PDF, ePub, HTML
Vaadin intro
Apache
License
community of

100.000+
developers

Ohloh
#2 used
Java Web
Framework
Vaadin 7.2

See you tomorrow
Vaadin 7.2

See you tomorrow
?

slideshare.com/
joonaslehtinen

joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen

More Related Content

Similar to Vaadin intro (20)

PDF
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Codemotion
 
PDF
Vaadin intro at GWT.create conference
Joonas Lehtinen
 
PDF
Vaadin 7 by Joonas Lehtinen
Codemotion
 
ODP
Perchè potresti aver bisogno di un database NoSQL anche se non sei Google o F...
Codemotion
 
PDF
بررسی چارچوب جنگو
railsbootcamp
 
PDF
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
Association Paris-Web
 
PDF
User interface-ui-training-by-ruchiwebsolutions
php2ranjan
 
PDF
User interface ui training hyderabad
Ruchiwebsolutions
 
DOCX
Santhosh_Resume
Santhosh Kandula
 
DOCX
resume
Srinivasa Rao M
 
PPT
BarCamp KL H20 Open Social Hackathon
marvin337
 
DOCX
Wesam Mortagi - Australia
Wesam Agaibi
 
PPTX
OSML and OpenSocial 0.9
MySpaceDevTeam
 
PDF
Web designing-training-by-ruchiwebsolutions
php2ranjan
 
PDF
Enjoying the full stack - Frontend 2010
Christian Heilmann
 
PDF
Vaadin 7
Joonas Lehtinen
 
PDF
mobicon_paper
Vineet Kumar
 
PDF
Engage 2023: Taking Domino Apps to the next level by providing a Rest API
Serdar Basegmez
 
PDF
Danny Banks - Building consistent Cross-Platform interfaces - Codemotion Amst...
Codemotion
 
PPT
Advanced Web Development
Robert J. Stein
 
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Codemotion
 
Vaadin intro at GWT.create conference
Joonas Lehtinen
 
Vaadin 7 by Joonas Lehtinen
Codemotion
 
Perchè potresti aver bisogno di un database NoSQL anche se non sei Google o F...
Codemotion
 
بررسی چارچوب جنگو
railsbootcamp
 
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
Association Paris-Web
 
User interface-ui-training-by-ruchiwebsolutions
php2ranjan
 
User interface ui training hyderabad
Ruchiwebsolutions
 
Santhosh_Resume
Santhosh Kandula
 
BarCamp KL H20 Open Social Hackathon
marvin337
 
Wesam Mortagi - Australia
Wesam Agaibi
 
OSML and OpenSocial 0.9
MySpaceDevTeam
 
Web designing-training-by-ruchiwebsolutions
php2ranjan
 
Enjoying the full stack - Frontend 2010
Christian Heilmann
 
Vaadin 7
Joonas Lehtinen
 
mobicon_paper
Vineet Kumar
 
Engage 2023: Taking Domino Apps to the next level by providing a Rest API
Serdar Basegmez
 
Danny Banks - Building consistent Cross-Platform interfaces - Codemotion Amst...
Codemotion
 
Advanced Web Development
Robert J. Stein
 

More from Joonas Lehtinen (20)

PDF
Web Components for Java Developers
Joonas Lehtinen
 
PDF
Vaadin Components @ Angular U
Joonas Lehtinen
 
PDF
Vaadin Components
Joonas Lehtinen
 
PDF
Vaadin Introduction, 7.3 edition
Joonas Lehtinen
 
PDF
Hybrid webinar
Joonas Lehtinen
 
PDF
Vaadin 7.2
Joonas Lehtinen
 
PDF
Hybrid applications
Joonas Lehtinen
 
PDF
Notes on architecture
Joonas Lehtinen
 
PDF
Vaadin roadmap-devoxx-2013
Joonas Lehtinen
 
PDF
Beoynd Vaadin 7
Joonas Lehtinen
 
PDF
Vaadin7
Joonas Lehtinen
 
PDF
Hackathon - Building vaadin add on components
Joonas Lehtinen
 
PDF
Vaadin7
Joonas Lehtinen
 
PDF
Vaadin today and tomorrow
Joonas Lehtinen
 
PDF
Migration from vaadin 6 to vaadin 7 devoxx france 2013
Joonas Lehtinen
 
PDF
Vaadin7 modern-web-apps-in-java
Joonas Lehtinen
 
PDF
Vaadin 7 Today and Tomorrow
Joonas Lehtinen
 
PDF
Vaadin 7
Joonas Lehtinen
 
PDF
Desingning reusable web components
Joonas Lehtinen
 
PDF
Lecture: Vaadin Overview
Joonas Lehtinen
 
Web Components for Java Developers
Joonas Lehtinen
 
Vaadin Components @ Angular U
Joonas Lehtinen
 
Vaadin Components
Joonas Lehtinen
 
Vaadin Introduction, 7.3 edition
Joonas Lehtinen
 
Hybrid webinar
Joonas Lehtinen
 
Vaadin 7.2
Joonas Lehtinen
 
Hybrid applications
Joonas Lehtinen
 
Notes on architecture
Joonas Lehtinen
 
Vaadin roadmap-devoxx-2013
Joonas Lehtinen
 
Beoynd Vaadin 7
Joonas Lehtinen
 
Hackathon - Building vaadin add on components
Joonas Lehtinen
 
Vaadin today and tomorrow
Joonas Lehtinen
 
Migration from vaadin 6 to vaadin 7 devoxx france 2013
Joonas Lehtinen
 
Vaadin7 modern-web-apps-in-java
Joonas Lehtinen
 
Vaadin 7 Today and Tomorrow
Joonas Lehtinen
 
Vaadin 7
Joonas Lehtinen
 
Desingning reusable web components
Joonas Lehtinen
 
Lecture: Vaadin Overview
Joonas Lehtinen
 
Ad

Vaadin intro