1. DIY:
Split GWT Applications using
TURDUCKEN approach.
Alberto Mancini

2. alberto@jooink.com +AlbertoMancini
Who I am.
FREELANCE
- SOFTWARE DEVELOPER (WEB&MOBILE)
- LINUX SYSADMIN
- DEVOPS
#JOOINK TEAM
#GDG-FIRENZE
#INTEL SOFTWARE INNOVATOR
#GWTCON
2

3. alberto@jooink.com +AlbertoMancini
Problem Statement
3

4. alberto@jooink.com +AlbertoMancini
4

5. alberto@jooink.com +AlbertoMancini
No rocket science
5

6. alberto@jooink.com +AlbertoMancini
A work where details Matter!
6

7. alberto@jooink.com +AlbertoMancini
A good way
to start working/training
with
JsInterop!
7

8. alberto@jooink.com +AlbertoMancini
TURDUCKEN
Turducken - Divide and Conquer large GWT apps with
multiple teams
Rob Keane, GWT.create 2013
https://www.slideshare.net/RobertKeane1/turducken-divide
-and-conquer-large-gwt-apps-with-multiple-teams
8

9. alberto@jooink.com +AlbertoMancini
9

10. alberto@jooink.com +AlbertoMancini
10

11. alberto@jooink.com +AlbertoMancini
This was true back in 2012 ...
11

12. alberto@jooink.com +AlbertoMancini
Have you checked the state of the
SEAMLESS attribute for IFRAME ?
12

13. alberto@jooink.com +AlbertoMancini
Problems back from the past …
A problem investigated around 2010 ...
An pattern for GWT applications proposed in 2013 ...
A 2012 workaround for a ‘forthcoming’ HTML5 feature ….
that eventually disappeared and never really born :|
13

14. alberto@jooink.com +AlbertoMancini
2017 architecture
Service channel
App channel
14
APP_1 APP_2

15. alberto@jooink.com +AlbertoMancini
Window.postMessage
As in the Turducken pattern Window.postMessage is our
swiss-knife; the one that opens the possibility of
communications in the browser (even Cross Origin :))
The first idea was to multiplex this communication channel to
drive both service and app messages but …
15

16. alberto@jooink.com +AlbertoMancini
Window.postMessage
- A lot of security concerns, target and origin to take care of
Well, definitely something we will prefer not to leave in the hands
of the users of this code if we can but …
16

17. alberto@jooink.com +AlbertoMancini
JsInterop(ping) MessageChannel
package com.jooink.gwt.innerapp.support.jsi;
import jsinterop.annotations.JsPackage;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;
@JsType(isNative = true, name="MessageChannel", namespace =
JsPackage.GLOBAL)
public class MessageChannel {
@JsProperty
public native MessagePort getPort1();
@JsProperty
public native MessagePort getPort2();
}
17

18. alberto@jooink.com +AlbertoMancini
MessagePort
package com.jooink.gwt.innerapp.support.jsi;
import jsinterop.annotations.JsPackage;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;
@JsType(isNative = true, name="MessagePort", namespace =
JsPackage.GLOBAL)
public abstract class MessagePort {
public native void postMessage(Object payload);
public native void start();
public native void close();
@JsProperty(name = "onmessage")
public native void setOnMessage(Consumer<MessageEvent> consumer);
}
18

19. alberto@jooink.com +AlbertoMancini
CanIuse http://caniuse.com/#feat=channel-messaging
19

20. alberto@jooink.com +AlbertoMancini
Revised architecture
The applications during the first contact (done via
Window.postMessage) exchange a messageChannel;
Later, postMessage is used for service messages (the library
handles this kind of messages) and the message channel is on
the other hand left available, untouched, for the business
messages. So the picture with 2 channels was not really
misleading.
20

21. alberto@jooink.com +AlbertoMancini
Host Application
AppWidget:
...
AppWidget appWidget = new AppWidget(OTHER_URL);
appWidget.asWidget().setSize("500px","300px");
view.add(appWidget);
…
21

22. alberto@jooink.com +AlbertoMancini
Host Application
For instance per default we allow resizing
protected void handleResizeRequest(int width, int height) {
this.frame.setPixelSize(width, height);
}
22

23. alberto@jooink.com +AlbertoMancini
Host Application
But it is straightforward to change the behavior
AppWidget appWidget = new AppWidget(OTHER_URL) {
@Override
protected void handleResizeRequest(int width, int height) {
this.setHeight(height + "px"); //keep width 100%;
}
};
appWidget.asWidget().setSize("100%","500px");
this.add(appWidget);
23

24. alberto@jooink.com +AlbertoMancini
Host Application
Messaging
AppWidget appWidget = new AppWidget(OTHER_URL)
…
appWidget.postMessage("Ciao da GWT (outer)");
..
appWidget.addMessageReceivedHandler( event -> ...);
24

25. alberto@jooink.com +AlbertoMancini
Guest Application
The Guest Package
…
GuestPackage.get().addStatusChangeHandler(
event -> GWT.log("Guest Status:" + event.getValue()));
GuestPackage.get().init();
…
25

26. alberto@jooink.com +AlbertoMancini
Guest Application
The Guest Package (in action)
GuestPackage guestPackage = GuestPackage.get();
...
guestPackage.askForFullSize();
...
guestPackage.postMessage("Ciao Host, I’m the Guest");
...
guestPackage.addMessageReceivedHandler(event -> …);
…
26

27. alberto@jooink.com +AlbertoMancini
Note on JSNI (helpful, Good Old JSNI)
Way simpler than using jsinterop here …
private native MyEventRegistration
addWindowMessageHandler(Consumer<MessageEvent> handler) /*-{
$wnd.addEventListener('message', handler, false);
return {
remove: function () {
$wnd.removeEventListener('message', handler, false);
}
};
}-*/;
27

28. alberto@jooink.com +AlbertoMancini
DEMO
28

29. Thanks !!
alberto@jooink.com
+AlbertoMancini