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.
DIY:
Split GWT Applications using
TURDUCKEN approach.
Alberto Mancini
alberto@jooink.com +AlbertoMancini
Who I am.
FREELANCE
- SOFTWARE DEVELOPER (WEB&MOBILE)
- LINUX SYSADMIN
- DEVOPS
#JOOINK...
alberto@jooink.com +AlbertoMancini
Problem Statement
3
alberto@jooink.com +AlbertoMancini
4
alberto@jooink.com +AlbertoMancini
No rocket science
5
alberto@jooink.com +AlbertoMancini
A work where details Matter!
6
alberto@jooink.com +AlbertoMancini
A good way
to start working/training
with
JsInterop!
7
alberto@jooink.com +AlbertoMancini
TURDUCKEN
Turducken - Divide and Conquer large GWT apps with
multiple teams
Rob Keane, ...
alberto@jooink.com +AlbertoMancini
9
alberto@jooink.com +AlbertoMancini
10
alberto@jooink.com +AlbertoMancini
This was true back in 2012 ...
11
alberto@jooink.com +AlbertoMancini
Have you checked the state of the
SEAMLESS attribute for IFRAME ?
12
alberto@jooink.com +AlbertoMancini
Problems back from the past …
A problem investigated around 2010 ...
An pattern for GWT...
alberto@jooink.com +AlbertoMancini
2017 architecture
Service channel
App channel
14
APP_1 APP_2
alberto@jooink.com +AlbertoMancini
Window.postMessage
As in the Turducken pattern Window.postMessage is our
swiss-knife; t...
alberto@jooink.com +AlbertoMancini
Window.postMessage
- A lot of security concerns, target and origin to take care of
Well...
alberto@jooink.com +AlbertoMancini
JsInterop(ping) MessageChannel
package com.jooink.gwt.innerapp.support.jsi;
import jsin...
alberto@jooink.com +AlbertoMancini
MessagePort
package com.jooink.gwt.innerapp.support.jsi;
import jsinterop.annotations.J...
alberto@jooink.com +AlbertoMancini
CanIuse http://caniuse.com/#feat=channel-messaging
19
alberto@jooink.com +AlbertoMancini
Revised architecture
The applications during the first contact (done via
Window.postMes...
alberto@jooink.com +AlbertoMancini
Host Application
AppWidget:
...
AppWidget appWidget = new AppWidget(OTHER_URL);
appWidg...
alberto@jooink.com +AlbertoMancini
Host Application
For instance per default we allow resizing
protected void handleResize...
alberto@jooink.com +AlbertoMancini
Host Application
But it is straightforward to change the behavior
AppWidget appWidget =...
alberto@jooink.com +AlbertoMancini
Host Application
Messaging
AppWidget appWidget = new AppWidget(OTHER_URL)
…
appWidget.p...
alberto@jooink.com +AlbertoMancini
Guest Application
The Guest Package
…
GuestPackage.get().addStatusChangeHandler(
event ...
alberto@jooink.com +AlbertoMancini
Guest Application
The Guest Package (in action)
GuestPackage guestPackage = GuestPackag...
alberto@jooink.com +AlbertoMancini
Note on JSNI (helpful, Good Old JSNI)
Way simpler than using jsinterop here …
private n...
alberto@jooink.com +AlbertoMancini
DEMO
28
Thanks !!
alberto@jooink.com
+AlbertoMancini
Upcoming SlideShare
Loading in …5
×

DIY: Split GWT Applications using TURDUCKEN approach By Alberto Mancini

1,159 views

Published on

DIY: Split GWT Applications using TURDUCKEN approach
By Alberto Mancini
#GWTcon2017 Firenze, September 28-29th 2017

Published in: Technology
  • Be the first to comment

  • Be the first to like this

DIY: Split GWT Applications using TURDUCKEN approach By Alberto Mancini

  1. 1. DIY: Split GWT Applications using TURDUCKEN approach. Alberto Mancini
  2. 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. 3. alberto@jooink.com +AlbertoMancini Problem Statement 3
  4. 4. alberto@jooink.com +AlbertoMancini 4
  5. 5. alberto@jooink.com +AlbertoMancini No rocket science 5
  6. 6. alberto@jooink.com +AlbertoMancini A work where details Matter! 6
  7. 7. alberto@jooink.com +AlbertoMancini A good way to start working/training with JsInterop! 7
  8. 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. 9. alberto@jooink.com +AlbertoMancini 9
  10. 10. alberto@jooink.com +AlbertoMancini 10
  11. 11. alberto@jooink.com +AlbertoMancini This was true back in 2012 ... 11
  12. 12. alberto@jooink.com +AlbertoMancini Have you checked the state of the SEAMLESS attribute for IFRAME ? 12
  13. 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. 14. alberto@jooink.com +AlbertoMancini 2017 architecture Service channel App channel 14 APP_1 APP_2
  15. 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. 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. 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. 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. 19. alberto@jooink.com +AlbertoMancini CanIuse http://caniuse.com/#feat=channel-messaging 19
  20. 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. 21. alberto@jooink.com +AlbertoMancini Host Application AppWidget: ... AppWidget appWidget = new AppWidget(OTHER_URL); appWidget.asWidget().setSize("500px","300px"); view.add(appWidget); … 21
  22. 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. 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. 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. 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. 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. 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. 28. alberto@jooink.com +AlbertoMancini DEMO 28
  29. 29. Thanks !! alberto@jooink.com +AlbertoMancini

×