Introduction to Vaadin Framework. Updated in Sep 2014 to cover Vaadin 7.3.

1. Vaadin7 introduction
@joonaslehtinen
Founder & CEO

2. Intro to
Vaadin
new Label(“Hello world”)

3. What’s
new
Getting
started
QA

5. User interface
framework for rich
web applications

6. User Interface
Components

7. Developer
Productivity
Rich
UX

9. java html

10. 12Key Idea3s

11. Ric1h
Components

12. User Interface
Data Source
Theme

18. 6/7 8
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
98.1%
3.5 Browsers to support in 2012
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
14% 18% 36% 54%
What kind of devices does your app support?
36.1%
Desktop
browsers
Tablets
Browsers developers expect to support in 2013
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
Browsers developers expect to support in 2013
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
does your app support?
Phones
25.7%
36.1%
Others
2.1%
“Since gwt in the enterprise, explain why tablets popular than support phones”
Daniel
iPhone
Android
WP
application over 98% of apps
had overtaken
UI for
US, Europe.
the number
36.1%
“Since gwt is used extensively
in the enterprise, this may
explain why tablets are popular than support phones”
iPad
Android
Windows
+
+

19. 462 add-on
components

24. User Interface
Data Source
Theme

34. User Interface
Data Source
Theme

36. InMemory, Bean, Method,
Collection, JDBC, JPA, Hibernate,
TextFile, FileSystem, Properties,
EclipseLink, Lucene, Mockups,
GAE, ...

37. 2Server + Client

38. Web application layers
Backend
server
Web
server
Commu-nication
JavaScript

39. Web application layers
Backend
server
Web
server
Client-side UI
Commu-nication
JavaScript

40. Web application layers
Backend
server
Web
server
Commu-nication
JavaScript
Server-side UI Automated

41. Web application layers
Java to JavaScript
JavaScript
Web
server
Backend
server
Commu-nication
required required optional
optional optional
Vaadin
required required optional
GWT
required required
JS
required required
required required
Server-side UI & Client-side UI

42. Web application layers
Java to JavaScript
JavaScript
Web
server
Backend
server
Commu-nication
required required optional
optional optional
Vaadin
required required optional
GWT
required required
JS
required required
required required
1 layer
vs
3 layers
-50% dev. time
-50% maintenance
vs
full control over DOM
and communications

43. How does server-side
UI work, really?

45. • Initial HTML
• CSS (theme)
• Images
• JavaScript
1.2M total
307k
compress
135k
reduced
widgetset

46. • name=”Joonas”
• button clicked
261 bytes

48. • name=”Joonas”
• button clicked
261 bytes
• Add notification
267 bytes

49. Hello World!

50. 3Embracing
Java

51. Any language
on JVM

52. Internet Explorer
Chrome
Firefox
Safari
Opera
iOS
Android

53. No
browser
plugins
Nothing to
install

54. Servlet
Portlet
(most) clouds
· · ·
Anything Java

55. Eclipse
IntelliJ IDEA
Netbeans
Maven / Gradle / Ant
· · ·
Anything Java

56. Java EE
Spring
OSGi
REST
· · ·
Anything Java

57. Vaadin7series

58. v3
2002
v0.1
2001
Open
Source

59. v4
2006
Ajax
v5
2007

60. 7
2013 v6
2009

61. Renewed
from Inside Sass
Complete
stack
JS
HTML5
+=
GWT
UI
RPC
State
Field
Push

62. Vaadin += GWT

66. Optimized for
Client-side
Optimized for
Productivity
Server-
Control

67. Architecture

69. Hybrid apps?

70. Client-side Server-side
Use for
• Offline
• Low latency interaction
• Maximum scalability
Use for
• Most places ( - 50% cost )
• High security
• Utilizing full Java platform
Hybrid
Benefits of the both sides, but adds complexity

72. Try the demo at
demo.vaadin.com/parking

73. Try the demo at
demo.vaadin.com/parking

74. Try the demo at
demo.vaadin.com/parking

75. Try the demo at
demo.vaadin.com/parking

76. Try the demo at
demo.vaadin.com/parking

77. Try the demo at
demo.vaadin.com/parking

78. Try the demo at
demo.vaadin.com/parking

79. Try the demo at
demo.vaadin.com/parking

80. Try the demo at
demo.vaadin.com/parking

81. Try the demo at
demo.vaadin.com/parking

82. Try the demo at
demo.vaadin.com/parking

83. Try the demo at
demo.vaadin.com/parking

84. Try the demo at
demo.vaadin.com/parking

85. Try the demo at
demo.vaadin.com/parking

86. Try the demo at
demo.vaadin.com/parking

87. Try the demo at
demo.vaadin.com/parking

88. Try the demo at
demo.vaadin.com/parking

89. Try the demo at
demo.vaadin.com/parking

90. Try the demo at
demo.vaadin.com/parking

91. Try the demo at
demo.vaadin.com/parking

92. Try the demo at
demo.vaadin.com/parking

93. Example
https://github.com/jojule/hybrid

94. Web Page Title
Google http://domain.com
First name
Offline Client-side Vaadin-RPC Client-side GWT-RPC Server-side
Last name
cell
Table cell
Table cell Table Table cell Table cell
Table cell
Phone number
Table cell
Table cell Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Email address
Table cell Table cell
Server-side
Far far away, behind the word mountains,
far from the countries Vokalia and
Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove
right at the coast of the Semantics, a
large language ocean.
A small river named Duden flows by their
place and supplies it with the necessary
regelialia. It is a paradisematic country, in
which roasted parts of sentences fly into
your mouth.
Even the all-powerful Pointing has no
control about the blind texts it is an
almost unorthographic life One day
however a small line of blind text by the
name of Lorem Ipsum decided to leave
for the far World of Grammar. The Big
Oxmox advised her not to do so,
because there were thousands of bad
Commas.
Edit Delete New
Save Cancel
First name Last name
Phone number Email address

95. AddressbookBackend
Address Impl

96. Address AddressbookBackend Impl
Frontend
Backend
Server-side
(with Vaadin)
Client-side
(with GWT-RPC)
AddressbookEditor

97. Connector
Address AddressbookBackend Impl
Frontend
Backend
Server-side
(with Vaadin)
Client-side
(with GWT-RPC)
AddressbookEditor
AddressbookEditor
View
Client
Server
create
place

98. Connector
Address AddressbookBackend Impl
Frontend
Backend
Server-side
(with Vaadin)
Client-side
(with GWT-RPC)
AddressbookEditor
AddressbookEditor
View RPCServlet Service
Client
Server
create
place
implements

99. Connector
Address AddressbookBackend Impl
Frontend
Backend
Server-side
(with Vaadin)
Client-side
(with GWT-RPC)
AddressbookEditor
AddressbookEditor
ServiceAsync
RPCServlet Service
View
Client
Server
Proxy
(generated)
create
place
implements
implements
equal

100. Estimating
Complexity

101. Client-side Server-side
1 class
190 LOC
4 classes
2 interfaces
~ 500 LOC 3X

102. RPC
State

103. client
server
Widget
Connector
RPC
Component
7
State
Demo

104. public interface ButtonRpc extends ServerRpc {
public void click(MouseEventDetails details);
}
private ButtonRpc rpc =
RpcProxy.create(ButtonRpc.class, this);
public void onClick(ClickEvent event) {
rpc.click(
new MouseEventDetails(event));
}
private ButtonRpc rpc = new ButtonRpc() {
public void click(
client server
MouseEventDetails details) {
// do stuff
}
};
public Button() {
registerRpc(rpc);
}
Demo

105. JavaScript
Integration

106. Java ⇄ JavaScript RPC

107. Java wrapper for existing JavaScript widget

108. Connector for existing JavaScript widget

109. Server Push

110. @Push MyUI
<async-supported/>
vaadin-push dependency
Demo

111. Responsive

112. // Vaadin UI
protected void init(VaadinRequest request) {
new Responsive(this);
}
// CSS
.v-ui[width-range~="0-800px"] {
/* Styles that apply when the UI's width is
between 0 and 800 pixels */
}
.v-ui[width-range~="801px-"] {
/* Styles that apply when the UI's width is
over 800 pixels */
}
http://demo.vaadin.com/responsive/

113. getting
started

115. Eclipse
Download plugin
from Martketplace

116. IntelliJ IDEA
Built-in support

117. Netbeans
Download plugin
Netbeans Plugin Portal

118. mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=
7.3.0
Maven

119. Download for Free
vaadin.com/book
952-93-1970-1
728 pages
9789529319701
PDF, ePub, HTML

120. Apache
License

121. community of
100.000+
developers
Ohloh
#2 used
Java Web
Framework

122. Who is using
Vaadin?
world of web applications
Giants named HTML5 and JVM p.4 · Coffee with R&D: Turning Java into Java p.28
Moleculenix,
Rums, SentiOne
and many more...
beauty of nature
https://vaadin.com/who-is-using-vaadin
https://vaadin.com/dock

123. ? joonas@vaadin.com
@joonaslehtinen
(405) 513-0739