GWT integration with Vaadin
2 likes1,433 views
This document discusses Vaadin, GWT, and Web Components. It contains the following key points: 1. Vaadin is a server-driven UI framework that uses GWT for client-side rendering. 2. Vaadin connectors bridge GWT and Vaadin by forming connections between client-side GWT widgets and server-side Vaadin components. 3. Web Components are emerging web standards for encapsulated custom elements that will be important in the future, but browser support is still lacking without polyfills like Polymer.
![> var foo = [0];
> foo == !foo;](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-5-320.jpg)
![> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-6-320.jpg)
![> [] + [];
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-7-320.jpg)
![> [] + [];
>
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-8-320.jpg)
![> [] + [];
>
> [] + {};
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-9-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-10-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-11-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-12-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-13-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-14-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-15-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-16-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-17-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-18-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-19-320.jpg)
GWT integration with Vaadin
- 5. > var foo = [0]; > foo == !foo;
- 6. > var foo = [0]; > foo == !foo; > true
- 7. > [] + []; > var foo = [0]; > foo == !foo; > true
- 8. > [] + []; > > var foo = [0]; > foo == !foo; > true
- 9. > [] + []; > > [] + {}; > var foo = [0]; > foo == !foo; > true
- 10. > [] + []; > > [] + {}; > [object Object] > var foo = [0]; > foo == !foo; > true
- 11. > [] + []; > > [] + {}; > [object Object] > {} + []; > var foo = [0]; > foo == !foo; > true
- 12. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > var foo = [0]; > foo == !foo; > true
- 13. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {};> var foo = [0]; > foo == !foo; > true
- 14. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > var foo = [0]; > foo == !foo; > true
- 15. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > var foo = [0]; > foo == !foo; > true
- 16. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > var foo = [0]; > foo == !foo; > true
- 17. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > var foo = [0]; > foo == !foo; > true
- 18. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > number > var foo = [0]; > foo == !foo; > true
- 19. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > number > var foo = [0]; > foo == !foo; > true
- 21. UI Browser
- 26. GWT
- 27. Java -> JavaScript - Optimizing compiler GWT
- 28. Browser specific compilation - No browser differences GWT
- 29. Pure Java - Web apps without JavaScript GWT
- 33. Server driven UI framework with GWT based thin client
- 34. Why ?
- 35. High abstraction level - Components & Events
- 36. Full stack Java - UI runs in JVM
- 37. Rapid development - No JavaScript compilation
- 38. Any JVM language - Java 8, Scala, Lambdas…
- 43. How ?
- 44. Backend Server
- 50. • Loader page • CSS Theme • Images • JavaScript
- 51. • Loader page • CSS Theme • Images • JavaScript 135k Compressed & reduced thin client
- 54. • name=”Joonas” • button clicked 261 bytes
- 56. • name=”Joonas” • button clicked 261 bytes • Add notification 267 bytes
- 58. RequestBuilder RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, url); try { builder.sendRequest(requestDataString, new RequestCallback() { @Override public void onResponseReceived(Request request, Response response) { int statusCode = response.getStatusCode(); String text = response.getText(); } @Override public void onError(Request request, Throwable exception) { // TODO Handle asynchronous problems } }); } catch (RequestException e) { // TODO Handle synchronous problems }
- 59. RequestBuilder Good • It just works
- 60. RequestBuilder Good • It just works Bad • Very low level
- 61. GWT Remote procedure calls public interface ContactService extends RemoteService { void saveContact(Contact contact); List<Contact> getContacts(); } public interface ContactServiceAsync { void saveContact(Contact contact, AsyncCallback<Void> callback); void getContacts(AsyncCallback<List<Contact>> }
- 62. GWT-RPC Good • Simple but powerful concept • Default solution • Optimized
- 63. GWT-RPC Good • Simple but powerful concept • Default solution • Optimized Bad • Sending large object graph • Polymorphism problems
- 66. State synchronization public class ContactState extends SharedState { public String name; @DelegateToWidget public int yearOfBirth; }
- 67. State synchronization public class ContactState extends SharedState { public String name; @DelegateToWidget public int yearOfBirth; } @OnStateChange("name") protected void updateName() { doSomethingWithTheName(getState().name); }
- 68. Vaadin RPC public interface ContactRpc extends ServerRpc { public void deleteContact(int id); }
- 69. Vaadin RPC public interface ContactRpc extends ServerRpc { public void deleteContact(int id); } // Register RPC handler on the server registerRpc(new ContactRpc() { @Override public void deleteContact(int id) { ContactDAO.deleteById(id); } });
- 70. Vaadin RPC public interface ContactRpc extends ServerRpc { public void deleteContact(int id); } // Register RPC handler on the server registerRpc(new ContactRpc() { @Override public void deleteContact(int id) { ContactDAO.deleteById(id); } }); // Send RPC from the client public void sendDelete(int contactId) { getRpcProxy(ContactRpc.class).deleteContact(contactId); }
- 71. Server Button
- 80. @Connect(value = Button.class) public class ButtonConnector extends AbstractComponentConnector implements ClickHandler {
- 81. @Connect(value = Button.class) public class ButtonConnector extends AbstractComponentConnector implements ClickHandler { @OnStateChange({ "caption", "captionAsHtml" }) void setCaption() { getWidget().setCaptionText(getState().caption); }
- 82. @Connect(value = Button.class) public class ButtonConnector extends AbstractComponentConnector implements ClickHandler { @OnStateChange({ "caption", "captionAsHtml" }) void setCaption() { getWidget().setCaptionText(getState().caption); } void onClick(ClickEvent event) { getRpcProxy(ButtonServerRpc.class).click(); }
- 84. Vaadin Connectors Good • Stateful server • Websocket support • JSON
- 85. Vaadin Connectors Good • Stateful server • Websocket support • JSON Bad • Stateful server • Tied to framework
- 86. Web Components
- 91. <x-component></x-component> var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var div = document.createElement('div'); div.textContent = 'This is Custom Element'; this.appendChild(div); }; var XComponent = document.registerElement('x-component', { prototype: proto });
- 92. var host = document.querySelector('#host'); var root = host.createShadowRoot(); // Create a Shadow Root var div = document.createElement('div'); div.textContent = 'This is Shadow DOM'; root.appendChild(div); // Append elements to the Shadow Root
- 93. index.html <link rel="import" href="component.html" > component.html <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script>
- 94. <template id="template"> <style> ... </style> <div> <h1>Web Components</h1> <img src="http://webcomponents.org/img/logo.svg"> </div> </template> <script> var template = document.querySelector('#template'); var clone = document.importNode(template.content, true); var host = document.querySelector('#host'); host.appendChild(clone); </script> <div id="host"></div>
- 97. Statically typed Java Components Statically typed Java Components
- 98. Statically typed Java Components Automated Communication Statically typed Java Components
- 99. Statically typed Java Automated Communication Statically typed Java
- 100. Statically typed Java Automated Communication Statically typed Java
- 101. Problem ?
- 102. Problem ?
- 104. Do web components actually work?
- 107. Custom Elements Support by browser market share
- 108. Shadow DOM Support by browser market share
- 109. HTML Import Support by browser market share
- 110. HTML Template Support by browser market share
- 111. Summary Custom Element HTML Template Shadow DOM HTML Import CHROME OPERA FIREFOX SAFARI IE
- 112. Do web components actually work? No, but Yes :)
- 114. webcomponents.js Polyfill http://webcomponents.org/polyfills/ Web Components Custom Elements HTML Imports Shadow DOM DOM WeakMap Mutation Observers{
- 116. Vaadin Labs
- 118. Encapsulation
- 119. What shadow DOM looks like?
- 120. <v-grid>
- 122. Vaadin Grid Client Widget
- 123. Vaadin Grid Client Widget Exposed JavaScript API via JsInterop from GWT 2.7+
- 124. Vaadin Grid Client Widget Exposed JavaScript API via JsInterop from GWT 2.7+ Wrapped as Polymer Element
- 125. @JsNamespace(JS.VAADIN_JS_NAMESPACE) @JsExport @JsType public class GridComponent… … private final com.vaadin.client.widgets.Grid grid; // Grid widget public JSColumn addColumn(JSColumn jsColumn, Object beforeColumnId) { grid.addColumn } … GridComponent
- 126. <link rel='import' href='../bower_components/polymer/polymer.html' /> <script type="text/javascript" language="javascript" src=“VaadinGridImport.nocache.js" /> <dom-module id="v-grid"> <template> … </template> </dom-module> <script> VGrid = Polymer({ is: “v-grid", properties: { … }, created: function() { this._grid = new vaadin.GridComponent(); }, attached: function() { this._grid.attached(this, Polymer.dom(this).querySelector(“table”), Polymer.dom(this.root)); … }, vaadin-grid.html
- 127. <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script> <script src="../VaadinGrid/VaadinGrid.nocache.js"></script> <body> <v-grid rows=1> … index.html
- 128. Grid Widget
- 133. Automated Communication Statically typed Java Components
- 134. Automated Communication Statically typed Java Componentsweb
- 135. Automated Communication Statically typed Java Components Framework Components web
- 137. Lessons learned today 1. Vaadin is server driven high abstraction level UI framework
- 138. Lessons learned today 1. Vaadin is server driven high abstraction level UI framework 2. GWT is used for client side rendering
- 139. Lessons learned today 1. Vaadin is server driven high abstraction level UI framework 2. GWT is used for client side rendering 3. Vaadin connectors form a bridge between GWT and Vaadin
- 140. Lessons learned today 1. Vaadin is server driven high abstraction level UI framework 2. GWT is used for client side rendering 3. Vaadin connectors form a bridge between GWT and Vaadin 4. Web Components will be the next big thing in the web!
- 141. Lessons learned today 1. Vaadin is server driven high abstraction level UI framework 2. GWT is used for client side rendering 3. Vaadin connectors form a bridge between GWT and Vaadin 4. Web Components will be the next big thing in the web! 5. Polymer polyfills today’s browsers to support emerging features
- 142. Lessons learned today 1. Vaadin is server driven high abstraction level UI framework 2. GWT is used for client side rendering 3. Vaadin connectors form a bridge between GWT and Vaadin 4. Web Components will be the next big thing in the web! 5. Polymer polyfills today’s browsers to support emerging features 6. Vaadin Components will utilize Polymer providing framework independent way of using the best component library available