Successfully reported this slideshow.
Your SlideShare is downloading. ×

DIY: Split GWT Applications using TURDUCKEN approach By Alberto Mancini

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 29 Ad

DIY: Split GWT Applications using TURDUCKEN approach By Alberto Mancini

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Similar to DIY: Split GWT Applications using TURDUCKEN approach By Alberto Mancini (20)

Advertisement
Advertisement

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

×