Introduction to web-application development with Vaadin

1. Web application development
with
7
Vaadin
.1
Risto Yrjänä
Vaadin Expert

2. What?
Why?

3. How does it
work?
new L
abel(
“Hell
o wor
ld”)
How do I
use it?

4. How
do I
get
star
ted?
QA

6. User interface
framework for rich
web applications

8. java
html
JavaScript
DOM
AJAX
JSON
…

9. Apache 2.0 license

10. Why?

12. expectations

13. reality

14. Challenge
How to build consumer
grade UX with business
system budget

15. How?
1
Rich components
2
Server + Client
3
Embracing Java

16. User Interface
Data Source
Theme

17. demo.vaadin.com/sampler

18. demo.vaadin.com/dashboard

19. 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
IE 9
98.1%
IE 10
80%
80%
10
IE 10
2.
O
Opera
th
er
Chrome
s
1%
94%
Chrome
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
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
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

20. hundreds of add-on
components

25. User Interface
Data Source
Theme

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

28. User Interface
Data Source
Theme

33. sass
(syntactically awesome stylesheets)

34. 1
Rich components
2
Server + Client
3
Embracing Java

35. Web application layers
Backend
server
Web
server
Communication
JavaScript

36. Web application layers
JS
Backend
server
Web
server
Communication
required
required
required
Java to
JavaScript
JavaScript
required

37. Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
GWT
required
required
required
required
optional
JS
Web application layers
required
required
required
required

38. 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

39. How does it work,
really?

40. Widget
Connector
client
server
State
RPC
Component

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

43. • name=”Johannes”
• button clicked
!
263 bytes

45. • name=”Johannes
• button clicked
!
263
• Add notification
!
269 bytes

46. vaadin.com/learn
https://github.com/vaadin/documentmanager

47. 1
Rich components
2
Server + Client
3
Embracing Java

48. Any
language
on JVM
Java
Scala
Groovy
Clojure
Python
Ruby
Ceylon
…

49. Eclipse
IntelliJ IDEA
Multiple
Netbeans
Maven
development
Gradle
environments
Ant
ŁŁŁ

50. GWT
Compatible

52. Vaadin +=
GWT

54. 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

55. How do I
get started?

56. Eclipse
Download plugin
from Martketplace

57. IntelliJ IDEA
Built-in support

58. Netbeans
Download plugin
Netbeans Plugin Portal

59. Maven
mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=
7.1.7

61. Download for Free
vaadin.com/book
-93-
1970
-1
01
> 600 pages
PDF, ePub, HTML

62. Apache
License

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

64. ?
risto@vaadin.com
!
@ristoy