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.

1. Peter Lehto
@peter_lehto
GWT
integration
with

2. GWT
&
Vaadin
GWT
transport
mechanisms

3. Web
Components?
Vaadin
Connectors
Polymer
QA

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

22. UI
Browser
Widgets

23. Theme
UI
Browser
Widgets

24. Theme
UI
Browser
Backend
Server
Widgets

25. Theme
UI
Browser
Backend
Server
Widgets
Service (GWT-RPC)

26. GWT

27. Java -> JavaScript
- Optimizing compiler
GWT

28. Browser specific
compilation
- No browser differences
GWT

29. Pure Java
- Web apps without JavaScript
GWT

30. JSInterop
- JavaScript integration
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…

39. Transparent
- Automated communication

40. Developer
Productivity
Rich
UX

41. User Interface
Components

42. User Interface
Components

43. How ?

44. Backend
Server

45. UI Backend
Server

46. Browser
UI Backend
Server
Widgets Components

47. Theme
Browser
UI Backend
Server
Widgets Components

48. Theme
Browser
UI Backend
Server
Widgets Components
Shared State
RPC

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

57. GWT transport
mechanisms

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

64. Vaadin Connectors

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

72. Browser
Server
VButton
Button

73. Browser
Server
VButton
ButtonConnector
Button

74. Browser
Server
VButton
ButtonConnector
SharedState
Button
SharedState

75. Browser
Server
SharedState
SharedState
Button
VButton
ButtonConnector

76. Browser
Server
SharedState
SharedState
RPC
RPC
Button
VButton
ButtonConnector

77. Browser
Server
SharedState
SharedState
RPC
RPC
Button
VButton
ButtonConnector

78. Browser
Server
SharedState
SharedState
RPC
RPC
Button
VButton
ButtonConnector

79. Browser
Server
Button
VButton
ButtonConnector
SharedState
SharedState
RPC
RPC

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();
}

83. server
client
Component
Widget
Connector
RPC
State

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

87. <x-gangnam-style>
</x-gangnam-style>

88. <x-gangnam-style>
</x-gangnam-style>

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>

96. Components Components

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

117. Reusable HTML
components

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

129. Grid Component
Grid Widget
@JSType

130. vaadin-grid.html
Grid Component
Grid Widget
@JSType

131. index.html
vaadin-grid.html
Grid Component
Grid Widget
@JSType

133. Automated Communication
Statically typed Java
Components

134. Automated Communication
Statically typed Java
Componentsweb

135. Automated Communication
Statically typed Java
Components
Framework
Components web

136. Lessons learned today

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

144. @peter_lehto
expert & trainer
peter@vaadin.com
slides
slideshare.net/peterlehto