vaadin intro at gwt.create conference
DESCRIPTION
Introduction to Vaadin given at GWT.create conferenceTRANSCRIPT
![Page 1: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/1.jpg)
Vaadin7introduction to
@joonaslehtinen Founder & CEO
![Page 2: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/2.jpg)
Intro to Vaadin
new Label(“Hello world”)
![Page 3: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/3.jpg)
New in
7
![Page 4: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/4.jpg)
Getting started
QA
![Page 5: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/5.jpg)
![Page 6: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/6.jpg)
User interface framework for rich
web applications
![Page 7: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/7.jpg)
Sounds like GWT? Kinda…
![Page 8: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/8.jpg)
Building blocks
![Page 9: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/9.jpg)
Developer
Productivity
Rich
UX
![Page 10: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/10.jpg)
![Page 11: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/11.jpg)
htmljava
![Page 12: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/12.jpg)
123Key Ideas
![Page 13: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/13.jpg)
1Rich Components
![Page 14: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/14.jpg)
User Interface Data Source
Theme
![Page 17: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/17.jpg)
![Page 18: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/18.jpg)
![Page 19: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/19.jpg)
![Page 20: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/20.jpg)
1.6 Going mobile
GWT is a versatile technology that allows developers to create application UI for desktop, tablet, and mobile consumption. As can be expected, over 98% of apps support desktop browsers, but we found it interesting that tablets had overtaken phones (at least when it came to support from GWT-based apps). In US, the number of apps supporting tablets was as high as 46%, while it was just 34% in Europe.
What kind of devices does your app support?
98.1%25.7%
Phones
36.1%
Tablets
Desktop browsers
Others
2.1%
“Since gwt is used extensively in the enterprise, this may explain why tablets are more popular than support for phones”
Daniel
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 10IE 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 10IE 9 IE 10 Firefox
79% 80% 94% 94%
1.6 Going mobile
GWT is a versatile technology that allows developers to create application UI for
desktop, tablet, and mobile consumption. As can be expected, over 98% of apps
support desktop browsers, but we found it interesting that tablets had overtaken
phones (at least when it came to support from GWT-based apps). In US, the number
of apps supporting tablets was as high as 46%, while it was just 34% in Europe.
What kind of devices does your app support?
98.1%
25.7%
Phones
36.1%
Tablets
Desktop
browsers
Others2.1%
“Since gwt is used extensively
in the enterprise, this may
explain why tablets are more
popular than support for
phones”
Daniel
iPhone Android
WP 8
1.6 Going mobile
GWT is a versatile technology that allows developers to create application UI for
desktop, tablet, and mobile consumption. As can be expected, over 98% of apps
support desktop browsers, but we found it interesting that tablets had overtaken
phones (at least when it came to support from GWT-based apps). In US, the number
of apps supporting tablets was as high as 46%, while it was just 34% in Europe.
What kind of devices does your app support?
98.1%
25.7%
Phones
36.1%
Tablets
Desktop
browsers
Others2.1%
“Since gwt is used extensively
in the enterprise, this may
explain why tablets are more
popular than support for
phones”
Daniel
iPad Android Windows 8
![Page 21: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/21.jpg)
350+ add-on components
![Page 22: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/22.jpg)
![Page 23: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/23.jpg)
![Page 24: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/24.jpg)
![Page 25: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/25.jpg)
![Page 26: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/26.jpg)
User Interface Data Source
Theme
![Page 31: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/31.jpg)
User Interface Data Source
Theme
![Page 32: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/32.jpg)
![Page 33: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/33.jpg)
InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
![Page 34: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/34.jpg)
2Server + Client
![Page 35: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/35.jpg)
Web application layers
Backend server
Web server
Commu- nication JavaScript
![Page 36: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/36.jpg)
Web application layers
JavaScriptJava to JavaScript
Web server
Backend server
required optional optionalrequired
Commu- nication
optional
Vaad
in
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
![Page 37: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/37.jpg)
Web application layers
JavaScriptJava to JavaScript
Web server
Backend server
required optional optionalrequired
Commu- nication
optional
Vaad
in
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
1 layer vs
3 layers
-50% codelines -50% development -50% maintenance easier to learn
![Page 38: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/38.jpg)
Googlehttp://domain.com
Web Page Title
First name
Table cell
Table cell
Phone number
Table cell
Table cell
Table cellTable cell
Table cell
Table cell
Table cell
Table cell Table cell
Table cell
Table cell
Table cell Table cell
Table cell
Last name
Table cell
Table cell
Email address
Table cellTable cell
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas.
Server-side
OfflineClient-side Vaadin-RPCClient-side GWT-RPCServer-side
Edit Delete New
Save Cancel
First name Last name
Phone number Email address
![Page 39: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/39.jpg)
AddressbookBackendAddress ImplBackendFrontend
Server-side!(with Vaadin)
Client-side!(with GWT-RPC)
AddressbookEditor
AddressbookEditor
RPCServlet Service
ServiceAsyncClient
Server
Proxy(generated)
implements
implements
equal~150loc
68loc
~270loc
0loc
17loc 19loc
![Page 40: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/40.jpg)
How does it work, really?
![Page 41: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/41.jpg)
![Page 42: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/42.jpg)
• Initial HTML • CSS (theme) • Images • JavaScript !1.2M total
307k
compress
135k
reduced widgetset
![Page 43: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/43.jpg)
• name=”Joonas” • button clicked !261 bytes
![Page 44: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/44.jpg)
![Page 45: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/45.jpg)
• name=”Joonas” • button clicked !261 bytes
• Add notification !267 bytes
![Page 46: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/46.jpg)
Development cycle
![Page 47: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/47.jpg)
![Page 48: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/48.jpg)
https://github.com/vaadin/documentmanager
https://vaadin.com/learn
Source
HOWTO Screencast
![Page 49: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/49.jpg)
3Embracing Java
![Page 50: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/50.jpg)
Any language on JVM
![Page 51: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/51.jpg)
Internet Explorer Chrome Firefox Safari Opera
iOS Android
![Page 52: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/52.jpg)
No browser plugins
!
Nothing to install
![Page 53: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/53.jpg)
Servlet Portlet
(most) clouds
![Page 54: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/54.jpg)
Eclipse IntelliJ IDEA
Netbeans Maven
Ant Ł Ł Ł
![Page 55: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/55.jpg)
Vaadin += GWT
1/7
![Page 56: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/56.jpg)
![Page 57: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/57.jpg)
![Page 58: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/58.jpg)
![Page 59: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/59.jpg)
GWT Compatible
![Page 60: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/60.jpg)
Server-
Client-
side
Optim
ized for
Productivity
Opt
imiz
ed fo
r
Cont
rol
![Page 61: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/61.jpg)
Architecture
![Page 62: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/62.jpg)
![Page 63: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/63.jpg)
BleedingedgE
![Page 64: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/64.jpg)
Complete stack
Renewed from Inside
Sass
JS
HTML5+= GWT
RPC State
UI
Field
Push
![Page 66: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/66.jpg)
SassSyntactically Awesome Stylesheets
Demo
![Page 67: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/67.jpg)
JavaScript Add-ons
![Page 68: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/68.jpg)
getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } });
Publish API from Java
window.myCallback('foo', 100);
Use from JavaScript
![Page 69: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/69.jpg)
!public class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { addFunction("plotClick", new JavaScriptFunction() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); }! public static class MyWidgetState extends JavaScriptComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); } public MyWidgetState getState() { return (MyWidgetState) super.getState(); }
!!}
Server-side Java API for Widget
![Page 70: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/70.jpg)
window.com_example_MyWidget = function() { var element = $(this.getWidgetElement());
// Draw a plot for any server-side (plot data) state change this.onStateChange = function() { $.plot(element, this.getState().series, {grid: {clickable: true}}); }!
// Communicate local events back to server-side component element.bind('plotclick', function(event, point, item) { if (item) {
var onPlotClick = this.getCallback("plotClick"); onPlotClick(item.seriesIndex, item.dataIndex); } });}
Widget implementation in JavaScript
![Page 71: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/71.jpg)
Server Push
![Page 72: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/72.jpg)
@Push MyUI !
!
<async-supported/> !
!
vaadin-push dependency
![Page 73: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/73.jpg)
RPC State
![Page 74: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/74.jpg)
server
client
Component
Widget
Connector
RPC
7State
Demo
![Page 75: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/75.jpg)
getting started
![Page 76: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/76.jpg)
![Page 77: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/77.jpg)
Eclipse
Download plugin from Martketplace
![Page 78: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/78.jpg)
IntelliJ IDEA
Built-in support
![Page 79: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/79.jpg)
Netbeans
Download plugin Netbeans Plugin Portal
![Page 80: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/80.jpg)
mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.9
Maven
![Page 81: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/81.jpg)
Download for Freevaadin.com/book
728 pages
9 789529 319701
ISBN 978-952-93-1970-1
PDF, ePub, HTML
![Page 82: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/82.jpg)
Apache License
![Page 83: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/83.jpg)
community of
~100.000 developers
Ohloh #2 used
Java Web Framework
![Page 84: Vaadin intro at GWT.create conference](https://reader036.vdocument.in/reader036/viewer/2022062405/554f497fb4c905b9508b479b/html5/thumbnails/84.jpg)
Hybrid Applications !
Theming Workshop !
Vaadin Intro Workshop
1:30pm