Presentation at DevNexus today about future Vaadin topics, including the upcoming Vaadin 7.2

1. 7
Vaadin
@joonaslehtinen
Founder & CEO
.2

2. Disclaimer
Vaadin 7.2 is nowhere
near release even though I
though it would have been released
by DevNexus when submitting this
presentation. I hope you would not take this a case
example for missing the estimated release dates. Even though it is clearly the case….
!
Sorry, it will be released soon [when it is ready]

3. 7
.1
11 maintenance
releases since
28.6.2013 - one
every 3 weeks
37 authors, 345
change sets

4. Agenda: The future
Hybrid apps &
RPC
TB4
Beautifying
apps with new
sassy theme
7.2
Power(ful) Grid
Vaadin 8 &
GWT 3
7.2
TK4

5. Hybrid apps?

6. 8.6L/100km
2.5L/100km
0L/100km
13€/100km
4€/100km
1€/100km
550km range!
500km range!
450km range!
gas stations
everywhere
gas stations
everywhere
growing charge
station network

7. Web application layers
Client-side UI
Backend
server
Web
server
Communication
JavaScript

8. Web application layers
Backend
server
Web
server
Server-side UI
Communication
JavaScript
Automated

9. Web application layers
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
GWT
required
required
required
JS
Client-side UI
required
required
required
required
optional
required

10. Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
required
required
optional
required
required
required
Client-side UI
required

11. Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
required
required
optional
required
required
required
Server-side UI & Client-side UI
required

12. Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
required
required
optional
required
required
required
required

13. Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
1 layer
-50% dev. time
required
-50% maintenance
optional
vs
required
required
required
vs
required
required
3 layers
full control over DOM
and communications

14. ity
tiv
or
df
ize
tim uc
Op
od
Pr
O
tim
p
fo
ed
iz
e rol
d ont
i C
s
r
e
v
r
e
S
r
tien
Cl

15. or
df
ize
O
P
d
ro
tim
p
ed
iz
or
f
it
iv
ct
u
rrve
Se
ol
tim
ntr
Op
e
sid
Co
t
n
e
i
l
C

16. Client-side
Use for
Server-side
Use for
•
Offline!
•
Most places ( - 50% cost )!
•
Low latency interaction!
•
High security!
•
Maximum scalability
•
Utilizing full Java platform
Hybrid
Benefits of the both sides, but adds complexity

17. Client-side
Hybrid
Server-side
3 layer UI
1-3 layer UI
1 layer UI
Full control!
You choose!
Automated!
offline ready
architecture
offline for chosen
functionality
connection to
server required

19. http://demo.vaadin.com/parking/

20. Example
https://github.com/jojule/hybrid

21. Web Page Title
Google
http://domain.com
Client-side GWT-RPC
Server-side
First name
Table cell
Table cell
Table cell
Table cell
Table cell
Client-side Vaadin-RPC
Last name
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Delete
New
Last name
Phone number
rd mountains,
Far far away, behind the wo
ia and
far from the countries Vokal
the blind texts.
Consonantia, there live
okmarksgrove
Separated they live in Bo
mantics, a
right at the coast of the Se
large language ocean.
Table cell
Table cell
Edit
First name
Server-side
Email address
Phone number
Email address
Save
Offline
Cancel
n flows by their
A small river named Dude
the necessary
place and supplies it with
matic country, in
regelialia. It is a paradise
tences fly into
which roasted parts of sen
your mouth.
ng has no
Even the all-powerful Pointi
ts it is an
control about the blind tex
ic life One day
almost unorthograph
d text by the
however a small line of blin
cided to leave
name of Lorem Ipsum de
r. The Big
for the far World of Gramma
to do so,
Oxmox advised her not
nds of bad
because there were thousa
Commas.

22. Server-side!
(with Vaadin)
Client-side!
(with GWT-RPC)
AddressbookEditor
create
implements
Proxy
Connector
(generated)
Client
ServiceAsync
Server
AddressbookEditor
equal
place
View
RPCServlet
Frontend
Service
implements
Backend
Address
AddressbookBackend
Impl

23. Estimating
Complexity

24. Client-side
4 classes
2 interfaces
~ 500 LOC
Server-side
3X
1 class
!
190 LOC

25. Vaadin
RPC
State

26. Demo
Widget
Connector
client
server
State
RPC
Component

27. 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));
}
client
Demo
private ButtonRpc rpc = new ButtonRpc() {
public void click(
MouseEventDetails details) {
// do stuff
}
};
!
public Button() {
registerRpc(rpc);
}
server

28. Client-side!
(with Conntector)
Client-side!
(with GWT-RPC)
AddressbookEditor
AddressbookEditor
create
Connector
Client
Client!
Server!
Server
RPC
RPC
create
implements
Proxy
Connector
(generated)
State
ServiceAsync
place & !
serve
View
equal
place
View
RPCServlet
Frontend
Service
implements
Backend
Address
AddressbookBackend
Impl

29. Since 7.1
PUSH

30. @Push MyUI
!
!
<async-supported/>
!
!
vaadin-push dependency

31. JavaScript
Add-ons
6/7

32. Publish API from Java
getPage().getJavaScript().addFunction("myCallback",
new JavaScriptCallback() {
public void call(JSONArray arguments) throws JSONException {
// Do something with the arguments
}
});
Use from JavaScript
window.myCallback('foo', 100);

33. Server-side Java API for Widget
!
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(); }
!
!
}

34. Widget implementation in JavaScript
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);
}
});
}

35. Grid

36. Table: challenges
•
>10 years old architecture
•
Really hard to customize
•
Client-side API missing (and impossible)
•
Performance (heavy DOM tree)
•
Some key features missing (frozen
columns, ..)

37. Grid: New generation table for
the next 10 years?
•
Super fast on all devices
•
Unlimited datasets ("zillion rows")
•
Built for extensibility
•
Superset of features compared to Table
•
Client- and Server API

38. Escalator
Renderer
Connector
Widget
Widget
Widget
Grid
Renderer
Widget
Per column
Widget
Editor row
In headers and cells
(Hierarchical) DataSource
Component
Component
Component
Component
Component
Editor row
Grid
(Hierarchical) DataSource
In headers and cells

39. Escalator

40. Some of the key features in 7.2
•
Renderers
•
Client-side API and data sources
•
Editor rows
•
"Billion pixel scrolling"
•
Hierarchical headers
•
Widgets in headers

41. Some of the key features in 7.x
•
Hierarchy
•
Variable row height
•
Embedding to super long pages (body
scrollbars)
•
Infinite scrolling
•
Components in cells
•
Details rows

42. Valo
Theme

43. Seriously SASSy

44. Variables & functions

45. Mixins

46. Nesting

47. Selector Inheritance

48. <Beat design example>

52. Responsive

53. // 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/

54. TouchKit 4

55. Vaadin TouchKit 4.0
New cross-platform theme
http://demo.vaadin.com/parking/
Windows Phone 8 support

56. Vaadin TouchKit 4.0
New cross-platform theme
http://demo.vaadin.com/parking/
Windows Phone 8 support

57. TestBench 4

58. ElementQuery API
ButtonElement okButton =
$(ButtonElement.class).caption("OK").first();
okButton.focus();
okButton.click();
List<AbstractLayoutElement> list =
$(AbstractLayoutElement.class).all();

59. getting
started

61. Eclipse
Download plugin
from Martketplace

62. IntelliJ IDEA
Built-in support

63. Netbeans
Download plugin
Netbeans Plugin Portal

64. Maven
mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=
7.1.7

65. Download for Free
vaadin.com/book
-93-
1970
-1
01
728 pages
PDF, ePub, HTML

66. Apache
License

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

68. ?
slideshare.com/
joonaslehtinen
joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen