Talk at Javaland 2014 about 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);

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

32. event bus please
http://jarrettws.blogspot.de/2010/05/public-transport.html

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

64. datepicker
sends WEEK
selected event

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
!

82. someAction
someResult
someActionHandler
EXECUTE

83. someAction
someResult
someActionHandlerPOJOS

84. someAction
someResult
someActionHandler
GWT-RPC
client server
batching
caching
security
caching
exception translation
security
GWT client

85. someAction
someResult
someActionHandler
RMI / HTTPInvoker
client server
batching
caching
security
caching
exception translation
security
Java client

86. someAction
someResult
someActionHandler
JSON-servlet
client server
batching
caching
security
caching
exception translation
security
Mobile 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…

91. interface
versioning
hell?

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?

93. someAction
someResult
someActionHandlerPOJOS

94. someAction
someResult
someActionHandlermultiple
versions
someActionV2
someActionHandlerV2
same result
different versions can coexist!

95. someAction
someResult
someActionHandlermultiple
versions
someActionV2
someActionHandlerV2
someResultV2
different results

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

99. automatic batching?

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

101. GWT code execution
IDLE
Scheduler.scheduleEntry(…)
Scheduler.scheduleFinally(…)

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

104. toggleTerminMetadata
reloadDashboardTermine
BooleanResult
DataListResult<Termin>

105. toggleTerminMetadata
reloadTermin
BooleanResult
DataResult<Termin>

106. toggleTerminMetadata
loadMonthStats
BooleanResult
DataResult<MonthStats>
loadMonthTermine DataListResult<Termin>

107. Thanks!