Agile AJAX:The Google Web Toolkit

Experience

Paul Infield-Harmpaul@infield-harm.orgwww.infield-harm.org

Daniel Wellmandan@danielwellman.comblog.danielwellman.com

New York • Bostonwww.cyrusinnovation.com

What is

Google Web Toolkit ?

Java

Java to JavaScriptcompiler

Java JavaScript

.java.java.java.java.javaCompiler

.js

.js

.js

.js

Why?

“...because there already are so many

great tools out there, not to mention

scads of books, articles, libraries, and expertise.”

- The GWT Team

Demo

A Taste of GWT

• Application, Java source, generated js

• Exploratory dev in hosted mode

• Making a change, test-first

A Taste of GWT

• Application, Java source, generated js

• Exploratory dev in hosted mode

• Making a change, test-first

A Taste of GWT

• Application, Java source, generated js

• Exploratory dev in hosted mode

• Making a change, test-first

A Taste of GWT

• Application, Java source, generated js

• Exploratory dev in hosted mode

• Making a change, test-first

Application, Java source, generated JS

Exploratory dev in hosted mode

Making a change, test-first

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

JSNI

GWT and

Agile

Development

Practices

Agile DevelopmentPractices

• Refactoring

• Performance Optimization

• Test-Driven Development

• Collective Code Ownership

• Continuous Integration

Refactoring

Wrap Return ValueInvert Boolean

Safe DeleteMove Instance Method

Inline ConstantExtract Subclass

Replace Method Code DuplicatesConvert To Instance Method

RenameMove Inner Class to Upper Level

Change Method SignatureMake Method StaticCopy/Clone ClassExtract Method

Introduce VariableIntroduce Field

Introduce ConstantIntroduce Parameter

Extract InterfaceExtract Superclass

Use Interface Where PossiblePull Members Up

Push Members DownReplace Inheritance with Delegation

Inline Local VariableInline Method

Convert Anonymous Class to InnerEncapsulate Fields

Replace Temp With QueryReplace Constructor With Factory Method

Java RefactoringsJavaScript Refactorings

Safe DeleteRename

Move/Copy FileIntroduce Variable

Introduce FieldIntroduce Constant

Rem

ove

Mid

dlem

an

Extr

act M

etho

d O

bjec

t

Inline Superclass

Introduce Parameter O

bject

Type M

igrati

on Extract Class

Typical Java Web Template

<div> <span>${title}</span> <a href="..."><img src="..."/></a> <a href="..."><img src="..."/></a> </div>

GWT Layout

label = new Label(title);panel.add(label);

upButton = new Image("...");panel.add(upButton); removeButton = new Image("...");panel.add(removeButton);

Refactored GWT

new BookPanel(title);

PerformanceOptimization

BetterJavaScript code than

you would write

by hand

“

”

- “Making GWT Better” on GWT Project Page

photo by clothfairy

OptimizingCompiler

photo by ralphbijker

Name That Compile!

classCalculator{publicintadd(intx,inty){returnx+y;}}

CalculatormyCalc=newCalculator();Window.alert((myCalc.add(3,2));

Compiles To:

alert(5)

Whole-Program Optimization

Whole-ProgramOptimization

Java Library

Compiler

JavaScript

... but no reflection.

employee.set("firstName", "Fred");X

Simple Design

photo by Alicia Solario

Test-Driven Development

JUnitTestNG

FitConcordion

Three ways to test

Plain JUnit

@TestpublicvoidadditionsGoToTopOfList(){ startingWithTitles("First added");

model.addTitle("Second added"); assertThat(model.getTitles().get(0), is("Second added"));}

In a Real Browser

In the Hosted Mode Browser

GWTTestCase

How do you test UI?

Model-View-Presenter

View

Presenter

Model

Collective Code Ownership

photo by sanja gjenero

Same Code on Browser and Server

JavaObject

Front End Developers

Server Developers

Developers

Code-based UI LayoutHorizontalPanel panel = new HorizontalPanel();panel.add(new TextBox());panel.add(new Button(...));panel.add(new Image(...);

Developers UI Designers

:-) :-(

Cross-browser CSSis still hard

ContinuousIntegration

photo by wilhei

Build Tools

Build Servers

Hudson

Static Analysis& Code Quality Tools

Checkstyle

Image by Svilen Mushkatov

When

should you

use GWT?

photo by Boby Dimitrov

Is this a web siteor a web application?

Web site Web application

photo by Vidiot

Checkstyle

JUnit

TestNG

FitConcordion

Questions?

New York • Bostonwww.cyrusinnovation.com

http://github.com/pinfieldharm/Agile-2009-GWT-DemoSource code for the demo available on github:

Paul Infield-Harmpaul@infield-harm.orgwww.infield-harm.org

Daniel Wellmandan@danielwellman.comblog.danielwellman.com

http://tinyurl.com/agilegwtReferences and Resources: