Hybrid applications
Upcoming SlideShare
Loading in...5
×
 

Hybrid applications

on

  • 695 views

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

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

Statistics

Views

Total Views
695
Views on SlideShare
693
Embed Views
2

Actions

Likes
1
Downloads
12
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Hybrid applications Hybrid applications Presentation Transcript

    • HybridApps @joonaslehtinen Founder & CEO
    • 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
    • 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
    • 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 JavaScript required
    • 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
    • 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
    • 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
    • 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 security" • Maximum scalability • Utilizing full Java platform Hybrid Benefits of the both sides, but adds complexity
    • 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 java.util
    • [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 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.
    • AddressbookBackend Address Impl
    • Server-side" (with Vaadin) Client-side" (with GWT-RPC) AddressbookEditor Frontend Backend Address AddressbookBackend Impl
    • Server-side" (with Vaadin) Client-side" (with GWT-RPC) AddressbookEditor create Connector Client Server AddressbookEditor place View Frontend Backend Address AddressbookBackend Impl
    • 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
    • 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
    • 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 = 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
    • 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
    • PUSH
    • Offline
    • 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
    • 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 ready
 architecture offline for chosen
 functionality connection to
 server required
    • 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 call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScript window.myCallback('foo', 100);
    • 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(); } " " }
    • 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); } }); }
    • Server Push
    • 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 

    • // 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 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 -DarchetypeVersion= 7.1.7
    • 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