Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Similar a Client-Server Hybrid Applications with Vaadin
Similar a Client-Server Hybrid Applications with Vaadin (11)
Último
Último (20)
Client-Server Hybrid Applications with Vaadin
- 1. Client-Server Hybrid Applications with Vaadin Artur Signell Vaadin
- 5. 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
- 6. 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
- 9. Web application layers Client-side UI Backend server Web server Communication JavaScript
- 10. Web application layers Backend server Web server Server-side UI Communication JavaScript Automated
- 11. Web application layers JS Backend server Web server Communication required required required Java to JavaScript JavaScript required
- 12. 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
- 13. 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
- 14. 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
- 15. 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
- 16. How does the serverside UI work, really?
- 18. • • • • Initial HTML CSS (theme) Images JavaScript " 1.2M total compress 307k reduced widgetset 135k
- 20. • name=”Joonas” • button clicked " 261 bytes
- 22. • name=”Joonas” • button clicked " 261 bytes • Add notification " 267 bytes
- 23. HybridApps
- 24. 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
- 25. Vaadin += GWT
- 30. GWT Compatible
- 41. 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
- 43. 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; ... }
- 49. Client-side 4 classes 2 interfaces ~ 500 LOC Server-side 3X 1 class " 190 LOC
- 50. Vaadin Communication " RPC + State
- 52. 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
- 53. @Push
- 54. Offline
- 55. 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
- 56. Use Offline only when really needed
- 58. 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
- 59. Download for Free vaadin.com/book -93- 1970 -1 01 728 pages PDF, ePub, HTML
- 60. Apache License