Vaadin Framework provides a desktop-like programming model for creating modern web applications in plain Java – without the need for HTML, XML, plug-ins or JavaScript. This session explains the key concepts of the server-side and client-side RIA development with Java as well as summarizes what is new with Vaadin 7 and how it relates to GWT. To demonstrate the use of the framework, an example application is developed during the session step-by-step.

1. 7
Vaadin
today
Leif Åstrand
Senior Vaadin Expert
lördag 30 november 13

2. Intro to
Vaadin
lördag 30 november 13
How Vaadin
works

3. new La
bel(“H
ello w
orld”)
lördag 30 november 13

4. Getting
started
QA
lördag 30 november 13

5. lördag 30 november 13

6. User interface
framework for rich
web applications
lördag 30 november 13

7. Building blocks
lördag 30 november 13

8. lördag 30 november 13

9. java
lördag 30 november 13
html

10. Why on earth?
lördag 30 november 13

11. lördag 30 november 13

12. expectations
lördag 30 november 13

13. reality
lördag 30 november 13

14. consumer
“million” users
10 views
1€/user
business
“500” users
50 views
500€/user
100,000€ / view >> 5,000€ / view
lördag 30 november 13

15. Challenge
How to build consumer
grade UX with business
system budget
lördag 30 november 13

16. 123
Key Ideas
lördag 30 november 13

17. 1
Rich
Components
lördag 30 november 13

18. User Interface
Data Source
Theme
lördag 30 november 13

19. lördag 30 november 13

20. lördag 30 november 13

21. 3
3.5 Browsers to support in 2012
s
pp
yo
ur
a
pp
Desktop
3.5 Browsers to support in 2012
browsers
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
b
le
ts
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
in ince
w What kind of devices does yourh app support?
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
Chrome
Browsers developers expect to support in 2013
Browsers developers expect to support in 2013
on
e
lördag 30 november 13
r t y ise d e
s” han tab , th xte
su lets is m ns
p p ar a ive
ly
e y
o
inc
e
ex the gw
po plain ente
ph pula wh rp
on r t y t
es ha ab
n
”
su
pp
in
8
IE 8
8
54%
54%
IE 8
Firefox
Ph
on
Da
94% iPh
A
94%nd one
Firefox
“S
es
2
W 5 ro
P .7 id
8%
ni
el

22. lördag 30 november 13

23. 350+ add-on
components
lördag 30 november 13

24. lördag 30 november 13

25. lördag 30 november 13

26. lördag 30 november 13

27. lördag 30 november 13

28. User Interface
Data Source
Theme
lördag 30 november 13

29. lördag 30 november 13

30. lördag 30 november 13

31. lördag 30 november 13

32. lördag 30 november 13

33. Sass variables & functions
lördag 30 november 13

34. Mixins
lördag 30 november 13

35. User Interface
Data Source
Theme
lördag 30 november 13

36. lördag 30 november 13

37. InMemory, Bean, Method,
Collection, JDBC, JPA, Hibernate,
TextFile, FileSystem, Properties,
EclipseLink, Lucene, Mockups,
GAE, ...
lördag 30 november 13

38. 2
Server + Client
lördag 30 november 13

39. Web application layers
Backend
server
lördag 30 november 13
Web
server
Communication
JavaScript

40. Web application layers
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
required
required
optional
required
required
required
JS
GWT Vaadin
Backend
server
lördag 30 november 13
required

41. Web application layers
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
JS
GWT Vaadin
Backend
server
lördag 30 november 13
required
required
1 layer
required
vs
required
3 layers
-50% lines of code
-50% development
required
required
-50% maintenance
easier to learn
required
required
optional

42. O
tim
p
ize
e rol
d ont
i C
s
r
fo
d
tien
Cl
or
ti
uc
df
ize
od
im
Pr
t
Op
r
e
v
r
e
S
y
vit
lördag 30 november 13

43. it
iv
ro
P
p
O
tim
ize
or
f
d
ct
u
d
rrve
Se
e
sid
ol
or
df
ntr
ize
tim
Co
Op
t
n
ie
l
C
lördag 30 november 13

44. Widget
Connector
client
server
State
RPC
Component
lördag 30 november 13

45. How does it work,
really?
lördag 30 november 13

46. name = new TextField("Name");
greetButton = new Button("Greet");
greetButton.addClickListener(new ClickListener() {
public void buttonClick(ClickEvent event) {
Notification.show("Ciao " + name.getValue());
}
});
lördag 30 november 13

47. •
•
•
•
Initial HTML
CSS (theme)
Images
JavaScript
1200k total
compress
300k
135k
lördag 30 november 13
reduced
widget set
and theme

48. • name=”Leif”
• Button clicked
332 bytes
lördag 30 november 13

49. name = new TextField("Name");
greetButton = new Button("Greet");
greetButton.addClickListener(new ClickListener() {
public void buttonClick(ClickEvent event) {
Notification.show("Ciao " + name.getValue());
}
});
lördag 30 november 13

50. • name=”Leif”
• Button clicked
332 bytes
• Show notification
462 bytes
lördag 30 november 13

51. Hello World!
lördag 30 november 13

52. Source
https://github.com/vaadin/documentmanager
HOWTO Screencast
https://vaadin.com/learn
lördag 30 november 13

53. 3
Embracing
Java
lördag 30 november 13

54. Any JVM
Language
lördag 30 november 13

55. Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android
lördag 30 november 13

56. No
browser
plugins
Nothing to
install
lördag 30 november 13

57. Servlet
Portlet
(most) clouds
lördag 30 november 13

58. Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
∙∙∙
lördag 30 november 13

59. Vaadin += GWT
lördag 30 november 13

60. lördag 30 november 13

61. lördag 30 november 13

62. lördag 30 november 13

63. GWT
Compatible
lördag 30 november 13

64. 7
Vaadin
.1
lördag 30 november 13

65. v0.1
2001
v3
2002
Open
Source
lördag 30 november 13

66. v4
2006
Ajax
v5
2007
lördag 30 november 13

67. 7
v6
2009
lördag 30 november 13
Feb

68. lördag 30 november 13

69. 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
lördag 30 november 13

70. getting
started
lördag 30 november 13

71. lördag 30 november 13

72. Eclipse
Download plugin
from Martketplace
lördag 30 november 13

73. IntelliJ IDEA
Built-in support
lördag 30 november 13

74. Netbeans
Download plugin
Netbeans Plugin Portal
lördag 30 november 13

75. Maven
lördag 30 november 13
mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=
7.1.8

76. Migration Guide:
Vaadin 6 to 7
https://vaadin.com/wiki/-/wiki/Main/Migrating
+from+Vaadin+6+to+Vaadin+7
lördag 30 november 13

77. Download for Free
vaadin.com/book
-93-
1970
-1
01
728 pages
PDF, ePub, HTML
lördag 30 november 13

78. Apache
License
lördag 30 november 13

79. community of
100.000+
developers
Ohloh
#2 used
Java Web
Framework
lördag 30 november 13

80. ?
lördag 30 november 13
slideshare.com/
lastrand
leif@vaadin.com
vaadin.com/leif