Konferencija Javantura Zagreb 2014 by HUJAK Vaadin - thinking of U and I - by Peter Lehto Vaadin (vaadin.com) je Java framework za rapidni razvoj visoko interaktivnih HTML5 web aplikacija na poslužitelju. On sakriva tehnologije prijenosa dokumenata i stanja (DOM, AJAX, JSON) i omogućuje da web aplikacije budu razvijene u Javi prema metafori desktop aplikacija. Vaadin iskorištava svu moć GWT-a, Java-to-JavaScript prevoditelja, pa je moguće razviti cijeli stog web aplikacija i nove komponente na strani klijenta bez napuštanja Java okruženja. Brzi razvoj olakšava veliki izbor komponenata i trenutni deployment na poslužitelj. Vaadin aplikacije koje se izvode na poslužitelju pružaju veliko povećanje sigurnosti, kao i povezivanje Vaadin sučelja na bilo koji postojeći backend sustav. U predavanju bit će prikazan pregled Vaadin 7.1 mogučnosti, pogled na Vaadin arhitekturu i što se zapravo događa iza kulisa frameworka, a bit će raspravljene i značajke koje donosi Vaadin 7.2.

1. Introduction to
Peter Lehto
7
Vaadin
.1Javantura 2014,
Zagreb

2. What?
Why?

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

4. How do Igetstarted?
QAWhat’s newin Vaadin
7.2

5. ?

8. User interface
framework for
Rich Internet
Applications

9. Why?

10. To strive on
developer
productivity

11. JavaScript
DOM
AJAX
JSON
…
htmljava

12. 1Server-side RIA
2Rich components
3Embracing Java
How?

13. Servlet backend
GWT frontend

14. Server-side RIA
DOM
Client Server
ViewHTML Page
over HttpResponse
Controller
Model
Parameters over
HttpRequest
DB
4
5
6
2
TerminalAdapter
TerminalAdapter
Automated by
the RIA framework
3
7
1
9
8
Handled by the framework

15. Example

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

18. • name=”Johannes”
• button clicked
263 bytes

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

21. Demo

22. The architecture
of Vaadin

30. server
client
Component
Widget
Connector
RPC
State

31. 1Server-side RIA
2Rich components
3Embracing Java
How?

32. User Interface
Data Source
Theme

34. 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%
p support?
98.1%
25.7%
Phones
36.1%
blets
Others
2.1%
“Since gwt is used ext
in the enterprise, this m
explain why tablets are m
popular than support for
phones”
Daniel
iPhoneAndroidWP 8
n UI for
of appstaken
numberpe.
Phones
36.1%
Tablets
Others
“Since gwt is used extensively
in the enterprise, this may
explain why tablets are more
popular than support for
phones”
Daniel
iPad
AndroidWindows 8

35. 400+ add-on
components

36. User Interface
Data Source
Theme

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

40. User Interface
Data Source
Theme

43. sass
(syntactically awesome
stylesheets)

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

45. @mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td,th {padding: 2px}
}
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
@include table-base;
}
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data #th {
padding: 2px;
}
.scss .css
mixins

46. 1Server-side RIA
2Rich components
3Embracing Java
How?

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

48. Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
∙ ∙ ∙
Multiple
development
environments

49. GWT
Compatible

51. Vaadin
+=
GWT

52. Server-
Client-
sideOptim
izedfor
ProductivityOptim
izedfor
Control

53. What’s new in
Vaadin 7.2
Beta release
Roadmapped to Q1/2014

54. Grid component
Table and TreeTable
component
“replacement”
Usable also as pure
client side widget
Client side data
source API

55. Grid component
Low level Escalator
widget for optimized
rendering
performance
Frozen columns
Variable row and
column sizes

56. Grid component
Components in
header and footer
Clean and Extensible
implementation

57. New Theme
Customizable theme
based on SASS
Effortlessly change
sizings, paddings,
margins and color
schemes.

58. Responsive layout
support integrated
New Theme
“Breakpoints” allow
changing layouts
based on device
resolution or browser
window size

59. “Unit tests” for UI
with new
VaadinDriver
Support for TestBench 4.0
Easier and cleaner
way to select and
interact with
elements in DOM tree

60. Official support for
Windows Phone
Support for TouchKit 4.0
New touckit theme in
addition of current
iOS theme

61. How do I
get
started?

62. Eclipse
Download plugin
from Marketplace

63. IntelliJ
IDEA
Built-in support

64. Netbeans
Download plugin
Netbeans Plugin Portal

65. mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-
application
-DarchetypeVersion=
7.1.11
Maven

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

68. Ohloh
#2 used
Java Web
Framework
Community of
100.000+

69. By Marko Grönroos
ABOUT VAADIN
.dzone.comGetMoreRefcardz!Visitrefcardz.com#85
Getting Started with Vaadin
CONTENTS INCLUDE:
About Vaadin
Creating An Application
Components
Layout Components
Themes
Data Binding and more...
Vaadin is a server-side Ajax web application development
framework that allows you to build web applications just like
with traditional desktop frameworks, such as AWT or Swing. An
application is built from user interface components contained
hierarchically in layout components.
In the server-driven model, the application code runs on
a server, while the actual user interaction is handled by a
client-side engine running in the browser. The client-server
communications and any client-side technologies, such as
HTML and JavaScript, are invisible to the developer. As the
client-side engine runs as JavaScript in the browser, there is no
need to install plug-ins. Vaadin is released under the Apache
License 2.0.
Figure 1: Vaadin Client-Server Architecture
If the built-in selection of components is not enough, you can
Figure 2: Architecture for Vaadin Applications
Hot
Tip
You can get a reference to the application object
from any component attached to the application with
Event Listeners
In the event-driven model, user interaction with user interface
components triggers server-side events, which you can handle
Web
Browser
Client-Side
Engine
Java
Web
Server
Vaadin
UI
Components
Your
Java
Application
Web
Service
EJB
DB
Servlet Container
User
Application
Event
Listener
Data
Model
Application
Themes
Application
Resources
Default
Theme
File
Resources
External
Resources
Database
Data
Binding
Inherits Events Changes
AJAX Requests
Inherits
UI
Component
Java
Servlet
Application
Class
Web
Browser
Client-Side
Engine
brought to you by...

70. Questions?
Comments?
peter@vaadin.com