0
GWT Architectures and 	

Lessons Learned
Dipl. Wi.-Ing. Papick Garcia Taboada	

pgt technology scouting GmbH!
http://pgt.d...
‣GWT Development
‣Basics
‣Structuring the UI
‣Talking to the server
Shift
happened
Java development, 	

JS deployment, 	

Async,	

RPC,	

RIA/ single page,	

...
Web 2.0 ?
development 

is all about…	

!
…js	

…html	

…css	

!
none of it	

!
…jcp	

…oracle	

… IBM	

… backend
what is a GWT
application?
a chunk of JS that does a lot of DOM
manipulation to create web
applications
Widget t = new TextBox();	

!
RootPanel.get().add(t);
UI component model
Browser Composite
Components
Architecture shift
Web applications
Model 2 web applications
Rich internet applications
+ testability!
+ maintainance!
+ p...
Browser Server
user action
full html response
full html response
full html response
user action
user action
classic web
!
...
Browser Server
event
first request
full html response
data
data request
data
data request
event
event
event
RIA
web


devel...
Web frameworks
low level, generic tools
let‘s build big things
TextBox t0 = new TextBox();	

TextBox t1 = new TextBox();	

TextBox t2 = new TextBox();	

TextBox t3 = new TextBox();	

Te...
maintainance hell
MacGyver
All he needed was a ballpoint 

pen and a paper clip
Ops
Widget t = new TextBox();	

!
RootPanel.get().add(t);
not enough…
app-framework wizardry needed
‣GWT Development
‣Basics
‣Structuring the UI
‣Talking to the server
GWT DEVELOPMENT IS COMPLICATED
HOT NEW STUFF.
NOT REALLY
GWT development is not new, 	

but different
WHY?
WEB DEVELOPMENT 	

IS NOT NEW...
1)
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 ...
RICH CLIENT 	

DEVELOPMENT 	

IS NOT NEW EITHER
2)
nothing new here
nothing new here too
Jan 2007
Look!YES! This is my code!
It’s all about

software 

engineering
Just a 

few tips
USE MVP!
You will get
used to it
event bus please
http://jarrettws.blogspot.de/2010/05/public-transport.html
eventbus.fireEvent(
NotificationEvent.info(
"Daten wurden erfolgreich gespeichert"
)
);
SINGLETON	

don‘t public static instance
BUT ON IE 6 IT IS SO SLOW!
BUT ON IE 7 IT IS SO SLOW!
BUT ON IE 8 IT IS SO SLOW!
BUT ON IE 9 IT IS SO SLOW!
DID ANYONE TEST ON IE / SURFACE?
browsers day to day job
too many HTTP requests
WTF?
> 2400 DOM elements
too many widgets
use large HTML chunks
use large HTML chunks
too many widgets ain‘t good
a Widget is a JS thing holding a
DOM element
<div />
CREATE CUSTOM WIDGETS
don‘t extend FlextTable
don‘t extendVerticalPanel
don‘t extend SimplePanel
CREATE CUSTOM EVENTS
exte...
the new native, do it in CSS
@-webkit-keyframes redPulse
{
from
{
box-shadow: 0px 0px 2px #ff0033;
}
50%
{
box-shadow: 0px...
use LayoutPanel
<g:LayoutPanel styleName="{B.style.mainContent}">
<g:layer left="0" right="340px" top="0" height="50%">
<g...
‣GWT Development
‣Basics
‣Structuring the UI
‣Talking to the server
„just do it“ pattern
„View A“
„View B“
mainPanel.setWiget( aWidget );
mainPanel.setWiget( bWidget );
some action
?
hard to maintain
history
management
from day one!	

!
back button and refresh as a
feature 	

(not a catastrophe)
Keep It Stupid Simple
• use PLACES framework
for main level navigation	

• if you really need to,
nest activities for a
se...
EXAMPLE
top menue bound to places framework
switching between places with fade in and out
teach user to wait until application is ready again
gives us enough time to load the required content
300ms out 500ms in
Components
inside of
„activity“ fire
non public,
custom
events
datepicker
sends WEEK
selected event
presenter may
goto itself, view
may be cached
#ashtag?!?
STATELESS
VIEW	

!
URL contains
EVERYTHING
needed to
rebuild view
user hits 

reload
GWT apps
starts, activity
gets fired
p...
some actions don‘t require PLACE navigation at all
use POPUPS/ DIALOGS to stay ABOVE navigation
let POPUPS/
DIALOGS move
slowly into view
pin POPUPS to
one side of the
window
Don‘t move your user
away from his „PLACE“
unless you have to.
Search DIALOG
slides in from right
side, stays on TOP
Navigation should not hurt
• The application shown uses only 3
levels of navigation, 

DOES NOT NEED MORE	

• PLACES used ...
Once upon a time, 	

a young good designer did a good looking design...	

‣ he will be using photoshop
or dreamweaver	

!
...
BEFOREYOU ADD THE LOGO
TO THE TOP
how many pixels do your
USERS have?
the designer or marketing guy using
photoshop is pro...
‣GWT Development
‣Basics
‣Structuring the UI
‣Talking to the server
GWT-RPC
is a good
solution if
handled
with care
SomeResult someMethodName(SomeParameter spo)
GWT-RPC
binds many
methods
in...
SomeResult someMethodName(SomeParameter spo)
this will be an object
this will be an object too
SomeResult someMethodName(SomeParameter spo)
the method names bind the requests to the result
typesafety all the way
USING GENERICS FOR 	

!
TYPESAFETY, 	

!
GET RID OF METHODS 	

!
AND INTERFACES

Java Generics FAQ !
400 pages.
PRO TIP:
<A extends Action<R>, R extends Result> R execute(A action);
now we just have one	

interface with one method
typesafety a...
!
command
pattern
GOF Pattern	

!
commonly used in 	

Rich Clients	

!
someAction
someResult
someActionHandler
EXECUTE
someAction
someResult
someActionHandlerPOJOS
someAction
someResult
someActionHandler
GWT-RPC
client server
batching	

caching	

security
caching	

exception translatio...
someAction
someResult
someActionHandler
RMI / HTTPInvoker
client server
batching	

caching	

security
caching	

exception ...
someAction
someResult
someActionHandler
JSON-servlet
client server
batching	

caching	

security
caching	

exception trans...
public class TerminLoadAction
implements Action<DataResult<TerminData>> {
!
private String terminId;
!
public TerminLoadAc...
dispatch.execute(
!
new TerminLoadAction(terminId),
new AsyncCallback<DataResult<TerminData>>() {
!
@Override
public void ...
public interface ActionHandler
<A extends Action<R>, R extends Result> {
!
Class<A> getActionType();
!
!
!
!
R execute(
A ...
@ActionHandlerBean
@Transactional
public final class TerminDataLoadHandler
implements ActionHandler<TerminLoadAction, Data...
interface	

versioning 	

hell?
public interface SomeNiceService
extends RemoteService {
!
String someService(String param);
!
String someServiceV2(String...
someAction
someResult
someActionHandlerPOJOS
someAction
someResult
someActionHandlermultiple

versions
someActionV2
someActionHandlerV2
same result
different versions ...
someAction
someResult
someActionHandlermultiple

versions
someActionV2
someActionHandlerV2
someResultV2
different results
why batch?
solving common
problems•one batch call is better than 10
single calls	

•less data	

•less roundtrip latency	

•avoid conn...
batchAction
someAction1
batchActionHandler
someAction2
someAction3
batchResult
someResult1
someResult2
someResult3
client ...
automatic batching?
GWT code execution
IDLE
browser event loop
Scheduler.scheduleEntry(…)
Scheduler.scheduleFinally(…)
Scheduler.scheduleDefer...
GWT code execution
IDLE
Scheduler.scheduleEntry(…)
Scheduler.scheduleFinally(…)
GWT code execution
IDLE
Scheduler.scheduleFinally(…)
collect commands
fire batch command
cmd 1!
cmd 2!
cmd 3!
cmd …
Schedul...
ENABLES FINE GRAINED
COMMANDS AND REUSE	

!
+	

!
ENABLES ORDERING ACTIONS
FOR EXECUTION ON THE
SERVER
BATCH EXECUTION
toggleTerminMetadata
reloadDashboardTermine
BooleanResult
DataListResult<Termin>
toggleTerminMetadata
reloadTermin
BooleanResult
DataResult<Termin>
toggleTerminMetadata
loadMonthStats
BooleanResult
DataResult<MonthStats>
loadMonthTermine DataListResult<Termin>
Thanks!
Javaland 2014 / GWT architectures and lessons learned
Javaland 2014 / GWT architectures and lessons learned
Upcoming SlideShare
Loading in...5
×

Javaland 2014 / GWT architectures and lessons learned

2,740

Published on

Talk at Javaland 2014 about GWT architectures and lessons learned

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,740
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
73
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Javaland 2014 / GWT architectures and lessons learned"

  1. 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. 2. ‣GWT Development ‣Basics ‣Structuring the UI ‣Talking to the server
  3. 3. Shift happened Java development, JS deployment, Async, RPC, RIA/ single page, ...
  4. 4. Web 2.0 ? development 
 is all about… ! …js …html …css ! none of it ! …jcp …oracle … IBM … backend
  5. 5. what is a GWT application? a chunk of JS that does a lot of DOM manipulation to create web applications
  6. 6. Widget t = new TextBox(); ! RootPanel.get().add(t); UI component model Browser Composite Components
  7. 7. Architecture shift Web applications Model 2 web applications Rich internet applications + testability! + maintainance! + product development
  8. 8. Browser Server user action full html response full html response full html response user action user action classic web ! developm ent
  9. 9. Browser Server event first request full html response data data request data data request event event event RIA web 
 developm ent
  10. 10. Web frameworks
  11. 11. low level, generic tools
  12. 12. let‘s build big things
  13. 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. 14. maintainance hell
  15. 15. MacGyver All he needed was a ballpoint 
 pen and a paper clip
  16. 16. Ops
  17. 17. Widget t = new TextBox(); ! RootPanel.get().add(t); not enough…
  18. 18. app-framework wizardry needed
  19. 19. ‣GWT Development ‣Basics ‣Structuring the UI ‣Talking to the server
  20. 20. GWT DEVELOPMENT IS COMPLICATED HOT NEW STUFF.
  21. 21. NOT REALLY
  22. 22. GWT development is not new, but different WHY?
  23. 23. WEB DEVELOPMENT IS NOT NEW... 1)
  24. 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. 25. RICH CLIENT DEVELOPMENT IS NOT NEW EITHER 2)
  26. 26. nothing new here
  27. 27. nothing new here too Jan 2007
  28. 28. Look!YES! This is my code!
  29. 29. It’s all about
 software 
 engineering
  30. 30. Just a 
 few tips
  31. 31. USE MVP! You will get used to it
  32. 32. event bus please http://jarrettws.blogspot.de/2010/05/public-transport.html
  33. 33. eventbus.fireEvent( NotificationEvent.info( "Daten wurden erfolgreich gespeichert" ) );
  34. 34. SINGLETON don‘t public static instance
  35. 35. BUT ON IE 6 IT IS SO SLOW!
  36. 36. BUT ON IE 7 IT IS SO SLOW!
  37. 37. BUT ON IE 8 IT IS SO SLOW!
  38. 38. BUT ON IE 9 IT IS SO SLOW!
  39. 39. DID ANYONE TEST ON IE / SURFACE?
  40. 40. browsers day to day job
  41. 41. too many HTTP requests
  42. 42. WTF? > 2400 DOM elements
  43. 43. too many widgets
  44. 44. use large HTML chunks
  45. 45. use large HTML chunks
  46. 46. too many widgets ain‘t good
  47. 47. a Widget is a JS thing holding a DOM element <div />
  48. 48. CREATE CUSTOM WIDGETS don‘t extend FlextTable don‘t extendVerticalPanel don‘t extend SimplePanel CREATE CUSTOM EVENTS extend composite!!!
  49. 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. 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. 51. ‣GWT Development ‣Basics ‣Structuring the UI ‣Talking to the server
  52. 52. „just do it“ pattern „View A“ „View B“ mainPanel.setWiget( aWidget ); mainPanel.setWiget( bWidget ); some action ?
  53. 53. hard to maintain
  54. 54. history management from day one! ! back button and refresh as a feature (not a catastrophe)
  55. 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. 56. EXAMPLE
  57. 57. top menue bound to places framework
  58. 58. switching between places with fade in and out
  59. 59. teach user to wait until application is ready again
  60. 60. gives us enough time to load the required content 300ms out 500ms in
  61. 61. Components inside of „activity“ fire non public, custom events
  62. 62. datepicker sends WEEK selected event
  63. 63. presenter may goto itself, view may be cached
  64. 64. #ashtag?!?
  65. 65. 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
  66. 66. some actions don‘t require PLACE navigation at all
  67. 67. use POPUPS/ DIALOGS to stay ABOVE navigation
  68. 68. let POPUPS/ DIALOGS move slowly into view pin POPUPS to one side of the window
  69. 69. Don‘t move your user away from his „PLACE“ unless you have to. Search DIALOG slides in from right side, stays on TOP
  70. 70. 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…
  71. 71. 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
  72. 72. 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
  73. 73. ‣GWT Development ‣Basics ‣Structuring the UI ‣Talking to the server
  74. 74. 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
  75. 75. SomeResult someMethodName(SomeParameter spo) this will be an object this will be an object too
  76. 76. SomeResult someMethodName(SomeParameter spo) the method names bind the requests to the result typesafety all the way
  77. 77. USING GENERICS FOR ! TYPESAFETY, ! GET RID OF METHODS ! AND INTERFACES
 Java Generics FAQ ! 400 pages. PRO TIP:
  78. 78. <A extends Action<R>, R extends Result> R execute(A action); now we just have one interface with one method typesafety all the way
  79. 79. ! command pattern GOF Pattern ! commonly used in Rich Clients !
  80. 80. someAction someResult someActionHandler EXECUTE
  81. 81. someAction someResult someActionHandlerPOJOS
  82. 82. someAction someResult someActionHandler GWT-RPC client server batching caching security caching exception translation security GWT client
  83. 83. someAction someResult someActionHandler RMI / HTTPInvoker client server batching caching security caching exception translation security Java client
  84. 84. someAction someResult someActionHandler JSON-servlet client server batching caching security caching exception translation security Mobile client
  85. 85. 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
  86. 86. 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)
  87. 87. 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
  88. 88. @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…
  89. 89. interface versioning hell?
  90. 90. 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?
  91. 91. someAction someResult someActionHandlerPOJOS
  92. 92. someAction someResult someActionHandlermultiple
 versions someActionV2 someActionHandlerV2 same result different versions can coexist!
  93. 93. someAction someResult someActionHandlermultiple
 versions someActionV2 someActionHandlerV2 someResultV2 different results
  94. 94. why batch?
  95. 95. 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
  96. 96. 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
  97. 97. automatic batching?
  98. 98. GWT code execution IDLE browser event loop Scheduler.scheduleEntry(…) Scheduler.scheduleFinally(…) Scheduler.scheduleDeferred(…)
  99. 99. GWT code execution IDLE Scheduler.scheduleEntry(…) Scheduler.scheduleFinally(…)
  100. 100. GWT code execution IDLE Scheduler.scheduleFinally(…) collect commands fire batch command cmd 1! cmd 2! cmd 3! cmd … Scheduler.scheduleEntry(…)
  101. 101. ENABLES FINE GRAINED COMMANDS AND REUSE ! + ! ENABLES ORDERING ACTIONS FOR EXECUTION ON THE SERVER BATCH EXECUTION
  102. 102. toggleTerminMetadata reloadDashboardTermine BooleanResult DataListResult<Termin>
  103. 103. toggleTerminMetadata reloadTermin BooleanResult DataResult<Termin>
  104. 104. toggleTerminMetadata loadMonthStats BooleanResult DataResult<MonthStats> loadMonthTermine DataListResult<Termin>
  105. 105. Thanks!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×