Download as PDF, PPTX
More Related Content
![[Konveyor] introduction to cloud native chaos engineering with litmus chaos (1)](https://cdn.slidesharecdn.com/ss_thumbnails/konveyorintroductiontocloud-nativechaosengineeringwithlitmuschaos1-210421165151-thumbnail.jpg?width=640&height=640&fit=bounds)
![Chorus - Distributed Operating System [ case study ]](https://cdn.slidesharecdn.com/ss_thumbnails/chorus-171117082036-181113144303-thumbnail.jpg?width=640&height=640&fit=bounds)
![Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit](https://cdn.slidesharecdn.com/ss_thumbnails/gae-chapter3-130106064505-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Turducken - Divide and Conquer large GWT apps with multiple teams
- 1. Turducken Divide and conquerlarge GWT apps with multiple teams Rob Keane Google / Ad Exchange Front End rkeane@google.com
- 2. Turducken Complex GWT appscan involve multiple teams with different release cycles. Compile times can quickly become prohibitive when your codebase grows into millions of lines. “Turducken” is a design pattern to combine multiple GWT apps that can be built and released by separate teams while providing a seamless, snappy user experience
- 3. A note onthe name... Turkey + Duck + Chicken
- 4.
- 5.
- 6. Terminology In the contextof this talk... Module == GWT Module with entry point
- 7. One last note... Thisis a design pattern not a library
- 8. Turducken 1. Bob’s StickerEmporium 2. Conquering Multiple Entry Points 3. Other uses
- 9. Bob’s GWT App Bobhas a sticker site bobs-sticker-emporium.com BOB’S STICKERS Stickers BUY! BUY! BUY!
- 10. Success! Bob adds moreoptions... bobs-sticker-emporium.com Your Cart (2) BOB’S STICKERS Stickers Create your own! BUY! Customize BUY! Customize Sell a sticker! BUY! Customize
- 11. Things are gettingcomplex ➔ Still one giant GWT module ➔ Compilation takes several minutes ➔ A few megabytes of JS ➔ 5 teams! ➔ Continuous integration ➔ Release coordination
- 12. What should Bobdo? How do you split up a large GWT project?
- 13. One GWT module ×One release × One build × Very large if code isn’t split properly × Difficult to test
- 14. Many GWT modules ×Full page reloads × Code can’t be split between modules
- 15. One GWT module? ಠ_ಠ ManyGWT modules? ಠ_ಠ
- 16. Ultimately multiple GWTmodules is the only real option
- 17. Multiple modules Split intomultiple GWT entry points bobs-sticker-emporium.com Your Cart (2) BOB’S STICKERS Stickers Create your own! BUY! Customize BUY! Customize Sell a sticker! BUY! Customize
- 18. Bob Full page refresh betweeneach module
- 19. Research showed that halfof aggregate user latency was due to full page reloads
- 20. Turducken 1. Bob’s StickerEmporium 2. Conquering Multiple Entry Points 3. Other uses
- 21. Container (GWT Module) Inter-appEvent Bus (JSNI) Virtual historian Virtual historian Virtual historian Tab A Tab B Tab C (GWT) (GWT) (GWT)
- 22. The container ➔ ➔ ➔ ➔ A GWTmodule (mostly) The first thing to load on the page Loads the other modules on demand Communicates with modules through inter-app event bus
- 23. Loading all ofthe modules? Yes. This actually works
- 24. Bob’s container bobs-sticker-emporium.com Your Cart(2) BOB’S STICKERS Stickers Create your own! Sell a sticker! BUY!
- 25. Load multiple GWTmodules? ➔ When a module is loaded, a <script> tag is added to the <head> ➔ Everything lives in the same container
- 26. Memory usage ➔ Browsersare good at hiding elements ➔ Memory only increases marginally when loading new modules
- 28. DOM Assumptions // Old RootPanel.get().add(myRootWidget); //New ContainerHelper.getModulePanel().add(myRootWidget); <body> <div id=”modules”> <div id=”TAB_1_ROOT”>...</div> <div id=”TAB_2_ROOT” style=”display:none”>...</div> <div id=”TAB_3_ROOT” style=”display:none”>...</div> </div> </body>
- 29. CSS ➔ Avoid @externalas much as possible ➔ Avoid styling tags ... unless the style is truly global ➔ Should be in a “global” CSS file > global.css a { color: #999; }
- 30. But I reallywant @external CSS... When Module “TAB_1” is loaded → When Module “TAB_2” is loaded →
- 31. CSS example /* no,no, no */ @external .title; .title { color: pink; font-size: 72px; } /* that’s better */ @external .title; #TAB_1 .title { color: pink; font-size: 72px; }
- 32. There’s just onetiny, little issue...
- 33. “ All problems incomputer science can be solved by another level of indirection Butler Lampson
- 34. Container (GWT Module) Inter-appEvent Bus (JSNI) Virtual historian Virtual historian Virtual historian Tab A Tab B Tab C (GWT) (GWT) (GWT)
- 35. Virtual History Implementation Anhistory implementation that doesn’t alter the “real” URL but instead sends an event
- 36. Container History Produces a“safe” URL that contains information about the module For example: #MODULE_A/MyPlace instead of #MyPlace
- 37. Container (GWT Module) Inter-appEvent Bus (JSNI) Virtual historian Virtual historian Virtual historian Tab A Tab B Tab C (GWT) (GWT) (GWT)
- 38. Event bus implementation Theevent bus that broadcasts between modules needs to be JSNI since it must communicate between GWT modules A simple publish/subscribe interface will do
- 39. Code example // Container InterAppEventBus.subscribe(“HISTORY_CHANGE”,updateUrlHandler); // Virtual History in a submodule InterAppEventBus.publish(“HISTORY_CHANGE”, “myNewUrl”);
- 40. Message trace forhistory Virtual Historian Event bus Container Browser Change to virtual history Module load event Real URL is changed
- 41. Summary of Turducken ➔Separate your app into multiple entry points ➔ A container module manages loading the submodules ➔ Carefully manage your CSS ➔ The submodules talk to a virtual historian ➔ A JavaScript/JSNI InterAppEventBus handles events between modules and the container ➔ Events are broadcast that the container handles to alter the real URL
- 42. The future ➔ ShadowDOM eliminates a lot of the issues ➔ Eliminate JSNI with GWT 3.0
- 43.
- 44. Turducken 1. Bob’s StickerEmporium 2. Conquering Multiple Entry Points 3. Other uses
- 45. It’s all aboutthe event bus An inter-app event bus opens up some interesting doors
- 46. Inter-app communication Load anothermodule via an event ➔ Settings Module ◆ Change settings from other modules ◆ Global “Accept ToS” message ➔ Chat module
- 47. Example ➔ One teammaintains “Chat” functionality ➔ Another team maintains a “Profile” page ➔ Launch a chat with a person from their profile ➔ Chat module doesn’t always need to be loaded ➔ Limited coupling between modules
- 48. Invisible Modules There canbe “background” modules that aren’t visible but handle events ➔ Monitoring session ➔ Caching data for multiple modules
- 49. Non-GWT “modules” ➔ Followthe same CSS approach ➔ Write an virtual history implementation ➔ Add hashPrefix to $location in Angular
- 50. Where’s the code? ➔A few small parts ➔ A design pattern, not a library ➔ Tends to be application specific ...but we are considering it
- 51. Turducken Complex GWT appscan involve multiple teams with different release cycles. Compile times can quickly become prohibitive when your codebase grows into millions of lines. “Turducken” is a design pattern to combine multiple GWT apps that can be built and released by separate teams while providing a seamless, snappy user experience
- 52. no reloads many modules wow suchperformance different releases wow Questions?