GWT Architectures and Lessons
Learned
p.g.taboada | pgt technology scouting GmbH
Papick G. Taboada
pgt technology scouting GmbH!
http://pgt.de
Orientation in Objects GmbH!
http://oio.de
http://gwtreferencelist.appspot.com
‣ GWT Development
‣ Basics	

‣ Structuring the UI
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
UI component model

Components

Widget t = new TextBox();	

!

RootPanel.get().add(t);
Browser

Composite
+ testability!
+ maintainance!
+ product development

Architecture shift
Web applications

Model 2 web applications

Rich ...
!
eb t
w en
sic pm
as lo
cl ve
de

Server

Browser

user action
e

ons
html resp
full

user action
po
l html res
ful

nse
...



eb ent
w
IA pm
R lo
ve
de

Server

Browser
first reques

t
e

l respons
full htm

event
event
event

data reque

st

dat...
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
app-framework wizardry needed
‣ GWT Development	

‣ Basics
‣ Structuring the UI
DANGER 	

GWT DEVELOPMENT IS
COMPLICATED HOT NEW
STUFF.
NOT REALLY
GWT
development
is not new, 	

but different
WEB DEVELOPMENT 	

IS NOT NEW...
HTML 2.0
November 1995

HTML 4.0 update
April 1998
HTML 4.0.1
Dez 1999

CSS 1
Dez 1996

XHTML 1.0
Jan 2000

HTML 3.2
Janua...
RICH CLIENT DEVELOPMENT 	

IS NOT NEW EITHER
nothing new here
Jan 2007

nothing new here too
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
> 2400 DOM elements

WTF?
too many widgets
use large HTML chunks
too many widgets ain‘t good
<div />
a Widget is a JS thing holding a
DOM element
CREATE CUSTOM WIDGETS
CREATE CUSTOM EVENTS

don‘t extend SimplePanel
don‘t extend VerticalPanel
don‘t extend FlextTable
ex...
@-webkit-keyframes
{
from
{
box-shadow:
}
50%
{
box-shadow:
}
to
{
box-shadow:
}
}

redPulse

0px 0px 2px #ff0033;

0px 0p...
<g:LayoutPanel styleName="{B.style.mainContent}">
<g:layer left="0" right="340px" top="0" height="50%">
<g:SimpleLayoutPan...
Ray Ryan - lessons learned
‣ GWT Development	

‣ Basics	

‣ Structuring the UI
some action

mainPanel.setWiget( aWidget
);

mainPanel.setWiget( bWidget
);

„View B“
„View A“

„just do it“ pattern
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...
‣ he will be using photoshop
or dreamweaver	

‣ he will not use the
software	

‣ he will not build the
software	

‣ he wil...
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

view is back
again

GWT apps
start...
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
Search DIALOG
slides in from right
side, stays on TOP

Don‘t move your
user away from his
„PLACE“ unless
you have to.
Navigation should not hurt
• The application shown uses only 3
levels of navigation, DOES NOT
NEED MORE	


• PLACES used f...
BEFORE YOU ADD THE LOGO
TO THE TOP

HOW MANY PIXELS DO
YOUR USERS HAVE?

the designer or
marketing guy
using photoshop is
...
Thanks!
GWT Architectures and Lessons Learned (WJAX 2013)
GWT Architectures and Lessons Learned (WJAX 2013)
Upcoming SlideShare
Loading in...5
×

GWT Architectures and Lessons Learned (WJAX 2013)

1,098

Published on

GWT-Entwicklung ist Rich-Client-Entwicklung, und das ist für viele Webentwickler neu. Mit den "Lessons Learned" aus der Entwicklung von Google AdWords wurden Architekturmuster für GWT-Anwendungen vorgestellt. Einiges davon ist inzwischen in GWT gelandet und kann sofort eingesetzt werden. In diesem Vortrag werden Architekturmuster vorgestellt, die in den letzten Jahren in einigen Projekten erfolgreich eingesetzt wurden.

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

  • Be the first to like this

No Downloads
Views
Total Views
1,098
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

GWT Architectures and Lessons Learned (WJAX 2013)

  1. 1. GWT Architectures and Lessons Learned p.g.taboada | pgt technology scouting GmbH
  2. 2. Papick G. Taboada pgt technology scouting GmbH! http://pgt.de Orientation in Objects GmbH! http://oio.de
  3. 3. http://gwtreferencelist.appspot.com
  4. 4. ‣ GWT Development ‣ Basics ‣ Structuring the UI
  5. 5. Shift happened Java development, JS deployment, Async, RPC, RIA/ single page, ...
  6. 6. Web 2.0 ? development 
 is all about… ! …js …html …css ! none of it ! …jcp …oracle … IBM … backend
  7. 7. what is a GWT application? a chunk of JS that does a lot of DOM manipulation to create web applications
  8. 8. UI component model Components Widget t = new TextBox(); ! RootPanel.get().add(t); Browser Composite
  9. 9. + testability! + maintainance! + product development Architecture shift Web applications Model 2 web applications Rich internet applications
  10. 10. ! eb t w en sic pm as lo cl ve de Server Browser user action e ons html resp full user action po l html res ful nse user action po l html res ful nse
  11. 11. 
 eb ent w IA pm R lo ve de Server Browser first reques t e l respons full htm event event event data reque st data event data reque data st
  12. 12. Web frameworks
  13. 13. low level, generic tools
  14. 14. let‘s build big things
  15. 15. 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);
  16. 16. maintainance hell
  17. 17. MacGyver All he needed was a ballpoint 
 pen and a paper clip
  18. 18. Ops
  19. 19. app-framework wizardry needed
  20. 20. ‣ GWT Development ‣ Basics ‣ Structuring the UI
  21. 21. DANGER GWT DEVELOPMENT IS COMPLICATED HOT NEW STUFF.
  22. 22. NOT REALLY
  23. 23. GWT development is not new, but different
  24. 24. WEB DEVELOPMENT IS NOT NEW...
  25. 25. HTML 2.0 November 1995 HTML 4.0 update April 1998 HTML 4.0.1 Dez 1999 CSS 1 Dez 1996 XHTML 1.0 Jan 2000 HTML 3.2 Januar 1997 J2SE 1.3 Mai 2000 HTML 4.0 Dezember 1997 JDK 1.0 Jan 1996 CSS 2.1 XHTML 1.1 Mai 2001 J2SE 1.2 Dez 1998 JDK 1.1 Feb 1997 CSS 2 Mai 1998 Java EE 1.2 Dez 1999 Internet Explorer 6 Aug 2001 Feb 2004 – Jun 2011 CSS level 2 revision 1, often referred to as "CS errors in CSS 2, removes poorly supported or n interoperable features and adds already-imple browser extensions to the specification. In orde with the W3C Process for standardizing techn specifications, CSS 2.1 went back and forth be Working Draft status and Candidate Recomm status for many years. THE Jan 2000 Jan 2005
  26. 26. RICH CLIENT DEVELOPMENT IS NOT NEW EITHER
  27. 27. nothing new here
  28. 28. Jan 2007 nothing new here too
  29. 29. YES! This is my code!
  30. 30. It’s all about
 software 
 engineering
  31. 31. Just a 
 few tips
  32. 32. USE MVP! You will get used to it
  33. 33. event bus please http://jarrettws.blogspot.de/2010/05/public-transport.html
  34. 34. eventbus.fireEvent( NotificationEvent.info( "Daten wurden erfolgreich gespeichert" ) );
  35. 35. SINGLETON don‘t public static instance
  36. 36. BUT ON IE 6 IT IS SO SLOW!
  37. 37. BUT ON IE 7 IT IS SO SLOW!
  38. 38. BUT ON IE 8 IT IS SO SLOW!
  39. 39. BUT ON IE 9 IT IS SO SLOW!
  40. 40. DID ANYONE TEST ON IE / SURFACE?
  41. 41. browsers day to day job
  42. 42. too many HTTP requests
  43. 43. > 2400 DOM elements WTF?
  44. 44. too many widgets
  45. 45. use large HTML chunks
  46. 46. too many widgets ain‘t good
  47. 47. <div /> a Widget is a JS thing holding a DOM element
  48. 48. CREATE CUSTOM WIDGETS CREATE CUSTOM EVENTS don‘t extend SimplePanel don‘t extend VerticalPanel don‘t extend FlextTable extend composite!!!
  49. 49. @-webkit-keyframes { from { box-shadow: } 50% { box-shadow: } to { box-shadow: } } redPulse 0px 0px 2px #ff0033; 0px 0px 10px #ff0033; 0px 0px 2px #ff0033; if you can, do it in CSS
  50. 50. <g:LayoutPanel styleName="{B.style.mainContent}"> <g:layer left="0" right="340px" top="0" height="50%"> <g:SimpleLayoutPanel styleName="{B.style.mainWidget}" addS <ux:DashboardTermineDataGrid ui:field="terminetable" sty </g:SimpleLayoutPanel> </g:layer> <g:layer right="0" width="340px" top="0" height="50%"> <g:SimpleLayoutPanel styleName="{B.style.mainWidget}" addS <ux:KWStatsDataGrid ui:field="statstable" styleName="{B. </g:SimpleLayoutPanel> </g:layer> <g:layer right="0" left="0" bottom="0" height="50%"> <g:SimpleLayoutPanel styleName="{B.style.mainWidget}" addS <ux:WartelisteDataGrid ui:field="wartelistetable" styleN </g:SimpleLayoutPanel> </g:layer> </g:LayoutPanel> use LayoutPanel
  51. 51. Ray Ryan - lessons learned
  52. 52. ‣ GWT Development ‣ Basics ‣ Structuring the UI
  53. 53. some action mainPanel.setWiget( aWidget ); mainPanel.setWiget( bWidget ); „View B“ „View A“ „just do it“ pattern
  54. 54. hard to maintain
  55. 55. history management from day one! ! back button and refresh as a feature (not a catastrophe)
  56. 56. 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.
  57. 57. ‣ 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 Once upon a time, a good designer does good a good looking design...
  58. 58. top menue bound to places framework
  59. 59. switching between places with fade in and out
  60. 60. teach user to wait until application is ready again
  61. 61. gives us enough time to load the required content 300ms out 500ms in
  62. 62. Components inside of „activity“ fire non public, custom events
  63. 63. datepicker sends WEEK selected event
  64. 64. presenter may goto itself, view may be cached
  65. 65. # ashtag?!?
  66. 66. 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
  67. 67. some actions don‘t require PLACE navigation at all
  68. 68. use POPUPS/ DIALOGS to stay ABOVE navigation
  69. 69. let POPUPS/ DIALOGS move slowly into view pin POPUPS to one side of the window
  70. 70. Search DIALOG slides in from right side, stays on TOP Don‘t move your user away from his „PLACE“ unless you have to.
  71. 71. 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…
  72. 72. 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
  73. 73. Thanks!
  1. A particular slide catching your eye?

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

×