KEMBAR78
Introduction to Web application development with Vaadin 7.1 - Tzukanov | PDF
Introduction to Web application
development with
Michael Tzukanov
Vaadin Developer
7Vaadin
.1
What?
Why?
How do I
use it?
new Label(“Hello world”)
How does it
work?
How do Iget started?
QA
User interface
framework for rich
web applications
JavaScript
DOM
AJAX
JSON
…
htmljava
Apache 2.0 license
Why?
expectations
reality
Challenge
How to build consumer
grade UX with business
system budget
How?
1Rich components
2Server + Client
3Embracing Java
User Interface
Data Source
Theme
demo.vaadin.com/sampler
demo.vaadin.com/dashboard
What kind of devices does your app support?
98.1%
3Desktop
browsers
Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
s
your app
support?
25.7%
Phones
36.1%
O
thers2.1%
“Since gw
in
the enterp
explain
why tab
popular than
supp
phones”
Daniel
iPhone
Android
W
P
8
pplication
UI for
r 98%
of apps
overtaken
the
num
ber
rope.
36.1%
Tablets
“Since
gwt is used
extensi
in
the
enterprise, this m
explain
why tablets
popular than
su
phones”
iPadAndroid
W
indow
s
8
hundreds of add-on
components
User Interface
Data Source
Theme
InMemory, Bean, Method,
Collection, JDBC, JPA, Hibernate,
TextFile, FileSystem, Properties,
EclipseLink, Lucene, Mockups,
GAE, ...
User Interface
Data Source
Theme
sass(syntactically awesome stylesheets)
$blue: #3bbfce;!
$margin: 16px;!
!
.content-navigation {!
border-color: $blue;!
color:!
darken($blue, 9%);!
}!
!
.border {!
padding: $margin / 2;!
margin: $margin / 2;!
border-color: $blue;!
}
.scss
constants and functions
.content-navigation {!
border-color: #3bbfce;!
color: #2b9eab;!
}!
!
.border {!
padding: 8px;!
margin: 8px;!
border-color: #3bbfce;!
}
.css
SASS
COMPILER
1Rich components
2Server + Client
3Embracing Java
Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
requiredrequired
JS
required required
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
nication
optional
Vaadin
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required
How does it work,
really?
server
client
Component
Widget
Connector
RPC
State
• Initial HTML
• CSS (theme)
• Images
• JavaScript
!
1.2M total

307k
compress
135k
reduced
widgetset
and theme
• name=”Johannes”
• button clicked
!
263 bytes

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

https://github.com/vaadin/documentmanager
vaadin.com/learn
1Rich components
2Server + Client
3Embracing Java
Any
language
on JVM
Java
Scala
Groovy
Clojure
Python
Ruby
Ceylon
…
Eclipse
IntelliJ IDEA
Netbeans
Maven
Gradle
Ant
Ł Ł Ł
Multiple
development
environments
GWT
Compatible
Vaadin +=
GWT
How do I
get started?
Eclipse
Download plugin
from Martketplace
IntelliJ IDEA
Built-in support
Netbeans
Download plugin
Netbeans Plugin Portal
mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=
7.1.7
Maven
Download for Free
vaadin.com/book
> 600 pages
01
-93-1970-1
PDF, ePub, HTML
Apache
License
community of
100.000+
developers
Ohloh
#2 used
Java Web
Framework
? michael.tzukanov
@vaadin.com
slideshare.net/
MTzukanov

Introduction to Web application development with Vaadin 7.1 - Tzukanov