GWT architectures and lessons learned

Slides from my talk at the JAX 2013 conference.

Transcript

1. p.g.taboada | pgt technology scouting GmbH Google Web Toolkit Architecture Best Practices Donnerstag, 25. April 13
2. Donnerstag, 25. April 13
3. http://gwtreferencelist.appspot.com Donnerstag, 25. April 13
4. ‣GWT Development ‣Basics ‣Structuring the UI ‣Communication ‣Scaling Donnerstag, 25. April 13
5. Shift happened Java development, JS deployment, Async, RPC, RIA/ single page, ... Donnerstag, 25. April 13
6. TextBox t = new TextBox(); RootPanel.get().add(t); Donnerstag, 25. April 13
7. Browser Server user action full html response full html response full html response user action user action Donnerstag, 25. April 13
8. Browser Server event first request full html response data data request data data request event event event Donnerstag, 25. April 13
9. low level, generic toolkit Donnerstag, 25. April 13
10. let‘s build big things Donnerstag, 25. April 13
11. TextBox t0 = new TextBox(); TextBox t1 = new TextBox(); TextBox t2 = new TextBox(); TextBox t3 = new TextBox(); TextBox t4 = new TextBox(); VerticalPanel... SplitPanel... ScrollPanel RootPanel.get().add(mainPanel); Donnerstag, 25. April 13
12. Run, Forrest. Run! Donnerstag, 25. April 13
13. Hoppla Donnerstag, 25. April 13
14. framework wizardry needed Donnerstag, 25. April 13
15. ‣GWT Development ‣Basics ‣Structuring the UI ‣Communication ‣Scaling Donnerstag, 25. April 13
16. BE CAREFUL. GWT DEVELOPMENT IS COMPLICATED HOT NEW STUFF. Donnerstag, 25. April 13
17. WELL, IT‘S NOT NEW... Donnerstag, 25. April 13
18. Jan 2000 Jan 2005 XHTML 1.0 Jan 2000 HTML 4.0.1 Dez 1999 CSS 2 Mai 1998 HTML 4.0 update April 1998 XHTML 1.1 Mai 2001 HTML 2.0 November 1995 HTML 4.0 Dezember 1997 Java EE 1.2 Dez 1999 JDK 1.1 Feb 1997 Internet Explorer 6 Aug 2001 JDK 1.0 Jan 1996 CSS 2.1 Feb 2004 – Jun 2011 CSS level 2 revision 1, often referred t errors in CSS 2, removes poorly suppo interoperable features and adds alread browser extensions to the specification with the W3C Process for standardizi specifications, CSS 2.1 went back and Working Draft status and Candidate R status for many years. J2SE 1.2 Dez 1998 J2SE 1.3 Mai 2000 CSS 1 Dez 1996 HTML 3.2 Januar 1997 Donnerstag, 25. April 13
19. nothing new here Donnerstag, 25. April 13
20. nothing new here too Jan 2007 Donnerstag, 25. April 13
21. how can I avoid this? Donnerstag, 25. April 13
22. don‘t public instance the singletons Donnerstag, 25. April 13
23. event bus please http://jarrettws.blogspot.de/2010/05/public-transport.html Donnerstag, 25. April 13
24. eventbus.fireEvent( NotificationEvent.info( "Daten wurden erfolgreich gespeichert" ) ); Donnerstag, 25. April 13
25. USE MVP! You will get used to it Donnerstag, 25. April 13
26. presenter model clientFactory eventBus panel view Donnerstag, 25. April 13
27. presenter view interface presenter interface model desktop view tablet view mock view Donnerstag, 25. April 13
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, String newPasswordToUse); void userRequestedVerificationCodeForPasswordChange(String email); } } Donnerstag, 25. April 13
29. public interface LoginView extends View { void setPresenter(LoginView.Presenter currentP void presetEmailFieldWith(String email); void doShowApplicationMetadata(AppData params) public interface Presenter extends LemniscusPr void userLoginWith(String username, String void userDidAskForRegistrationPlace(); void userWantsToChangePassword( int verificationCode, String userEmail, MyDesktopViewImpl extends Composite implements LoginView Donnerstag, 25. April 13
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 password void userDidAskForRegistrationPlace(); void userWantsToChangePassword( int verificationCode, String userEmail, String ne void userRequestedVerificationCodeForPasswordChange } } MyLoginPresenter extends AA... implements LoginView.Presenter Donnerstag, 25. April 13
31. BUT ON IE 6 IT IS SO SLOW! Donnerstag, 25. April 13
32. BUT ON IE 7 IT IS SO SLOW! Donnerstag, 25. April 13
33. BUT ON IE 8 IT IS SO SLOW! Donnerstag, 25. April 13
34. BUT ON IE 9 IT IS SO SLOW! Donnerstag, 25. April 13
35. too many widgets ain‘t good Donnerstag, 25. April 13
36. CREATE CUSTOM WIDGETS don‘t extend FlextTable don‘t extend VerticalPanel don‘t extend SimplePanel CREATE CUSTOM EVENTS Donnerstag, 25. April 13
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. 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. Ray Ryan - lessons learned Donnerstag, 25. April 13
40. ‣GWT Development ‣Basics ‣Structuring the UI ‣Communication ‣Scaling Donnerstag, 25. April 13
41. „just do it“ pattern „View A“ „View B“ mainPanel.setWiget( aWidget ); mainPanel.setWiget( bWidget ); some action Donnerstag, 25. April 13
42. hard to maintain Donnerstag, 25. April 13
43. history management from day one! back button and refresh as a feature (not a catastrophe) Donnerstag, 25. April 13
44. keep it stupid simple • use PLACES framework for main level navigation • if you really need to, nest activities for a second level. try not to. • use dialogs for user input, showing data. dialogs are easily reused. Donnerstag, 25. April 13
45. Once upon a time, a good designer does good a good looking design... ‣ he will be using photoshop or dreamweaver ‣ he will not use the software ‣ he will not build the software ‣ he will not maintain the software Donnerstag, 25. April 13
46. Donnerstag, 25. April 13
47. top menue bound to places framework Donnerstag, 25. April 13
48. switching between places with fade in and out Donnerstag, 25. April 13
49. teach user to wait until application is ready again Donnerstag, 25. April 13
50. gives us enough time to load the required content 300ms out 500ms in Donnerstag, 25. April 13
51. Komponents inside an „activity“ fire non public, custom events Donnerstag, 25. April 13
52. datepicker sends KW selected event Donnerstag, 25. April 13
53. presenter may goto itself, view may be cached Donnerstag, 25. April 13
54. STATELESS VIEW URL contains EVERYTHING needed to rebuild view user hits reload GWT apps starts, activity gets fired presenter loads data from server view is back again Donnerstag, 25. April 13
55. some actions don‘t require PLACE navigation at all Donnerstag, 25. April 13
56. use POPUPS to stay ABOVE navigation Donnerstag, 25. April 13
57. let POPUPS/ DIALOGS move slowly into view pin POPUPS to one side of the window Donnerstag, 25. April 13
58. let POPUPS/ DIALOGS move slowly into view pin POPUPS to one side of the window Donnerstag, 25. April 13
59. Don‘t move your user away from his „PLACE“ unless you have to. Search DIALOG slides in from right side, stays on TOP Donnerstag, 25. April 13
60. Navigation must not hurt • The application shown uses only 3 levels of navigation, DOES NOT NEED MORE • PLACES used for bookmarkable entry points/ back button navigation consistency • Activities should be STATELESS, to survive page reloads • Learn from OTHERS Donnerstag, 25. April 13
61. BEFORE YOU ADD THE LOGO TO THE TOP HOW MANY PIXELS DO YOUR USERS HAVE? the designer or marketing guy using photoshop is probably sitting in front of a 27“ apple cinema display Donnerstag, 25. April 13
62. ‣GWT Development ‣Basics ‣Structuring the UI ‣Communication ‣Scaling Donnerstag, 25. April 13
63. Honor the A in AJAX ‣ Javascript does not block Get over it ‣ Latency is not a myth ‣ Results must not arrive in the call order Donnerstag, 25. April 13
64. MARSHALLING / UNMARSHALLING IN JAVASCRIPT IS SLOW Donnerstag, 25. April 13
65. BUILDING A GENERIC FRAMEWORK FOR MARSHALLING/ UNSMARSHALLING DATA SUCKS Donnerstag, 25. April 13
66. DON‘T BIND YOU NEXT 3 YEARS OF WORK AGAINST SOME COMMUNICATION PROTOCOLL Donnerstag, 25. April 13
67. LOADING TOO MUCH DATA WILL ALWAYS HURT Donnerstag, 25. April 13
68. GWT-RPC is a good solution if handled with care SomeResult someMethodName(SomeParameter spo) GWT-RPC binds many methods into one interface Interface Versioning is a monstrous thing Donnerstag, 25. April 13
69. SomeResult someMethodName(SomeParameter spo) the method names bind the requests to the result typesafety all the way Donnerstag, 25. April 13
70. USING GENERICS FOR TYPESAFETY, GET RID OF METHODS AND INTERFACES Donnerstag, 25. April 13
71. <A extends Action<R>, R extends Result> R execute(A action); now we just one interface with one method typesafety all the way Donnerstag, 25. April 13
72. command pattern GOF Pattern commonly used in Rich Clients Donnerstag, 25. April 13
73. someAction someResult someActionHandler Donnerstag, 25. April 13
74. someAction someResult someActionHandler POJOS Donnerstag, 25. April 13
75. someAction someResult someActionHandler multiple versions someActionV2 someActionHandlerV2 Donnerstag, 25. April 13
76. someAction someResult someActionHandler multiple versions someActionV2 someActionHandlerV2 someResultV2 Donnerstag, 25. April 13
77. someAction someResult someActionHandler GWT-RPC client server batching caching security caching exception translation security GWT client Donnerstag, 25. April 13
78. someAction someResult someActionHandler RMI / HTTPInvoker client server batching caching security caching exception translation security Java client Donnerstag, 25. April 13
79. someAction someResult someActionHandler JSON-servlet client server batching caching security caching exception translation security Mobile client Donnerstag, 25. April 13
80. batchAction someAction1 batchActionHandler someAction2 someAction3 batchResult someResult1 someResult2 someResult3 client server batching can be manual or automatic server executes actions in given order Donnerstag, 25. April 13
81. BATCH EXECUTION ALLOWS FOR FINE GRAINED COMMANDS AND REUSE Donnerstag, 25. April 13
82. toggleTerminMetadata reloadDashboardTermine BooleanResult DataListResult<Termin> Donnerstag, 25. April 13
83. toggleTerminMetadata reloadTermin BooleanResult DataResult<Termin> Donnerstag, 25. April 13
84. toggleTerminMetadata loadMonthStats BooleanResult DataResult<MonthStats> loadMonthTermine DataListResult<Termin> Donnerstag, 25. April 13
85. ‣GWT Development ‣Basics ‣Structuring the UI ‣Communication ‣Scaling Donnerstag, 25. April 13
86. • Every client brings his own CPU power • The client does the page rendering • GWT provides different ways to reduce number of requests even more • The server must „only“ authenticate the user and provide the data, perform the actions requested by the client GWT scaling is easy... Donnerstag, 25. April 13
87. WHAT CAN POSSIBLY GO WRONG? Donnerstag, 25. April 13
88. LETS TALK HIGH TRAFFIC... HIGH TRAFFIC IS WHEN ONE SERVER IS NOT ENOUGH Donnerstag, 25. April 13
89. • Bandwith issues • Connection pool bottlenecks • Thread pool bottlenecks • CPU bottlenecks caused by reflection API calls • High JVM garbage collection CPU usage HIGH TRAFFIC PROBLEMS Donnerstag, 25. April 13
90. NOT REALLY GWT PROBLEMS, BUT WHAT CAN WE DO? Donnerstag, 25. April 13
91. TX TX TX TX TX TX TX TX TX avoid „tx collisions“ Donnerstag, 25. April 13
92. TX TX TX TX TX TX TX TX TX TX TX TX TX TX TX load small portions of data, do it often Donnerstag, 25. April 13
93. Donnerstag, 25. April 13
94. IMPLEMENT REAL LOAD BALANCING EACH REQUEST GOES TO THE NEXT AVAILABLE SERVER Donnerstag, 25. April 13
95. • Don‘t stick a session to a server. Why send a user over and over again to a possible overloaded server? • Don‘t store anything on the HTTP session. Let the load balancer balance the load. • Session replication is expensive and does not scale well SCALING HOW-TO Donnerstag, 25. April 13
96. Webserver Webserver LB Webserver Webserver Webserver Session Cache STATELESS WEB Webserver Donnerstag, 25. April 13
97. Session Cache Session state should not change, just expire Session state could contain user id, client id, session id, user roles If session cache becomes bottleneck, use distributed cache, eg. memcached Session Cache Session Cache Donnerstag, 25. April 13
98. Thanks! Donnerstag, 25. April 13