Hybrid applications presentation given at San Francisco Java User Group on Dec 10, 2013

1. HybridApps
@joonaslehtinen
Founder & CEO

4. By combining a sophisticated turbocharged
and direct-injected three-cylinder engine
combined with multiple electric motors for
all-wheel drive and a total system output of
362 horsepower and 420 lb-ft. of torque.
Thanks to the car's low curb weight, 0 to 60
mph will come in right around 4.4 seconds
i8

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

8. What about apps?

9. Web application layers
Backend
server
Web
server
Communication
JavaScript

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

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

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

13. 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

14. 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

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

16. 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

17. How does the serverside UI work, really?

19. •
•
•
•
Initial HTML
CSS (theme)
Images
JavaScript
"
1.2M total
compress
307k
reduced
widgetset
135k

21. • name=”Joonas”
• button clicked
"
261 bytes

23. • name=”Joonas”
• button clicked
"
261 bytes
• Add notification
"
267 bytes

24. HybridApps

25. 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

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

28. Vaadin += GWT

30. IE6/7"
JS
IE8"
JS
IE9"
JS
IE10"
JS
IE11"
JS
Safari"
JS
Chrome"
JS
FF"
JS
UI.java
Widgets
Java to JS"
compiler
java.util

31. [super]
DevMode
Optimized
for Google
speed
Static
typing
JSNI
GWT
RPC

32. compile
time
widgets
complexity

36. GWT
Compatible

37. HybridArchitecture

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

46. 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.

47. AddressbookBackend
Address
Impl

48. Server-side"
(with Vaadin)
Client-side"
(with GWT-RPC)
AddressbookEditor
Frontend
Backend
Address
AddressbookBackend
Impl

49. Server-side"
(with Vaadin)
Client-side"
(with GWT-RPC)
AddressbookEditor
create
Connector
Client
Server
AddressbookEditor
place
View
Frontend
Backend
Address
AddressbookBackend
Impl

50. Server-side"
(with Vaadin)
Client-side"
(with GWT-RPC)
AddressbookEditor
create
Connector
Client
Server
AddressbookEditor
place
View
RPCServlet
Frontend
Service
implements
Backend
Address
AddressbookBackend
Impl

51. 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

52. Estimating
Complexity

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

54. Vaadin
RPC
State

55. Demo
Widget
Connector
client
server
State
RPC
Component

56. 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

57. 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

58. PUSH

59. Offline

60. Offline Mode
•
Client-side UI needed as a basis
•
Offline bootstrap
•
Local storage database
2X
client-side
Offline detection
•
at least
5X
>
server-side
•
2-way data synchronization (app specific)
•
Modification logs
•
Sharding logic

61. Use Offline
only when really
really needed

63. 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

64. 7
Vaadin
.1

65. Developer
Productivity
Rich
UX

70. 400 add-on
components

75. Development
cycle

76. JVM

77. Source
https://github.com/vaadin/documentmanager
HOWTO Screencast
https://vaadin.com/learn

78. SUPER
DEVMODE

79. Demo
Sass
Syntactically Awesome Stylesheets

80. JavaScript
Add-ons

81. 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);

82. 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(); }
"
"
}

83. 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);
}
});
}

84. Server Push

85. Vaadin 7.2
Grid
• Client-side data model
• Client-side APIs
• Replaces Table and TreeTable
New theme that leverages SASS
Responsive extension built-in
http://vaadin.com/addon/vaadin-responsive

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

89. getting
started
with
vaadin

91. Eclipse
Download plugin
from Martketplace

92. IntelliJ IDEA
Built-in support

93. Netbeans
Download plugin
Netbeans Plugin Portal

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

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

96. Apache
License

97. community of
100.000+
developers

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