This document discusses Google Web Toolkit (GWT), an open source Java framework that compiles Java code into JavaScript that can run in web browsers. It summarizes key features of GWT including its Java-to-JavaScript compiler, exploratory development using hosted mode, refactoring and performance optimization of the generated JavaScript code, support for test-driven development, and tools for continuous integration. Examples of how GWT supports agile practices like refactoring, testing, and collective code ownership for web development are also provided.

1. Agile AJAX:
The Google Web Toolkit
Experience
Paul Infield-Harm Daniel Wellman
paul@infield-harm.org dan@danielwellman.com
www.infield-harm.org blog.danielwellman.com
www.cyrusinnovation.com
New York • Boston

4. What is
Google Web Toolkit ?

5. Java

6. Java to JavaScript
compiler
.java .js .js
.java
.java Compiler
.java
.java
.js .js
Java JavaScript

7. Why?

8. “...because there already are so many
great tools out there, not to mention
scads of books, articles,
libraries, and expertise.”
- The GWT Team

9. Demo

10. A Taste of GWT
• Application, Java source, generated js
• Exploratory dev in hosted mode
• Making a change, test-first

11. A Taste of GWT
• Application, Java source, generated js
• Exploratory dev in hosted mode
• Making a change, test-first

12. A Taste of GWT
• Application, Java source, generated js
• Exploratory dev in hosted mode
• Making a change, test-first

13. A Taste of GWT
• Application, Java source, generated js
• Exploratory dev in hosted mode
• Making a change, test-first

14. Application, Java
source, generated JS

15. Exploratory dev in
hosted mode

16. Making a change, test-
first

17. JSNI
photo by clothfairy
http://www.flickr.com/photos/clothfairy/ CC BY 2.0

18. GWT and
Agile
Development
Practices

19. Agile Development
Practices
• Refactoring
• Performance Optimization
• Test-Driven Development
• Collective Code Ownership
• Continuous Integration

20. Refactoring

22. Wrap Return Value
Invert Boolean
Safe Delete
Move Instance Method
Inline Constant
Extract Subclass
Replace Method Code Duplicates
Convert To Instance Method
Rename
Move Inner Class to Upper Level
Change Method Signature
Make Method Static
Copy/Clone Class
Extract Method
Introduce Variable
Introduce Field
Introduce Constant
Introduce Parameter
Extract Interface Inl
ine
Safe Delete Extract Superclass Su
Intr
pe
Use Interface Where Possible rcl
odu
ass
n
Rename
dle ct
ma
Pull Members Up
Mid je
ce
ve Ob
Push Members Down
Par
Move/Copy File Replace Inheritance with Delegation
mo d
am
Re etho
Inline Local Variable
e
Introduce Variable
ter
M
Inline Method
n
act
Ob
io Convert Anonymous Class to Inner
rat
Ex
tr
Introduce Field g
jec
Mi
tra
Ex
Encapsulate Fields
e
t
ct
p Replace Temp With Query
Ty
Cl
Introduce Constant
as
Replace Constructor With Factory Method
s
JavaScript Refactorings Java Refactorings

23. Typical Java Web Template
<div>
<span>${title}</span>
<a href="..."><img src="..."/></a>
<a href="..."><img src="..."/></a>
</div>

24. GWT Layout
label = new Label(title);
panel.add(label);
upButton = new Image("...");
panel.add(upButton);
removeButton = new Image("...");
panel.add(removeButton);

25. Refactored GWT
new BookPanel(title);

26. Performance
Optimization

27. Better
“
JavaScript code than
you would write
by hand ”
- “Making GWT Better”
on GWT Project Page
photo by clothfairy

28. Optimizing
Compiler
photo by ralphbijker

29. Name That Compile!
class Calculator {
public int add(int x, int y) {
return x + y;
}
}
Calculator myCalc = new Calculator();
Window.alert((myCalc.add(3, 2));

30. Compiles To:
alert(5)

32. Whole-Program
Optimization

33. Whole-Program
Optimization
Compiler
Java Library JavaScript

34. ... but no reflection.
X
employee.set("firstName", "Fred");

35. photo by Alicia Solario
Simple Design

36. Test-Driven
Development

37. JUnit
TestNG
Concordion Fit

38. Three ways to test

39. Plain JUnit
@Test
public void additionsGoToTopOfList() {
startingWithTitles("First added");
model.addTitle("Second added");
assertThat(model.getTitles().get(0),
is("Second added"));
}

40. In a Real Browser

41. In the Hosted Mode
Browser
GWTTestCase

42. How do you test UI?

43. Model-View-Presenter
View
Presenter
Model

44. photo by sanja gjenero
Collective Code
Ownership

45. Same Code on
Browser and Server
Java
Object

46. Developers
Front End
Server Developers
Developers

47. Code-based UI Layout
HorizontalPanel panel = new HorizontalPanel();
panel.add(new TextBox());
panel.add(new Button(...));
panel.add(new Image(...);
:-)
Developers :-(
UI Designers

48. Cross-browser CSS
is still hard

49. Continuous
Integration
photo by wilhei

50. Build Tools

51. Build Servers
Hudson

52. Static Analysis
& Code Quality Tools
Checkstyle

53. Image by Svilen Mushkatov
When
should you
use GWT?

54. photo by Boby Dimitrov

55. Is this a web site
or a web application?
Web site Web application

56. photo by Vidiot

59. JUnit
TestNG
Checkstyle
Concordion Fit

60. Questions?
Source code for the demo available on github:
http://github.com/pinfieldharm/Agile-2009-GWT-Demo
References and Resources:
http://tinyurl.com/agilegwt
Paul Infield-Harm Daniel Wellman
paul@infield-harm.org dan@danielwellman.com
www.infield-harm.org blog.danielwellman.com
www.cyrusinnovation.com
New York • Boston