Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Client-Server Hybrid Applications with Vaadin

2,911 views

Published on

Published in: Technology
  • Be the first to comment

Client-Server Hybrid Applications with Vaadin

  1. 1. Client-Server Hybrid Applications with Vaadin Artur Signell Vaadin
  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. Vaadin += GWT
  20. 20. GWT Compatible
  21. 21. http://demo.vaadin.com/parking/
  22. 22. HybridArchitecture
  23. 23. 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. https://github.com/jojule/hybrid
  24. 24. AddressbookBackend Address Impl
  25. 25. Address public class Address { String firstName, lastName; String phoneNumber, emailAddress; int id; ... } AddressbookBackend public Collection<Address> getAddressess(); " public Address getAddress(int id); " public void storeAddress(Address address); " public void deleteAddress(int id); " public Address newAddress(); Impl public class AddressbookBackendImpl implements AddressbookBackend { private final LinkedHashMap<Integer, Address> addresses; ... }
  26. 26. Server-side" (with Vaadin) Client-side" (with GWT-RPC) AddressbookEditor Frontend Backend Address AddressbookBackend Impl
  27. 27. Server-side" (with Vaadin) Client-side" (with GWT-RPC) AddressbookEditor create Connector Client Server AddressbookEditor place View Frontend Backend Address AddressbookBackend Impl
  28. 28. 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
  29. 29. 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
  30. 30. Estimating Complexity
  31. 31. Client-side 4 classes 2 interfaces ~ 500 LOC Server-side 3X 1 class " 190 LOC
  32. 32. Vaadin Communication " RPC + State
  33. 33. Demo Widget Connector client server State RPC Component
  34. 34. Client-side" Client-side" (with GWT-RPC) (with Vaadin Connector) AddressbookEditor create create Connector implements Proxy
 Connector (generated) Client ServiceAsync Server equal place View AddressbookEditor RPCServlet Frontend Service Client
 RPC State place View implements Backend Address AddressbookBackend Impl Server
 RPC
  35. 35. @Push
  36. 36. Offline
  37. 37. 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
  38. 38. Use Offline only when really needed
  39. 39. 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
  40. 40. Download for Free vaadin.com/book -93- 1970 -1 01 728 pages PDF, ePub, HTML
  41. 41. Apache License
  42. 42. community of 100.000+ developers
  43. 43. ? Artur Signell artur@vaadin.com

×