GWT Architectures and Lessons Learned

Transcription

1 GWT Architectures and Lessons Learned Dipl. Wi.-Ing. Papick Garcia Taboada pgt technology scouting GmbH! Orientation in Objects GmbH!

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 UI component model Components Widget t = new TextBox(); RootPanel.get().add(t);! Browser Composite

7 + testability! + maintainance! + product development Architecture shift Web applications Model 2 web applications Rich internet applications

8 classic web! development Browser Server user action full html response user action full html response user action full html response

9 RIA web development Browser first request Server full html response event event event data request event data data request data

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);

14 maintainance hell

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

18 app-framework wizardry needed

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 1) WEB DEVELOPMENT IS NOT NEW...

24 HTML 2.0 November 1995 CSS 1 Dez 1996 HTML 4.0 update April 1998 HTML Dez 1999 HTML 3.2 Januar 1997 XHTML 1.0 Jan 2000 JDK 1.0 Jan 1996 JDK 1.1 Feb 1997 HTML 4.0 Dezember 1997 CSS 2 Mai 1998 J2SE 1.2 Dez 1998 J2SE 1.3 Mai 2000 Java EE 1.2 Dez 1999 XHTML 1.1 Mai 2001 Internet Explorer 6 Aug 2001 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. Jan 2000 Jan 2005 THERE IS NOT A MOMENT TO LOOSE

25 2) RICH CLIENT DEVELOPMENT IS NOT NEW EITHER

26 nothing new here

27 Jan 2007 really NOTHING new here

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

32 MODEL USE MVP! You will get PRESENTER used to it VIEW

33 MODEL USE MVP! You will get used to it unit test this PRESENTER MOCK VIEW

34 MODEL USE MVP! You will get PRESENTER used to it DESKTOP VIEW MOBILE VIEW

35 event bus please

36 eventbus.fireevent( NotificationEvent.info( "Daten wurden erfolgreich gespeichert" ) );

37 SINGLETON don t public static instance

38 BUT ON IE 6 IT IS SO SLOW!

39 BUT ON IE 7 IT IS SO SLOW!

40 BUT ON IE 8 IT IS SO SLOW!

41 BUT ON IE 9 IT IS SO SLOW!

42 DID ANYONE TEST ON IE / SURFACE?

43 MOBILE? DID ANYONE TEST ON IE / SURFACE?

44 MOBILE? DID ANYONE TEST ON IE / SURFACE? CHEAP ANDROID DEVICES?

45 browsers day to day job

46 too many HTTP requests

47 > 2400 DOM elements Awesome?

48 too many widgets

49 use large HTML chunks

50 use large HTML chunks

51 too many widgets ain t good

52 WHY?

53 <div /> in GWT a Widget is a JS thing holding a DOM thing

54 CREATE CUSTOM WIDGETS CREATE CUSTOM EVENTS don t extend SimplePanel don t extend VerticalPanel don t extend FlextTable extend composite!!!

55 @-webkit-keyframes redpulse { from { box-shadow: 0px 0px 2px #ff0033; } 50% { box-shadow: 0px 0px 10px #ff0033; } to { box-shadow: 0px 0px 2px #ff0033; } } the new native! do it in CSS

56 <g:layoutpanel stylename="{b.style.maincontent}"> <g:layer left="0" right="340px" top="0" height="50%" <g:simplelayoutpanel stylename="{b.style.mainwidge <ux:dashboardterminedatagrid ui:field="termineta </g:simplelayoutpanel> </g:layer> <g:layer right="0" width="340px" top="0" height="50% <g:simplelayoutpanel stylename="{b.style.mainwidge <ux:kwstatsdatagrid ui:field="statstable" stylen </g:simplelayoutpanel> </g:layer> <g:layer right="0" left="0" bottom="0" height="50%"> <g:simplelayoutpanel stylename="{b.style.mainwidge <ux:wartelistedatagrid ui:field="wartelistetable </g:simplelayoutpanel> </g:layer> </g:layoutpanel> use LayoutPanel

57 GWT Development Basics Structuring the UI Talking to the server

58 SINGLE PAGE APPLICATION

59 NAVIGATION?

60 some action? mainpanel.setwiget( bwidget ); mainpanel.setwiget( awidget ); View B View A just do it pattern

61 View B2 View C View C View C3 View B View A View D hard to maintain

62 history management from day one!! back button and refresh as a feature (not a catastrophe)

63 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.

64 EXAMPLE

65

66 top menue bound to places framework

67 switching between places with fade in and out

68 teach user to wait until application is ready again

69 gives us enough time to load the required content 300ms out 500ms in

70

71 Components inside of activity fire non public,! CUSTOM events

72 datepicker sends WEEK selected event

73 BOOKMARKABLE presenter may goto itself, view may be cached!

74 #ashtag!

75 STATELESS VIEW! URL contains EVERYTHING needed to rebuild view user hits reload view is back again GWT apps starts, activity gets fired presenter loads data from server

76 some actions don t require PLACE navigation at all

77 use POPUPS/ DIALOGS to stay ABOVE navigation

78 let POPUPS/ DIALOGS move slowly into view pin POPUPS to one side of the window

79 Search DIALOG slides in from right side, stays on TOP Don t move your user away from his PLACE unless you have to.

80 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

81 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

82 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

83 GWT Development Basics Structuring the UI Talking to the server

84 GWT-RPC is a good solution if handled with care GWT-RPC binds many methods into one interface SomeResult somemethodname(someparameter spo) Interface Versioning is a monstrous thing

85 this will be an object SomeResult somemethodname ( SomeParameter spo ) this will be an object too

86 the method names bind the requests to the result SomeResult somemethodname ( SomeParameter spo ) typesafety all the way

87 PRO TIP: Java Generics FAQ! 400 pages. USING GENERICS FOR! TYPESAFETY, GET RID OF METHODS!! AND INTERFACES

88 now we just have one interface with one method <A extends Action<R>, R extends Result> R execute(a action); typesafety all the way

89 ! command pattern GOF Pattern! commonly used in Rich Clients!

90 someaction EXECUTE someactionhandler someresult

91 someaction POJOS someactionhandler someresult

92 client server GWT client someaction GWT-RPC someactionhandler someresult batching caching security caching exception translation security

93 client server Java client someaction RMI / HTTPInvoker someactionhandler someresult batching caching security caching exception translation security

94 client server Mobile client someaction JSON-servlet someactionhandler someresult batching caching security caching exception translation security

95 type safety aka DTOs 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; }! } Reusable Action Result

96 <A extends Action<R>, R extends Result> void execute(a action, AsyncCallback<R> callback) dispatch.execute(! new TerminLoadAction(terminId),!!!! ); new AsyncCallback<DataResult<TerminData>>() { public void onfailure(throwable caught) { public void onsuccess(dataresult<termindata> result) { }

97 Server side type safety handler to action mapping action execution public interface ActionHandler <A extends Action<R>, R extends Result> {! Class<A> getactiontype();!!!! R execute( A action, ExecutionContext context) again Execution context for server side command execution! } throws DispatchException; declared exception hiearchy

98 Server side custom annotationspring access to backend type public final class TerminDataLoadHandler implements ActionHandler<TerminLoadAction, DataResult<TerminData>> private TerminDAO public DataResult<TerminData> execute( TerminLoadAction action, ExecutionContext context) throws DispatchException {! TerminBean termin =! TerminData data =! return new DataResult<TerminData>(data);! public Class<TerminLoadAction> getactiontype() { return TerminLoadAction.class; }! } business logic, etc

99 interface versioning hell?

100 easy way right way? public interface SomeNiceService extends RemoteService {! String someservice(string param);! String someservicev2(string param);! String someservicev3(string param); } maintainability? maintainability? 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);! }

101 someaction POJOS someactionhandler someresult

102 different versions can coexist! someaction someactionv2 multiple versions someactionhandler someactionhandlerv2 someresult same result

103 someaction someactionv2 multiple versions someactionhandler someactionhandlerv2 someresult someresultv2 different results

104 why batch?

105 do it then do this finally do that done

106 do it, then this, finally that done

107 solving common one batch call is better than 10 single calls problems less data less roundtrip latency avoid connection bottleneck ensure server side execution order less roundtrips

108 someaction1 client server someaction2 batchactionhandler someaction3 batchaction someaction1 batchresult someaction2 someresult1 someaction3 someresult2 someresult3 batching can be manual or automatic server executes actions in given order

109 automatic batching?

110 IDLE Scheduler.scheduleEntry( ) GWT code execution Scheduler.scheduleFinally( ) browser event loop Scheduler.scheduleDeferred( )

111 IDLE Scheduler.scheduleEntry( ) GWT code execution Scheduler.scheduleFinally( )

112 IDLE Scheduler.scheduleEntry( ) collect commands cmd 1! GWT code execution cmd 2! cmd 3! cmd Scheduler.scheduleFinally( ) fire batch command

113 BATCH EXECUTION ENABLES FINE GRAINED COMMANDS AND REUSE! +! ENABLES ORDERING ACTIONS FOR EXECUTION ON THE SERVER

114 toggleterminmetadata BooleanResult reloaddashboardtermine DataListResult<Termin>

115 toggleterminmetadata BooleanResult reloadtermin DataResult<Termin>

116 toggleterminmetadata BooleanResult loadmonthstats DataResult<MonthStats> loadmonthtermine DataListResult<Termin>

117 + caching

118 + reauth when session expired

119 + exception handling

120 Thanks! GWT Development Basics Structuring the UI Talking to the server

121