Javaland 2014 / GWT architectures and lessons learned
3 likes3,941 views
This document discusses GWT architectures and lessons learned from GWT development. It covers topics like structuring the UI with widgets, talking to servers, and shifting to rich internet applications. It provides tips for development like using MVP patterns, handling events, avoiding maintainability issues. It also discusses using GWT-RPC and generics for type-safe communications and batching commands for efficiency. Overall it focuses on architectural best practices, common problems, and solutions for building maintainable and performant GWT applications.
Javaland 2014 / GWT architectures and lessons learned
- 1. GWT Architectures and Lessons Learned Dipl. Wi.-Ing. Papick Garcia Taboada pgt technology scouting GmbH! http://pgt.de Orientation in Objects GmbH! http://oio.de
- 2. ‣GWT Development ‣Basics ‣Structuring the UI ‣Talking to the server
- 3. Shift happened Java development, JS deployment, Async, RPC, RIA/ single page, ...
- 4. Web 2.0 ? development is all about… ! …js …html …css ! none of it ! …jcp …oracle … IBM … backend
- 5. what is a GWT application? a chunk of JS that does a lot of DOM manipulation to create web applications
- 6. Widget t = new TextBox(); ! RootPanel.get().add(t); UI component model Browser Composite Components
- 7. Architecture shift Web applications Model 2 web applications Rich internet applications + testability! + maintainance! + product development
- 8. Browser Server user action full html response full html response full html response user action user action classic web ! developm ent
- 9. Browser Server event first request full html response data data request data data request event event event RIA web developm ent
- 10. Web frameworks
- 11. low level, generic tools
- 12. let‘s build big things
- 13. 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);
- 15. MacGyver All he needed was a ballpoint pen and a paper clip
- 16. Ops
- 17. Widget t = new TextBox(); ! RootPanel.get().add(t); not enough…
- 19. ‣GWT Development ‣Basics ‣Structuring the UI ‣Talking to the server
- 20. GWT DEVELOPMENT IS COMPLICATED HOT NEW STUFF.
- 21. NOT REALLY
- 22. GWT development is not new, but different WHY?
- 23. WEB DEVELOPMENT IS NOT NEW... 1)
- 24. THERE IS NOT A MOMENT TO LOOSETHERE IS NOT A MOMENT TO LOOSE 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 to as "CSS 2.1", fixes errors in CSS 2, removes poorly supported or not fully interoperable features and adds already-implemented browser extensions to the specification. In order to comply with the W3C Process for standardizing technical specifications, CSS 2.1 went back and forth between Working Draft status and Candidate Recommendation status for many years. J2SE 1.2 Dez 1998 J2SE 1.3 Mai 2000 CSS 1 Dez 1996 HTML 3.2 Januar 1997
- 25. RICH CLIENT DEVELOPMENT IS NOT NEW EITHER 2)
- 26. nothing new here
- 27. nothing new here too Jan 2007
- 28. Look!YES! This is my code!
- 29. It’s all about software engineering
- 30. Just a few tips
- 31. USE MVP! You will get used to it
- 33. eventbus.fireEvent( NotificationEvent.info( "Daten wurden erfolgreich gespeichert" ) );
- 34. SINGLETON don‘t public static instance
- 35. BUT ON IE 6 IT IS SO SLOW!
- 36. BUT ON IE 7 IT IS SO SLOW!
- 37. BUT ON IE 8 IT IS SO SLOW!
- 38. BUT ON IE 9 IT IS SO SLOW!
- 39. DID ANYONE TEST ON IE / SURFACE?
- 40. browsers day to day job
- 41. too many HTTP requests
- 42. WTF? > 2400 DOM elements
- 43. too many widgets
- 44. use large HTML chunks
- 45. use large HTML chunks
- 46. too many widgets ain‘t good
- 47. a Widget is a JS thing holding a DOM element <div />
- 48. CREATE CUSTOM WIDGETS don‘t extend FlextTable don‘t extendVerticalPanel don‘t extend SimplePanel CREATE CUSTOM EVENTS extend composite!!!
- 49. the new native, 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; } }
- 50. use LayoutPanel <g:LayoutPanel styleName="{B.style.mainContent}"> <g:layer left="0" right="340px" top="0" height="50%"> <g:SimpleLayoutPanel styleName="{B.style.mainWidget}" addStyleNames="{B.style.termineGlow}" <ux:DashboardTermineDataGrid ui:field="terminetable" styleName="{B.style.mainWidgetConten </g:SimpleLayoutPanel> </g:layer> <g:layer right="0" width="340px" top="0" height="50%"> <g:SimpleLayoutPanel styleName="{B.style.mainWidget}" addStyleNames="{B.style.finanzenGlow} <ux:KWStatsDataGrid ui:field="statstable" styleName="{B.style.mainWidgetContent}" /> </g:SimpleLayoutPanel> </g:layer> <g:layer right="0" left="0" bottom="0" height="50%"> <g:SimpleLayoutPanel styleName="{B.style.mainWidget}" addStyleNames="{B.style.uebersichtGlo <ux:WartelisteDataGrid ui:field="wartelistetable" styleName="{B.style.mainWidgetContent}" </g:SimpleLayoutPanel> </g:layer> </g:LayoutPanel>
- 51. ‣GWT Development ‣Basics ‣Structuring the UI ‣Talking to the server
- 52. „just do it“ pattern „View A“ „View B“ mainPanel.setWiget( aWidget ); mainPanel.setWiget( bWidget ); some action ?
- 53. hard to maintain
- 54. history management from day one! ! back button and refresh as a feature (not a catastrophe)
- 55. 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.
- 56. EXAMPLE
- 58. top menue bound to places framework
- 59. switching between places with fade in and out
- 60. teach user to wait until application is ready again
- 61. gives us enough time to load the required content 300ms out 500ms in
- 63. Components inside of „activity“ fire non public, custom events
- 65. presenter may goto itself, view may be cached
- 66. #ashtag?!?
- 67. 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
- 68. some actions don‘t require PLACE navigation at all
- 69. use POPUPS/ DIALOGS to stay ABOVE navigation
- 70. let POPUPS/ DIALOGS move slowly into view pin POPUPS to one side of the window
- 71. Don‘t move your user away from his „PLACE“ unless you have to. Search DIALOG slides in from right side, stays on TOP
- 72. Navigation should 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, lookout for hashtags…
- 73. Once upon a time, a young good designer did 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
- 74. BEFOREYOU 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
- 75. ‣GWT Development ‣Basics ‣Structuring the UI ‣Talking to the server
- 76. 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
- 77. SomeResult someMethodName(SomeParameter spo) this will be an object this will be an object too
- 78. SomeResult someMethodName(SomeParameter spo) the method names bind the requests to the result typesafety all the way
- 79. USING GENERICS FOR ! TYPESAFETY, ! GET RID OF METHODS ! AND INTERFACES Java Generics FAQ ! 400 pages. PRO TIP:
- 80. <A extends Action<R>, R extends Result> R execute(A action); now we just have one interface with one method typesafety all the way
- 81. ! command pattern GOF Pattern ! commonly used in Rich Clients !
- 85. someAction someResult someActionHandler RMI / HTTPInvoker client server batching caching security caching exception translation security Java client
- 87. public class TerminLoadAction implements Action<DataResult<TerminData>> { ! private String terminId; ! public TerminLoadAction(String terminId) { this.terminId = terminId; } ! public String getTerminId() { return terminId; } } public class DataResult<DATA extends Data> implements Result { ! private DATA data; ! public DataResult(DATA data) { this.data = data; } ! public void setData(DATA data) { this.data = data; } ! public DATA getData() { return data; } ! } aka DTOs Action Result Reusable type safety
- 88. dispatch.execute( ! new TerminLoadAction(terminId), new AsyncCallback<DataResult<TerminData>>() { ! @Override public void onFailure(Throwable caught) { } ! @Override public void onSuccess(DataResult<TerminData> result) { } ! } ! ); <A extends Action<R>, R extends Result> void execute(A action,AsyncCallback<R> callback)
- 89. public interface ActionHandler <A extends Action<R>, R extends Result> { ! Class<A> getActionType(); ! ! ! ! R execute( A action, ExecutionContext context) throws DispatchException; ! } Server side type safety again handler to action mapping action execution declared exception hiearchy Execution context for server side command execution
- 90. @ActionHandlerBean @Transactional public final class TerminDataLoadHandler implements ActionHandler<TerminLoadAction, DataResult<TerminData>> { ! @Autowired private TerminDAO terminDao; ! @Override public DataResult<TerminData> execute( TerminLoadAction action, ExecutionContext context) throws DispatchException { ! TerminBean termin = … ! TerminData data = … ! return new DataResult<TerminData>(data); ! } ! @Override public Class<TerminLoadAction> getActionType() { return TerminLoadAction.class; } ! } Server side custom annotationspring access to backend type safe result business logic, etc…
- 92. public interface SomeNiceService extends RemoteService { ! String someService(String param); ! String someServiceV2(String param); ! String someServiceV3(String param); } public interface SomeNiceService extends RemoteService { ! String someService(String param); ! } ! public interface SomeNiceServiceV2 extends RemoteService { ! String someService(String param); ! } ! public interface SomeNiceServiceV3 extends RemoteService { ! String someService(String param); ! } easy way right way? maintainability? maintainability?
- 94. someAction someResult someActionHandlermultiple versions someActionV2 someActionHandlerV2 same result different versions can coexist!
- 96. why batch?
- 97. solving common problems•one batch call is better than 10 single calls •less data •less roundtrip latency •avoid connection bottleneck •ensure server side execution order •less roundtrips
- 98. batchAction someAction1 batchActionHandler someAction2 someAction3 batchResult someResult1 someResult2 someResult3 client server batching can be manual or automatic server executes actions in given order someAction1 someAction2 someAction3
- 100. GWT code execution IDLE browser event loop Scheduler.scheduleEntry(…) Scheduler.scheduleFinally(…) Scheduler.scheduleDeferred(…)
- 102. GWT code execution IDLE Scheduler.scheduleFinally(…) collect commands fire batch command cmd 1! cmd 2! cmd 3! cmd … Scheduler.scheduleEntry(…)
- 103. ENABLES FINE GRAINED COMMANDS AND REUSE ! + ! ENABLES ORDERING ACTIONS FOR EXECUTION ON THE SERVER BATCH EXECUTION
- 107. Thanks!