Building Ajax Applications with the Google Web Toolkit Vivek Prahlad

Agenda What is the Google Web Toolkit? Features Architectural issues with AJAX applications And how the GWT handles them Experience report: What went well? Gotchas Lots of demos

What is the Google Web Toolkit?

Features

Architectural issues with AJAX applications

And how the GWT handles them

Experience report:

What went well?

Gotchas

Lots of demos

What is the GWT? A UI framework for building Ajax apps in Java Best suited for one page Ajax apps Can be embedded into existing apps as well Open Source (Apache 2 license) Component based programming model Similar to, but simpler than Swing / SWT Control application appearance via CSS Simple RPC framework

A UI framework for building Ajax apps in Java

Best suited for one page Ajax apps

Can be embedded into existing apps as well

Open Source (Apache 2 license)

Component based programming model

Similar to, but simpler than Swing / SWT

Control application appearance via CSS

Simple RPC framework

Source: Adaptive Path How are Ajax apps different?

Source: Adaptive Path

Source: Adaptive Path

Demo: Hello World

Developing applications Client side code: Java + GWT UI library Restriction: subset of the JDK – java.lang, java.util Compiled to javascript. Morfik, Script# are similar Server side code: GWT RPC + usual suspects Spring & Hibernate Can send domain layer classes over the wire Need to implement IsSerializable Compiled to bytecode as usual

Client side code: Java + GWT UI library

Restriction: subset of the JDK – java.lang, java.util

Compiled to javascript. Morfik, Script# are similar

Server side code: GWT RPC + usual suspects

Spring & Hibernate

Can send domain layer classes over the wire

Need to implement IsSerializable

Compiled to bytecode as usual

Features Component based framework Browser support: IE6+, Firefox, Mozilla, Safari, Opera No Konqueror support Internationalization Debugging Browser history management Integrate with javascript libraries via JSNI JUnit integration

Component based framework

Browser support: IE6+, Firefox, Mozilla, Safari, Opera

No Konqueror support

Internationalization

Debugging

Browser history management

Integrate with javascript libraries via JSNI

JUnit integration

Demo: More Examples

Architectural Issues? Back button support? Handled by the browser Session state? All on the client, not a server issue UI event handling? All on the client, no round trip Deployment? Compiled Javascript code, java on server side

Back button support?

Handled by the browser

Session state?

All on the client, not a server issue

UI event handling?

All on the client, no round trip

Deployment?

Compiled Javascript code, java on server side

Answers to a few Ajax headaches History? Handled by the History class Cross browser support? Abstract DOM class RPC? Java based RPC mechanism

History?

Handled by the History class

Cross browser support?

Abstract DOM class

RPC?

Java based RPC mechanism

Building Widgets Build new widgets from existing ones Style with CSS No, your app doesn't have to look like Gmail! Layout with panels

Build new widgets from existing ones

Style with CSS

No, your app doesn't have to look like Gmail!

Layout with panels

Testing Sahi ( http://sahi.co.in ) for functional testing Unit testing via the GWTTestCase Same restrictions as with UI code MVC is your friend Use GWTTestcase for the view Test the Model and Controller as usual

Sahi ( http://sahi.co.in ) for functional testing

Unit testing via the GWTTestCase

Same restrictions as with UI code

MVC is your friend

Use GWTTestcase for the view

Test the Model and Controller as usual

What went well? Truly cross-browser App needed 2 lines of custom javascript For disabling text selection Great component model Easy to build custom components from scratch Java to Javascript compiler works like a charm No memory leaks Break up large apps with modules & IFrames

Truly cross-browser

App needed 2 lines of custom javascript

For disabling text selection

Great component model

Easy to build custom components from scratch

Java to Javascript compiler works like a charm

No memory leaks

Break up large apps with modules & IFrames

Gotchas RPC mechanism works only with GWT clients Some widgets use HTML tables internally CSS for layout faster, but more challenging Table widget support weak No MVC separation

RPC mechanism works only with GWT clients

Some widgets use HTML tables internally

CSS for layout faster, but more challenging

Table widget support weak

No MVC separation

Gotchas Need to be careful about client side state Ajax apps usually long lived – memory leaks can kill you Some widgets need a lot of custom HTML Tree widget biggest offender Need to replace hibernated objects before serializing Replace PersistentSet, PersistentList with HashSet, ArrayList

Need to be careful about client side state

Ajax apps usually long lived – memory leaks can kill you

Some widgets need a lot of custom HTML

Tree widget biggest offender

Need to replace hibernated objects before serializing

Replace PersistentSet, PersistentList with HashSet, ArrayList

Resources http://code.google.com/webtoolkit http://groups.google.com/Google-Web-Toolkit http://www.adaptivepath.com/publications/essays/archives/000385.php

http://code.google.com/webtoolkit

http://groups.google.com/Google-Web-Toolkit

http://www.adaptivepath.com/publications/essays/archives/000385.php

Questions?