Server-Client Hybrid UI

1,420 views

Published on

Rich web applications can be written both on the client-side as well as on server-side. Both the these approaches have their advantages - on the client-side you have a full control over presentation and can support offline mode. On the server-side the development is sped up by reducing the number of layers developer has to build.

In this presentation we explore the ways of combining the server- and client-side development models in the context of Vaadin Framework. The goal is to be able to use the best of the both models and provide a flexible basis for building high quality user interfaces for enterprise applications. The presentation walks through an example application to demonstrate the benefits of the both models and how they could be applied in the same application.

Presentation given at jDays Nov 26, 2013

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,420
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Server-Client Hybrid UI

  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. 0L/100km 1€/100km 450km range" growing charge
 station network 2.5L/100km 4€/100km 500km range" gas stations
 everywhere 8.6L/100km 13€/100km 550km range" gas stations
 everywhere
  4. 4. What about apps?
  5. 5. Web application layers Backend server Web server Commu- nication JavaScript
  6. 6. Web application layers Backend server Web server Commu- nication JavaScript Client-side UI
  7. 7. Web application layers Backend server Web server Commu- nication JavaScript Server-side UI Automated
  8. 8. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication requiredrequired JS required required
  9. 9. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication required optionalrequired GWT requiredrequired JS requiredrequired required required Client-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 Client-side UIServer-side UI &
  11. 11. 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
  12. 12. Server- Client- side Optim izedfor Productivity Optim izedfor Control
  13. 13. How does the server- side UI work, really?
  14. 14. • Initial HTML • CSS (theme) • Images • JavaScript " 1.2M total
 307k compress 135k reduced widgetset
  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. 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
  19. 19. http://demo.vaadin.com/parking/
  20. 20. Vaadin += GWT
  21. 21. UI.java Widgets java.util Java to JS" compiler IE6/7" JS IE8" JS IE9" JS IE10" JS IE11" JS Safari" JS Chrome" JS FF" JS
  22. 22. Optimized for Google speed JSNI [super] DevMode Static typing GWT RPC
  23. 23. compile time complexity widgets
  24. 24. GWT Compatible
  25. 25. HybridArchitecture
  26. 26. Example
 https://github.com/jojule/hybrid
  27. 27. 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
  28. 28. AddressbookServiceAddress 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
  29. 29. Estimating Complexity
  30. 30. Server-sideClient-side 1 class " 190 LOC 4 classes 2 interfaces ~ 500 LOC 3X
  31. 31. Vaadin RPC State
  32. 32. server client Component Widget Connector RPC State Demo
  33. 33. 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
  34. 34. Offline
  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 Offline Mode
  36. 36. Use Offline only when really really needed
  37. 37. Server-side 1 layer UI Automated" connection to
 server required Hybrid 1-3 layer UI You choose" offline for chosen
 functionality Client-side 3 layer UI Full control" offline ready
 architecture
  38. 38. getting started with vaadin
  39. 39. Eclipse Download plugin from Martketplace
  40. 40. IntelliJ IDEA Built-in support
  41. 41. Netbeans Download plugin Netbeans Plugin Portal
  42. 42. mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.7 Maven
  43. 43. Download for Free vaadin.com/book 728 pages 01 -93-1970-1 PDF, ePub, HTML
  44. 44. Apache License
  45. 45. community of 100.000+ developers
  46. 46. ? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen slideshare.com/ joonaslehtinen

×