Slides from Michael Tzukanov talk @ codemotion roma 2014

1. Introduction to Web application
development with
Michael Tzukanov
Vaadin Developer
7Vaadin
.1

2. What?
Why?

3. How do I
use it?
new Label(“Hello world”)
How does it
work?

4. How do Iget started?
QA

6. User interface
framework for rich
web applications

8. JavaScript
DOM
AJAX
JSON
…
htmljava

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?
1Rich components
2Server + Client
3Embracing Java

16. User Interface
Data Source
Theme

17. demo.vaadin.com/sampler

18. demo.vaadin.com/dashboard

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

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

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

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

37. Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
requiredrequired
JS
required required

38. Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required

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

40. How does it work,
really?

41. server
client
Component
Widget
Connector
RPC
State

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

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

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

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

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

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

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

51. GWT
Compatible

53. Vaadin +=
GWT

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. mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=
7.1.7
Maven

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

62. Apache
License

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

64. ? michael.tzukanov
@vaadin.com
slideshare.net/
MTzukanov