Hybrid webinar
0 likes1,419 views
The document discusses a hybrid web application architecture that combines client-side and server-side technologies. It presents layers of a typical web application and compares approaches that are fully client-side, fully server-side, or hybrid. The hybrid approach aims to achieve a 50% reduction in development and maintenance time compared to fully client-side or server-side approaches. It also discusses benefits and tradeoffs around productivity, control, and offline capabilities. Code examples are provided to illustrate implementing a hybrid address book application using Vaadin on the server-side and GWT-RPC on the client-side.
Hybrid webinar
- 2. Warning Just an idea - not a proven best practice
- 3. Hybrid?
- 6. Web application layers Backend server Web server Commu- nication JavaScript Server-side UI Automated
- 7. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication requiredrequired JS required required
- 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. 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. 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
- 20. Server-sideClient-side Use for Of鍖ine! Low latency interaction! Maximum scalability Use for Most places ( - 50% cost )! High security! Utilizing full Java platform Bene鍖ts of the both sides, but adds complexity Hybrid
- 23. HOW?
- 24. 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 鍖ows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences 鍖y 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 Of鍖ine Client-side Vaadin-RPC Client-side GWT-RPC Server-side Edit Delete New Save Cancel First name Last name Phone number Email address
- 27. AddressbookBackendAddress Impl Backend Frontend Server-side! (with Vaadin) Client-side! (with GWT-RPC) AddressbookEditor
- 28. AddressbookBackendAddress Impl Backend Frontend Server-side! (with Vaadin) Client-side! (with GWT-RPC) AddressbookEditor AddressbookEditor View Connector Client Server create place
- 29. AddressbookBackendAddress Impl Backend Frontend Server-side! (with Vaadin) Client-side! (with GWT-RPC) AddressbookEditor AddressbookEditor RPCServlet ServiceView Connector Client Server create place implements
- 30. 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
- 32. Server-sideClient-side 1 class ! 190 LOC 4 classes 2 interfaces ~ 500 LOC 3X
- 33. Vaadin RPC State
- 35. 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
- 36. 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
- 37. PUSH
- 38. Offline
- 39. <html manifest="hybrid.appcache"> ! ! <inherits name="com.vaadin.Vaadin" /> <entry-point class="example.client.Of鍖ineEntry"/> ! ! rootPanel.add(new AddressbookEditor()); Offline Bootstrap CACHE MANIFEST! ! CACHE:! of鍖ine.html! VAADIN/vaadinBootstrap.js! VAADIN/themes/hybrid/favicon1.ico! VAADIN/themes/hybrid/styles.css! VAADIN/widgetsets/ort.nocache.js! VAADIN/widgetsets/orear.cache.gif! ! NETWORK:! * widgetset ApplicationConfiguration.onModuleLoad()
- 40. Offline Detection Offline Mode ! /offline.html Online Mode ! / window.navigator.onLine redirect
- 41. com.google.gwt.storage.client.Storage ! queueOperation("{"op": "delete", "id": " + id + "}"); Storage.getSessionStorageIfSupported() .setItem(KEY, pendingCommandsJSON) ! purgeQueue() serverRpc.deleteAddress(id); Local Storage & Synchronization When of鍖ine Back online
- 42. AddressbookBackendAddress Impl Backend Frontend Of鍖ine! (with Conntector) Client Server View place & ! serve AddressbookEditor State Server! RPC Client! RPC create Of鍖ineDetector DataStore of鍖ine.html Connector ! ! localStorage cache manifest
- 43. at least 2Xclient-side > 5X server-side Client-side UI needed as a basis Of鍖ine detection Of鍖ine bootstrap Local storage database 2-way data synchronization (app speci鍖c) Modi鍖cation logs Sharding logic Estimating Complexity
- 44. Use Offline only when really really needed
- 45. State today
- 46. Warning Just an idea - not a proven best practice
- 47. GWT += Server-Side ! GWT += Push ! Server-Side += Offline ! Optimize Server-Side ?
- 48. Client-side Widget API ! Tutorials ! Unified Themeing ! Offline Detection ! Manifest generation !
- 50. Vaadin TouchKit