Introduction to
Peter Lehto
7
Vaadin
.1Javantura 2014,
Zagreb
What?
Why?
How do I
use it?
new Label(“Hello world”)
How does
it work?
How do Igetstarted?
QAWhat’s newin Vaadin
7.2
?
User interface
framework for
Rich Internet
Applications
Why?
To strive on
developer
productivity
JavaScript
DOM
AJAX
JSON
…
htmljava
1Server-side RIA
2Rich components
3Embracing Java
How?
Servlet backend
GWT frontend
Server-side RIA
DOM
Client Server
ViewHTML Page
over HttpResponse
Controller
Model
Parameters over
HttpRequest
DB
4
5
6
2
...
Example
• Initial HTML
• CSS (theme)
• Images
• JavaScript
1.2M
307k
compress
135k
reduced
widgetset
and
theme
• name=”Johannes”
• button clicked
263 bytes
• name=”Johannes”
• button clicked
263 bytes
• Add
notification
269 bytes
Demo
The architecture
of Vaadin
server
client
Component
Widget
Connector
RPC
State
1Server-side RIA
2Rich components
3Embracing Java
How?
User Interface
Data Source
Theme
What kind of devices does your app support?
98.1%
3Desktop
browsers
Browsers developers expect to support in 2013
3.5 Brow...
400+ add-on
components
User Interface
Data Source
Theme
InMemory, Bean, Method,
Collection, JDBC, JPA,
Hibernate, TextFile,
FileSystem, Properties,
EclipseLink, Lucene,
Mockups, ...
User Interface
Data Source
Theme
sass
(syntactically awesome
stylesheets)
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $...
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td,th {padding: 2px}
}
@mixin left($dist) {
float: left;...
1Server-side RIA
2Rich components
3Embracing Java
How?
Any
language
on JVM
Java
Scala
Groovy
Clojure
Python
Ruby
Ceylon
…
Eclipse
IntelliJ IDEA
Netbeans
Maven
Ant
∙ ∙ ∙
Multiple
development
environments
GWT
Compatible
Vaadin
+=
GWT
Server-
Client-
sideOptim
izedfor
ProductivityOptim
izedfor
Control
What’s new in
Vaadin 7.2
Beta release
Roadmapped to Q1/2014
Grid component
Table and TreeTable
component
“replacement”
Usable also as pure
client side widget
Client side data
source ...
Grid component
Low level Escalator
widget for optimized
rendering
performance
Frozen columns
Variable row and
column sizes
Grid component
Components in
header and footer
Clean and Extensible
implementation
New Theme
Customizable theme
based on SASS
Effortlessly change
sizings, paddings,
margins and color
schemes.
Responsive layout
support integrated
New Theme
“Breakpoints” allow
changing layouts
based on device
resolution or browser
...
“Unit tests” for UI
with new
VaadinDriver
Support for TestBench 4.0
Easier and cleaner
way to select and
interact with
ele...
Official support for
Windows Phone
Support for TouchKit 4.0
New touckit theme in
addition of current
iOS theme
How do I
get
started?
Eclipse
Download plugin
from Marketplace
IntelliJ
IDEA
Built-in support
Netbeans
Download plugin
Netbeans Plugin Portal
mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-
application
-DarchetypeVers...
Download for Free
vaadin.com/book
> 600 pages
01
-93-1970-1
PDF, ePub, HTML
Ohloh
#2 used
Java Web
Framework
Community of
100.000+
By Marko Grönroos
ABOUT VAADIN
.dzone.comGetMoreRefcardz!Visitrefcardz.com#85
Getting Started with Vaadin
CONTENTS INCLUDE...
Questions?
Comments?
peter@vaadin.com
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Upcoming SlideShare
Loading in...5
×

Javantura Zagreb 2014 - Vaadin - Peter Lehto

1,466

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,466
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javantura Zagreb 2014 - Vaadin - Peter Lehto

  1. 1. Introduction to Peter Lehto 7 Vaadin .1Javantura 2014, Zagreb
  2. 2. What? Why?
  3. 3. How do I use it? new Label(“Hello world”) How does it work?
  4. 4. How do Igetstarted? QAWhat’s newin Vaadin 7.2
  5. 5. ?
  6. 6. User interface framework for Rich Internet Applications
  7. 7. Why?
  8. 8. To strive on developer productivity
  9. 9. JavaScript DOM AJAX JSON … htmljava
  10. 10. 1Server-side RIA 2Rich components 3Embracing Java How?
  11. 11. Servlet backend GWT frontend
  12. 12. 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
  13. 13. Example
  14. 14. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M 307k compress 135k reduced widgetset and theme
  15. 15. • name=”Johannes” • button clicked 263 bytes
  16. 16. • name=”Johannes” • button clicked 263 bytes • Add notification 269 bytes
  17. 17. Demo
  18. 18. The architecture of Vaadin
  19. 19. server client Component Widget Connector RPC State
  20. 20. 1Server-side RIA 2Rich components 3Embracing Java How?
  21. 21. User Interface Data Source Theme
  22. 22. 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
  23. 23. 400+ add-on components
  24. 24. User Interface Data Source Theme
  25. 25. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  26. 26. User Interface Data Source Theme
  27. 27. sass (syntactically awesome stylesheets)
  28. 28. $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
  29. 29. @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
  30. 30. 1Server-side RIA 2Rich components 3Embracing Java How?
  31. 31. Any language on JVM Java Scala Groovy Clojure Python Ruby Ceylon …
  32. 32. Eclipse IntelliJ IDEA Netbeans Maven Ant ∙ ∙ ∙ Multiple development environments
  33. 33. GWT Compatible
  34. 34. Vaadin += GWT
  35. 35. Server- Client- sideOptim izedfor ProductivityOptim izedfor Control
  36. 36. What’s new in Vaadin 7.2 Beta release Roadmapped to Q1/2014
  37. 37. Grid component Table and TreeTable component “replacement” Usable also as pure client side widget Client side data source API
  38. 38. Grid component Low level Escalator widget for optimized rendering performance Frozen columns Variable row and column sizes
  39. 39. Grid component Components in header and footer Clean and Extensible implementation
  40. 40. New Theme Customizable theme based on SASS Effortlessly change sizings, paddings, margins and color schemes.
  41. 41. Responsive layout support integrated New Theme “Breakpoints” allow changing layouts based on device resolution or browser window size
  42. 42. “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
  43. 43. Official support for Windows Phone Support for TouchKit 4.0 New touckit theme in addition of current iOS theme
  44. 44. How do I get started?
  45. 45. Eclipse Download plugin from Marketplace
  46. 46. IntelliJ IDEA Built-in support
  47. 47. Netbeans Download plugin Netbeans Plugin Portal
  48. 48. mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype- application -DarchetypeVersion= 7.1.11 Maven
  49. 49. Download for Free vaadin.com/book > 600 pages 01 -93-1970-1 PDF, ePub, HTML
  50. 50. Ohloh #2 used Java Web Framework Community of 100.000+
  51. 51. 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...
  52. 52. Questions? Comments? peter@vaadin.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×