Date post: | 11-Nov-2014 |
Category: |
Technology |
Upload: | joonas-lehtinen |
View: | 342 times |
Download: | 2 times |
Vaadin7introduction
@joonaslehtinen Founder & CEO
Intro to Vaadin
new Label(“Hello world”)
What’s new
Getting started
QA
User interface framework for rich
web applications
User Interface Components
Developer
Productivity
Rich
UX
htmljava
123Key Ideas
1Rich Components
User Interface Data Source
Theme
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
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
++
462 add-on components
User Interface Data Source
Theme
User Interface Data Source
Theme
InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
2Server + Client
Web application layers
Backend server
Web server
Commu- nication JavaScript
Web application layers
Backend server
Web server
Commu- nication JavaScript
Client-side UI
Web application layers
Backend server
Web server
Commu- nication JavaScript
Server-side UI Automated
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
Client-side UIServer-side UI &
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% dev. time -50% maintenance vs full control over DOM and communications
How does server-side UI work, really?
• Initial HTML • CSS (theme) • Images • JavaScript
1.2M total
307k
compress
135k
reduced widgetset
• name=”Joonas” • button clicked
261 bytes
• name=”Joonas” • button clicked
261 bytes
• Add notification
267 bytes
Hello World!
3Embracing Java
Any language on JVM
Internet Explorer Chrome Firefox Safari Opera
iOS Android
No browser plugins
Nothing to install
Servlet Portlet
(most) clouds · · ·
Anything Java
Eclipse IntelliJ IDEA
Netbeans Maven / Gradle / Ant
· · · Anything Java
Java EE Spring OSGi REST
· · · Anything Java
Vaadin7series
v3 2002
v0.1 2001
Open Source
v4 2006
Ajax
v5 2007
72013v6
2009
Complete stack
Renewed from Inside
Sass
JS
HTML5+= GWT
RPC State
UI
Field
Push
Vaadin += GWT
Server-
Client-
side
Optim
ized for
Productivity
Opt
imiz
ed fo
r
Cont
rol
Architecture
Hybrid apps?
Server-sideClient-side
Use for
• Offline• Low latency interaction• Maximum scalability
Use for
• Most places ( - 50% cost )• High security• Utilizing full Java platform
Benefits of the both sides, but adds complexity
Hybrid
http://domain.com
Web Page Title
First nameTable cell
Table cell
Phone number
Table cell
Table cell
Table cellTable cellTable cell
Table cell
Table cellTable cell
Table cellTable cell
Table cell
Table cell Table cell
Table cell
Last name
Table cellTable 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-RPC
Client-side GWT-RPCServer-side
Edit Delete New
Save Cancel
First name Last name
Phone number Email address
AddressbookBackend
Address Impl
AddressbookBackendAddress ImplBackendFrontend
Server-side(with Vaadin)
Client-side(with GWT-RPC)
AddressbookEditor
AddressbookBackendAddress ImplBackendFrontend
Server-side(with Vaadin)
Client-side(with GWT-RPC)
AddressbookEditor
AddressbookEditor
View
Connector
Client
Server
create
place
AddressbookBackendAddress ImplBackendFrontend
Server-side(with Vaadin)
Client-side(with GWT-RPC)
AddressbookEditor
AddressbookEditor
RPCServlet ServiceView
Connector
Client
Server
create
place
implements
AddressbookBackendAddress ImplBackendFrontend
Server-side(with Vaadin)
Client-side(with GWT-RPC)
AddressbookEditor
AddressbookEditor
RPCServlet Service
ServiceAsync
View
Connector
Client
Server
Proxy(generated)
create
place
implements
implements
equal
Estimating Complexity
Server-sideClient-side
1 class
190 LOC
4 classes 2 interfaces ~ 500 LOC 3X
RPC State
server
client
Component
Widget
Connector
RPC
7State
Demo
public interface ButtonRpc extends ServerRpc { public void click(MouseEventDetails details); }
private ButtonRpc rpc = RpcProxy.create(ButtonRpc.class, this);
public void onClick(ClickEvent event) { rpc.click( new MouseEventDetails(event)); }
serverclient
private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff } };
public Button() { registerRpc(rpc); }
Demo
JavaScript Integration
Java ⇄ JavaScript RPC
Java wrapper for existing JavaScript widget
Connector for existing JavaScript widget
Server Push
@Push MyUI
<async-supported/>
vaadin-push dependency
Demo
Responsive
// Vaadin UI protected void init(VaadinRequest request) { new Responsive(this); }
// CSS .v-ui[width-range~="0-800px"] { /* Styles that apply when the UI's width is between 0 and 800 pixels */ } .v-ui[width-range~="801px-"] { /* Styles that apply when the UI's width is over 800 pixels */ }
http://demo.vaadin.com/responsive/
getting 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.3.0
Maven
Download for Freevaadin.com/book
728 pages
9 789529 319701
ISBN 978-952-93-1970-1
PDF, ePub, HTML
Apache License
community of
100.000+ developers
Ohloh #2 used
Java Web Framework
Who is using Vaadin?
wor
ld o
f web
app
licat
ions
show the beauty of nature
Giants named HTML5 and JVM p.4 · Coffee with R&D: Turning Java into Java p.28
Moleculenix, Rums, SentiOne
and many more...https://vaadin.com/who-is-using-vaadin
https://vaadin.com/dock
? [email protected] @joonaslehtinen(405) 513-0739