HybridApps
@joonaslehtinen
Founder & CEO
By combining a sophisticated turbocharged
and direct-injected three-cylinder engine
combined with multiple electric motors...
8.6L/100km

2.5L/100km

0L/100km

13€/100km

4€/100km

1€/100km

550km range"

500km range"

450km range"

gas stations

e...
What about apps?
Web application layers

Backend
server

Web
server

Communication

JavaScript
Web application layers
Client-side UI
Backend
server

Web
server

Communication

JavaScript
Web application layers

Backend
server

Web
server

Server-side UI

Communication

JavaScript

Automated
Web application layers

JS

Backend
server

Web
server

Communication

required

required

required

Java to
JavaScript

J...
Web application layers
Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

GWT

required

required
...
Web application layers

JS

GWT Vaadin

Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

require...
Web application layers

JS

GWT Vaadin

Backend
server

Web
server

Communication

Java to
JavaScript

JavaScript

require...
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
How does the serverside UI work, really?
•
•
•
•

Initial HTML
CSS (theme)
Images
JavaScript

"

1.2M total

compress

307k
reduced
widgetset

135k
• name=”Joonas”
• button clicked
"

261 bytes

• name=”Joonas”
• button clicked
"

261 bytes

• Add notification
"

267 bytes

HybridApps
Client-side
Use for

Server-side
Use for

•

Offline"

•

Most places ( - 50% cost )"

•

Low latency interaction"

•

High...
http://demo.vaadin.com/parking/
Vaadin += GWT
IE6/7"
JS

IE8"
JS

IE9"
JS

IE10"
JS

IE11"
JS

Safari"
JS

Chrome"
JS

FF"
JS

UI.java

Widgets

Java to JS"
compiler

j...
[super]
DevMode

Optimized
for Google
speed

Static
typing

JSNI

GWT
RPC
compile
time

widgets

complexity
GWT
Compatible
HybridArchitecture
Example

https://github.com/jojule/hybrid
Web Page Title

Google

http://domain.com

Client-side GWT-RPC

Server-side

First name
Table cell
Table cell
Table cell
T...
AddressbookBackend

Address

Impl
Server-side"
(with Vaadin)

Client-side"
(with GWT-RPC)

AddressbookEditor

Frontend
Backend

Address

AddressbookBackend
...
Server-side"
(with Vaadin)

Client-side"
(with GWT-RPC)

AddressbookEditor
create

Connector
Client
Server

AddressbookEdi...
Server-side"
(with Vaadin)

Client-side"
(with GWT-RPC)

AddressbookEditor
create

Connector
Client
Server

AddressbookEdi...
Server-side"
(with Vaadin)

Client-side"
(with GWT-RPC)

AddressbookEditor
create
implements

Proxy


Connector

(generate...
Estimating
Complexity
Client-side

4 classes
2 interfaces
~ 500 LOC

Server-side

3X

1 class
"

190 LOC
Vaadin
RPC
State
Demo

Widget

Connector
client
server

State
RPC

Component
public interface ButtonRpc extends ServerRpc {
public void click(MouseEventDetails details);
}

private ButtonRpc rpc =
Rp...
Client-side"
(with Conntector)

Client-side"
(with GWT-RPC)

AddressbookEditor

AddressbookEditor
create

Connector
Client...
PUSH
Offline
Offline Mode
•

Client-side UI needed as a basis

•

Offline bootstrap

•

Local storage database

2X

client-side

Offline ...
Use Offline
only when really
really needed
Client-side

Hybrid

Server-side

3 layer UI

1-3 layer UI

1 layer UI

Full control"

You choose"

Automated"

offline rea...
7

Vaadin

.1
Developer
Productivity

Rich
UX
400 add-on
components
Development
cycle
JVM
Source
https://github.com/vaadin/documentmanager
HOWTO Screencast
https://vaadin.com/learn
SUPER

DEVMODE
Demo

Sass

Syntactically Awesome Stylesheets
JavaScript
Add-ons
Publish API from Java
getPage().getJavaScript().addFunction("myCallback",	
	 new JavaScriptCallback() {	
	 	 public void c...
Server-side Java API for Widget
"
public class MyWidget extends AbstractJavaScriptComponent {	
	 public MyWidget() {	
	 	 ...
Widget implementation in JavaScript
window.com_example_MyWidget = function() {	
	 var element = $(this.getWidgetElement())...
Server Push
Vaadin 7.2
Grid

• Client-side data model

• Client-side APIs

• Replaces Table and TreeTable
New theme that leverages SAS...
// Vaadin UI
protected void init(VaadinRequest request) {
new Responsive(this);
}
"
"

// CSS
.v-ui[width-range~="0-800px"...
getting
started
with
vaadin
Eclipse

Download plugin
from Martketplace
IntelliJ IDEA

Built-in support
Netbeans

Download plugin
Netbeans Plugin Portal
Maven

mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-Darchety...
Download for Free
vaadin.com/book

-93-

1970
-1

01

728 pages
PDF, ePub, HTML
Apache
License
community of

100.000+
developers
?

slideshare.com/
joonaslehtinen

joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Hybrid applications
Upcoming SlideShare
Loading in …5
×

Hybrid applications

961 views

Published on

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

Published in: Technology
  • Be the first to comment

Hybrid applications

  1. 1. HybridApps @joonaslehtinen Founder & CEO
  2. 2. 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
  3. 3. 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
  4. 4. What about apps?
  5. 5. Web application layers Backend server Web server Communication JavaScript
  6. 6. Web application layers Client-side UI Backend server Web server Communication JavaScript
  7. 7. Web application layers Backend server Web server Server-side UI Communication JavaScript Automated
  8. 8. Web application layers JS Backend server Web server Communication required required required Java to JavaScript JavaScript required
  9. 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. 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 Server-side UI & Client-side UI required
  11. 11. 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
  12. 12. 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
  13. 13. How does the serverside UI work, really?
  14. 14. • • • • Initial HTML CSS (theme) Images JavaScript " 1.2M total
 compress 307k reduced widgetset 135k
  15. 15. • name=”Joonas” • button clicked " 261 bytes

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

  17. 17. HybridApps
  18. 18. 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
  19. 19. http://demo.vaadin.com/parking/
  20. 20. Vaadin += GWT
  21. 21. 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
  22. 22. [super] DevMode Optimized for Google speed Static typing JSNI GWT RPC
  23. 23. compile time widgets complexity
  24. 24. GWT Compatible
  25. 25. HybridArchitecture
  26. 26. Example
 https://github.com/jojule/hybrid
  27. 27. 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.
  28. 28. AddressbookBackend Address Impl
  29. 29. Server-side" (with Vaadin) Client-side" (with GWT-RPC) AddressbookEditor Frontend Backend Address AddressbookBackend Impl
  30. 30. Server-side" (with Vaadin) Client-side" (with GWT-RPC) AddressbookEditor create Connector Client Server AddressbookEditor place View Frontend Backend Address AddressbookBackend Impl
  31. 31. 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
  32. 32. 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
  33. 33. Estimating Complexity
  34. 34. Client-side 4 classes 2 interfaces ~ 500 LOC Server-side 3X 1 class " 190 LOC
  35. 35. Vaadin RPC State
  36. 36. Demo Widget Connector client server State RPC Component
  37. 37. 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
  38. 38. 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
  39. 39. PUSH
  40. 40. Offline
  41. 41. 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
  42. 42. Use Offline only when really really needed
  43. 43. 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
  44. 44. 7 Vaadin .1
  45. 45. Developer Productivity Rich UX
  46. 46. 400 add-on components
  47. 47. Development cycle
  48. 48. JVM
  49. 49. Source https://github.com/vaadin/documentmanager HOWTO Screencast https://vaadin.com/learn
  50. 50. SUPER DEVMODE
  51. 51. Demo Sass
 Syntactically Awesome Stylesheets
  52. 52. JavaScript Add-ons
  53. 53. 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);
  54. 54. 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(); } " " }
  55. 55. 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); } }); }
  56. 56. Server Push
  57. 57. 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 

  58. 58. // 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/
  59. 59. getting started with vaadin
  60. 60. Eclipse Download plugin from Martketplace
  61. 61. IntelliJ IDEA Built-in support
  62. 62. Netbeans Download plugin Netbeans Plugin Portal
  63. 63. Maven mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.7
  64. 64. Download for Free vaadin.com/book -93- 1970 -1 01 728 pages PDF, ePub, HTML
  65. 65. Apache License
  66. 66. community of 100.000+ developers
  67. 67. ? slideshare.com/ joonaslehtinen joonas@vaadin.com vaadin.com/joonas @joonaslehtinen

×