GWT architecture best practices and lessons learned

10.368 Aufrufe

Veröffentlicht am

This are the slides from my GWT architectures talk at the JAX 2013

Veröffentlicht in: Technologie, Unterhaltung & Humor
  • Als Erste(r) kommentieren

GWT architecture best practices and lessons learned

  1. 1. p.g.taboada | pgt technology scouting GmbHGoogle Web ToolkitArchitectureBest PracticesDonnerstag, 25. April 13
  2. 2. Donnerstag, 25. April 13
  3. 3. http://gwtreferencelist.appspot.comDonnerstag, 25. April 13
  4. 4. ‣GWT Development‣Basics‣Structuring the UI‣Communication‣ScalingDonnerstag, 25. April 13
  5. 5. ShifthappenedJava development,JS deployment,Async,RPC,RIA/ single page,...Donnerstag, 25. April 13
  6. 6. TextBox t = new TextBox();RootPanel.get().add(t);Donnerstag, 25. April 13
  7. 7. Browser Serveruser actionfull html responsefull html responsefull html responseuser actionuser actionDonnerstag, 25. April 13
  8. 8. Browser Servereventfirst requestfull html responsedatadata requestdatadata requesteventeventeventDonnerstag, 25. April 13
  9. 9. low level, generic toolkitDonnerstag, 25. April 13
  10. 10. let‘s build big thingsDonnerstag, 25. April 13
  11. 11. TextBox t0 = new TextBox();TextBox t1 = new TextBox();TextBox t2 = new TextBox();TextBox t3 = new TextBox();TextBox t4 = new TextBox();VerticalPanel...SplitPanel...ScrollPanelRootPanel.get().add(mainPanel);Donnerstag, 25. April 13
  12. 12. Run, Forrest. Run!Donnerstag, 25. April 13
  13. 13. HopplaDonnerstag, 25. April 13
  14. 14. framework wizardry neededDonnerstag, 25. April 13
  15. 15. ‣GWT Development‣Basics‣Structuring the UI‣Communication‣ScalingDonnerstag, 25. April 13
  16. 16. BE CAREFUL. GWT DEVELOPMENTIS COMPLICATED HOT NEW STUFF.Donnerstag, 25. April 13
  17. 17. WELL, IT‘S NOT NEW...Donnerstag, 25. April 13
  18. 18. Jan 2000 Jan 2005XHTML 1.0Jan 2000HTML 4.0.1Dez 1999CSS 2Mai 1998HTML 4.0 updateApril 1998XHTML 1.1Mai 2001HTML 2.0November 1995HTML 4.0Dezember 1997Java EE 1.2Dez 1999JDK 1.1Feb 1997Internet Explorer 6Aug 2001JDK 1.0Jan 1996CSS 2.1Feb 2004 – Jun 2011CSS level 2 revision 1, often referred terrors in CSS 2, removes poorly suppointeroperable features and adds alreadbrowser extensions to the specificationwith the W3C Process for standardizispecifications, CSS 2.1 went back andWorking Draft status and Candidate Rstatus for many years.J2SE 1.2Dez 1998J2SE 1.3Mai 2000CSS 1Dez 1996HTML 3.2Januar 1997Donnerstag, 25. April 13
  19. 19. nothing new hereDonnerstag, 25. April 13
  20. 20. nothing new here tooJan 2007Donnerstag, 25. April 13
  21. 21. how can I avoid this?Donnerstag, 25. April 13
  22. 22. don‘t public instance the singletonsDonnerstag, 25. April 13
  23. 23. event bus pleasehttp://jarrettws.blogspot.de/2010/05/public-transport.htmlDonnerstag, 25. April 13
  24. 24. eventbus.fireEvent(NotificationEvent.info("Daten wurden erfolgreich gespeichert"));Donnerstag, 25. April 13
  25. 25. USE MVP!You will getused to itDonnerstag, 25. April 13
  26. 26. presentermodelclientFactoryeventBuspanelviewDonnerstag, 25. April 13
  27. 27. presenterview interfacepresenter interfacemodeldesktop viewtablet view mock viewDonnerstag, 25. April 13
  28. 28. public interface LoginView extends View {void setPresenter(LoginView.Presenter currentPresenter);void presetEmailFieldWith(String email);void doShowApplicationMetadata(AppData params);public interface Presenter extends LemniscusPresenter {void userLoginWith(String username, String password);void userDidAskForRegistrationPlace();void userWantsToChangePassword(int verificationCode, String userEmail, StringnewPasswordToUse);void userRequestedVerificationCodeForPasswordChange(String email);}}Donnerstag, 25. April 13
  29. 29. public interface LoginView extends View {void setPresenter(LoginView.Presenter currentPvoid presetEmailFieldWith(String email);void doShowApplicationMetadata(AppData params)public interface Presenter extends LemniscusPrvoid userLoginWith(String username, Stringvoid userDidAskForRegistrationPlace();void userWantsToChangePassword(int verificationCode, String userEmail,MyDesktopViewImpl extends Composite implements LoginViewDonnerstag, 25. April 13
  30. 30. public interface LoginView extends View {void setPresenter(LoginView.Presenter currentPresenter)void presetEmailFieldWith(String email);void doShowApplicationMetadata(AppData params);public interface Presenter extends LemniscusPresenter {void userLoginWith(String username, String passwordvoid userDidAskForRegistrationPlace();void userWantsToChangePassword(int verificationCode, String userEmail, String nevoid userRequestedVerificationCodeForPasswordChange}}MyLoginPresenter extends AA... implements LoginView.PresenterDonnerstag, 25. April 13
  31. 31. BUT ON IE 6 IT IS SO SLOW!Donnerstag, 25. April 13
  32. 32. BUT ON IE 7 IT IS SO SLOW!Donnerstag, 25. April 13
  33. 33. BUT ON IE 8 IT IS SO SLOW!Donnerstag, 25. April 13
  34. 34. BUT ON IE 9 IT IS SO SLOW!Donnerstag, 25. April 13
  35. 35. too many widgets ain‘t goodDonnerstag, 25. April 13
  36. 36. CREATE CUSTOM WIDGETSdon‘t extend FlextTabledon‘t extendVerticalPaneldon‘t extend SimplePanelCREATE CUSTOM EVENTSDonnerstag, 25. April 13
  37. 37. if you can, do it in CSS@-webkit-keyframes redPulse{from{box-shadow: 0px 0px 2px #ff0033;}50%{box-shadow: 0px 0px 10px #ff0033;}to{box-shadow: 0px 0px 2px #ff0033;}}Donnerstag, 25. April 13
  38. 38. use CSS layout<g:LayoutPanel styleName="{B.style.mainContent}"><g:layer left="0" right="340px" top="0" height="50%"><g:SimpleLayoutPanel styleName="{B.style.mainWidget}" addStyleNa<ux:DashboardTermineDataGrid ui:field="terminetable" styleName</g:SimpleLayoutPanel></g:layer><g:layer right="0" width="340px" top="0" height="50%"><g:SimpleLayoutPanel styleName="{B.style.mainWidget}" addStyleNa<ux:KWStatsDataGrid ui:field="statstable" styleName="{B.style.</g:SimpleLayoutPanel></g:layer><g:layer right="0" left="0" bottom="0" height="50%"><g:SimpleLayoutPanel styleName="{B.style.mainWidget}" addStyleNa<ux:WartelisteDataGrid ui:field="wartelistetable" styleName="{</g:SimpleLayoutPanel></g:layer></g:LayoutPanel>Donnerstag, 25. April 13
  39. 39. Ray Ryan - lessons learnedDonnerstag, 25. April 13
  40. 40. ‣GWT Development‣Basics‣Structuring the UI‣Communication‣ScalingDonnerstag, 25. April 13
  41. 41. „just do it“ pattern„View A“„View B“mainPanel.setWiget(aWidget );mainPanel.setWiget(bWidget );some actionDonnerstag, 25. April 13
  42. 42. hard to maintainDonnerstag, 25. April 13
  43. 43. historymanagementfrom day one!back button andrefresh as afeature (not acatastrophe)Donnerstag, 25. April 13
  44. 44. keep itstupidsimple• use PLACES frameworkfor main level navigation• if you really need to, nestactivities for a secondlevel. try not to.• use dialogs for user input,showing data. dialogs areeasily reused.Donnerstag, 25. April 13
  45. 45. Once upon a time, agood designer doesgood a good lookingdesign...‣ he will be using photoshopor dreamweaver‣ he will not use thesoftware‣ he will not build thesoftware‣ he will not maintain thesoftwareDonnerstag, 25. April 13
  46. 46. Donnerstag, 25. April 13
  47. 47. top menue bound to places frameworkDonnerstag, 25. April 13
  48. 48. switching between places with fade in and outDonnerstag, 25. April 13
  49. 49. teach user to wait until application is ready againDonnerstag, 25. April 13
  50. 50. gives us enough time to load the required content300ms out 500ms inDonnerstag, 25. April 13
  51. 51. Komponentsinside an„activity“ firenon public,custom eventsDonnerstag, 25. April 13
  52. 52. datepickersends KWselected eventDonnerstag, 25. April 13
  53. 53. presenter maygoto itself, viewmay be cachedDonnerstag, 25. April 13
  54. 54. STATELESSVIEWURL containsEVERYTHINGneeded torebuild viewuser hitsreloadGWT appsstarts, activitygets firedpresenterloads datafrom serverview is backagainDonnerstag, 25. April 13
  55. 55. some actions don‘t require PLACE navigation at allDonnerstag, 25. April 13
  56. 56. use POPUPS to stay ABOVE navigationDonnerstag, 25. April 13
  57. 57. let POPUPS/DIALOGS moveslowly into viewpin POPUPS toone side of thewindowDonnerstag, 25. April 13
  58. 58. let POPUPS/DIALOGS moveslowly into viewpin POPUPS toone side of thewindowDonnerstag, 25. April 13
  59. 59. Don‘t move youruser away from his„PLACE“ unlessyou have to.Search DIALOGslides in from rightside, stays on TOPDonnerstag, 25. April 13
  60. 60. Navigation must not hurt• The application shown uses only 3 levels ofnavigation, DOES NOT NEED MORE• PLACES used for bookmarkable entry points/back button navigation consistency• Activities should be STATELESS, to survive pagereloads• Learn from OTHERSDonnerstag, 25. April 13
  61. 61. BEFOREYOU ADD THELOGO TO THE TOPHOW MANY PIXELS DOYOUR USERS HAVE? the designer ormarketing guyusing photoshop isprobably sitting infront of a 27“apple cinemadisplayDonnerstag, 25. April 13
  62. 62. ‣GWT Development‣Basics‣Structuring the UI‣Communication‣ScalingDonnerstag, 25. April 13
  63. 63. Honor the A in AJAX‣ Javascript does not blockGet over it‣ Latency is not a myth‣ Results must not arrive in the callorderDonnerstag, 25. April 13
  64. 64. MARSHALLING / UNMARSHALLINGIN JAVASCRIPT IS SLOWDonnerstag, 25. April 13
  65. 65. BUILDING A GENERIC FRAMEWORK FORMARSHALLING/ UNSMARSHALLING DATA SUCKSDonnerstag, 25. April 13
  66. 66. DON‘T BINDYOU NEXT 3YEARS OF WORKAGAINST SOME COMMUNICATION PROTOCOLLDonnerstag, 25. April 13
  67. 67. LOADING TOO MUCH DATA WILL ALWAYS HURTDonnerstag, 25. April 13
  68. 68. GWT-RPCis a goodsolution ifhandledwith careSomeResult someMethodName(SomeParameter spo)GWT-RPCbinds manymethodsinto oneinterfaceInterfaceVersioningis amonstrousthingDonnerstag, 25. April 13
  69. 69. SomeResult someMethodName(SomeParameter spo)the method names bind the requests to the resulttypesafety all the wayDonnerstag, 25. April 13
  70. 70. USING GENERICS FOR TYPESAFETY, GET RID OFMETHODS AND INTERFACESDonnerstag, 25. April 13
  71. 71. <A extends Action<R>, R extends Result> R execute(A action);now we just one interface with one methodtypesafety all the wayDonnerstag, 25. April 13
  72. 72. commandpatternGOF Patterncommonly used inRich ClientsDonnerstag, 25. April 13
  73. 73. someActionsomeResultsomeActionHandlerDonnerstag, 25. April 13
  74. 74. someActionsomeResultsomeActionHandlerPOJOSDonnerstag, 25. April 13
  75. 75. someActionsomeResultsomeActionHandlermultipleversionssomeActionV2someActionHandlerV2Donnerstag, 25. April 13
  76. 76. someActionsomeResultsomeActionHandlermultipleversionssomeActionV2someActionHandlerV2someResultV2Donnerstag, 25. April 13
  77. 77. someActionsomeResultsomeActionHandlerGWT-RPCclient serverbatchingcachingsecuritycachingexception translationsecurityGWT clientDonnerstag, 25. April 13
  78. 78. someActionsomeResultsomeActionHandlerRMI / HTTPInvokerclient serverbatchingcachingsecuritycachingexception translationsecurityJava clientDonnerstag, 25. April 13
  79. 79. someActionsomeResultsomeActionHandlerJSON-servletclient serverbatchingcachingsecuritycachingexception translationsecurityMobile clientDonnerstag, 25. April 13
  80. 80. batchActionsomeAction1batchActionHandlersomeAction2someAction3batchResultsomeResult1someResult2someResult3client serverbatching canbe manual orautomaticserver executesactions in given orderDonnerstag, 25. April 13
  81. 81. BATCH EXECUTION ALLOWS FOR FINE GRAINEDCOMMANDS AND REUSEDonnerstag, 25. April 13
  82. 82. toggleTerminMetadatareloadDashboardTermineBooleanResultDataListResult<Termin>Donnerstag, 25. April 13
  83. 83. toggleTerminMetadatareloadTerminBooleanResultDataResult<Termin>Donnerstag, 25. April 13
  84. 84. toggleTerminMetadataloadMonthStatsBooleanResultDataResult<MonthStats>loadMonthTermine DataListResult<Termin>Donnerstag, 25. April 13
  85. 85. ‣GWT Development‣Basics‣Structuring the UI‣Communication‣ScalingDonnerstag, 25. April 13
  86. 86. • Every client brings his own CPU power• The client does the page rendering• GWT provides different ways to reduce numberof requests even more• The server must „only“ authenticate the userand provide the data, perform the actionsrequested by the clientGWT scaling is easy...Donnerstag, 25. April 13
  87. 87. WHAT CAN POSSIBLY GO WRONG?Donnerstag, 25. April 13
  88. 88. LETS TALK HIGH TRAFFIC...HIGH TRAFFIC IS WHEN ONE SERVER IS NOT ENOUGHDonnerstag, 25. April 13
  89. 89. • Bandwith issues• Connection pool bottlenecks• Thread pool bottlenecks• CPU bottlenecks caused by reflection API calls• High JVM garbage collection CPU usageHIGH TRAFFICPROBLEMSDonnerstag, 25. April 13
  90. 90. NOT REALLY GWT PROBLEMS,BUT WHAT CAN WE DO?Donnerstag, 25. April 13
  91. 91. TX TXTX TXTXTX TXTXTXavoid „txcollisions“Donnerstag, 25. April 13
  92. 92. TX TX TX TXTXTXTXTX TXTXTXTXTXTXTXload smallportions ofdata, do itoftenDonnerstag, 25. April 13
  93. 93. Donnerstag, 25. April 13
  94. 94. IMPLEMENT REAL LOAD BALANCINGEACH REQUEST GOES TO THE NEXT AVAILABLE SERVERDonnerstag, 25. April 13
  95. 95. • Don‘t stick a session to a server.Why send a user over and over again to apossible overloaded server?• Don‘t store anything on the HTTP session. Letthe load balancer balance the load.• Session replication is expensive and does notscale wellSCALING HOW-TODonnerstag, 25. April 13
  96. 96. WebserverWebserverLB WebserverWebserverWebserverSession CacheSTATELESS WEBWebserverDonnerstag, 25. April 13
  97. 97. Session CacheSession state should not change,just expireSession state could contain userid, client id, session id, user rolesIf session cache becomesbottleneck, use distributedcache, eg. memcachedSession CacheSession CacheDonnerstag, 25. April 13
  98. 98. Thanks!Donnerstag, 25. April 13

×