Hybrid webinar

1,148 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,148
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
231
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hybrid webinar

  1. 1. HybridApps @artursignell VP of R&D @joonaslehtinen Founder & CEO
  2. 2. Warning
 Just an idea - not a proven best practice
  3. 3. Hybrid?
  4. 4. Web application layers Backend server Web server Commu- nication JavaScript
  5. 5. Web application layers Backend server Web server Commu- nication JavaScript Client-side UI
  6. 6. Web application layers Backend server Web server Commu- nication JavaScript Server-side UI Automated
  7. 7. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication requiredrequired JS required required
  8. 8. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication required optionalrequired GWT requiredrequired JS requiredrequired required required Client-side UI
  9. 9. Web application layers JavaScript Java to JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required Client-side UIServer-side UI &
  10. 10. Web application layers JavaScript Java to JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required 1 layer vs 3 layers -50% dev. time -50% maintenance vs full control over DOM and communications
  11. 11. Server- Client- side Optim izedfor Productivity Optim izedfor Control
  12. 12. HybridArchitecture
  13. 13. 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
  14. 14. http://demo.vaadin.com/parking/
  15. 15. HOW?
  16. 16. Google http://domain.com Web Page Title First name Table cell Table cell Phone number 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 Table cell Last name Table cell Table cell Email address Table cell Table 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 Offline Client-side Vaadin-RPC Client-side GWT-RPC Server-side Edit Delete New Save Cancel First name Last name Phone number Email address
  17. 17. https://github.com/jojule/hybrid
  18. 18. AddressbookBackend Address Impl
  19. 19. AddressbookBackendAddress Impl Backend Frontend Server-side! (with Vaadin) Client-side! (with GWT-RPC) AddressbookEditor
  20. 20. AddressbookBackendAddress Impl Backend Frontend Server-side! (with Vaadin) Client-side! (with GWT-RPC) AddressbookEditor AddressbookEditor View Connector Client Server create place
  21. 21. AddressbookBackendAddress Impl Backend Frontend Server-side! (with Vaadin) Client-side! (with GWT-RPC) AddressbookEditor AddressbookEditor RPCServlet ServiceView Connector Client Server create place implements
  22. 22. AddressbookBackendAddress Impl Backend Frontend 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
  23. 23. Estimating Complexity
  24. 24. Server-sideClient-side 1 class ! 190 LOC 4 classes 2 interfaces ~ 500 LOC 3X
  25. 25. Vaadin RPC State
  26. 26. server client Component Widget Connector RPC State Demo
  27. 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)); } serverclient private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff } }; ! public Button() { registerRpc(rpc); } Demo
  28. 28. AddressbookBackendAddress Impl Backend Frontend Client-side! (with Conntector) Client-side! (with GWT-RPC) AddressbookEditor RPCServlet Service ServiceAsync View Client Server place implements equal View place & ! serve AddressbookEditor State Server! RPC Client! RPC Connector Proxy
 (generated) create implements Connector create
  29. 29. PUSH
  30. 30. Offline
  31. 31. <html manifest="hybrid.appcache"> ! ! <inherits name="com.vaadin.Vaadin" /> 
 <entry-point class="example.client.OfflineEntry"/> ! ! rootPanel.add(new AddressbookEditor()); Offline Bootstrap CACHE MANIFEST! ! CACHE:! offline.html! VAADIN/vaadinBootstrap.js! VAADIN/themes/hybrid/favicon.ico! VAADIN/themes/hybrid/styles.css! VAADIN/widgetsets/or…t.nocache.js! VAADIN/widgetsets/or…ear.cache.gif! ! NETWORK:! * widgetset ApplicationConfiguration.onModuleLoad()
  32. 32. Offline Detection Offline Mode ! /offline.html Online Mode ! / window.navigator.onLine redirect
  33. 33. com.google.gwt.storage.client.Storage ! queueOperation("{"op": "delete", "id": " + id + "}");
 Storage.getSessionStorageIfSupported()
 .setItem(KEY, pendingCommandsJSON) ! purgeQueue() 
 serverRpc.deleteAddress(id); Local Storage & Synchronization When offline Back online
  34. 34. AddressbookBackendAddress Impl Backend Frontend Offline! (with Conntector) Client Server View place & ! serve AddressbookEditor State Server! RPC Client! RPC create OfflineDetector DataStore offline.html Connector ! ! localStorage cache manifest
  35. 35. at least 2Xclient-side > 5X server-side • Client-side UI needed as a basis • Offline detection • Offline bootstrap • Local storage database • 2-way data synchronization (app specific) • Modification logs • Sharding logic Estimating Complexity
  36. 36. Use Offline only when really really needed
  37. 37. State today
  38. 38. Warning
 Just an idea - not a proven best practice
  39. 39. GWT += Server-Side ! GWT += Push ! Server-Side += Offline ! Optimize Server-Side ?
  40. 40. Client-side Widget API ! Tutorials ! Unified Themeing ! Offline Detection ! Manifest generation !
  41. 41. https://github.com/jojule/hybrid
  42. 42. Vaadin
 TouchKit
  43. 43. ? @vaadin @artursignell @joonaslehtinen

×