AJAX & GWT
Trey Roby

ADASS ‘09

Roby - 1

Change

The Web is Changing
Things we never imagined
 Central to people’s lives
 Great Opportunity
ADASS ‘09

Roby - 2

A Very Brief HistoryofComputing

ADASS ‘09

Roby - 3

MicrosoftHow did Microsoft make it big?
Entered the Main Frame world
 Everything batch
 Introduced interactive programming to business

ADASS ‘09

Roby - 4

Classic Web Browser
Application

Batch processing front end
1. Fill out form
2. Server processes
3. Get results

ADASS ‘09

Roby - 5

AJAX Revolution

Changed the way we think about web-development

Google Maps - Feb 8, 2005
 Started it all - 4 1/2 years ago
 Millions of people wanted to use it

ADASS ‘09

Roby - 6

Everywhere

Google– Calendar– Word processor– Gmail - fastest growingYahoo has revamped website– Finance, Mail

News websites
 YouTube, NetFlix, Hulu, Facebook
 Slashdot.org
 Specialty sites– doodle.com, rememberthemilk.com

Adobe Photoshop coming to web
 Apple announced new web-development environment– http://280slides.com/
ADASS ‘09

Microsoft will rewrite website
Roby - 7

Technologies Behind The RevolutionADASS ‘09

Roby - 8

AJAX

Asynchronous JavaScript and XML

Nothing new

Technologies– JavaScript– Dynamic HTML– CSS– DOM– XML– JASONADASS ‘09

Emphasis on JavaScript speed
Roby - 9

Dynamic HTMLWeb Page can change without reloadHTML document– viewed as a tree
– Each tag is a node

ADASS ‘09

Scripts can change any part of treeAny change immediately shows up on page

DOM - Document Object Model

Roby - 10

DOMADASS ‘09

Roby - 11

JavaScript

Powerful scripting language
 Very flexible
 Runs in browser
 C like Easy to get started Event driven– onclick– onfocus– onresize– onkeydown– onmousemoveDOM– access DOM– change DOM

ADASS ‘09

Roby - 12

Asynchronous Calls



JavaScript can make Asynchronous HTTP calls

Synchronous Call?
– call made– results return immediately– typical program function call

Asynchronous Call to Server?
– function call is made– results return later– a method (function) is called upon completion– results can be used to change DOM

ADASS ‘09

Roby - 13

AJAX Web vs. Classic WebClassic Web– One server call = Whole Page Load
– Server call = UI Generation– Server call = Large Overhead– Server call required for useful results

AJAX Web– One Server call = Page update– One Server call = data only
– One Server call = small overhead– Page can generate results without server callAjax allows for multiple, lighter,server calls and more dynamic
web pages
ADASS ‘09

Roby - 14

Classic Web Application

1.

Send Form Request

2.

Server1) retrieves data
2) builds UI3) generates HTML

3.
4.

Browser
HTMLPageFormRequest

Server returns HTML Page
Browser shows HTML pageADASS ‘09

BrowserBrowserBrowserBrowserBrowserBrowser

ServerRoby - 15

JavaScript/Ajax Based
Web Application

1.

Compiled JavaScript client
runs on browser

2.

Sends data request

3.

Server returns data

4.

Client manages & presents data

5.

Happens again & again on same
page

BrowserBrowser(JavaScript))(JavaScriptData

Data
Results

BrowserBrowserBrowserBrowserBrowserBrowser

ADASS ‘09

ServerRoby - 16

Browser becomes Application
Environment

ADASS ‘09Application code runs on browser

Return of interactive programmingHeavy client

Roby - 17

Heavy ClientADASS ‘09

Better use browser computing power

Takes advantage full browser potential

FasterInteractiveBetter user experience

Roby - 18

Challenges in using AJAXADASS ‘09

Roby - 19

AJAX Challenges

ADASS ‘09

Browsers work differently



Browser API can be slightly different

Requires constant checking of browser type

Many, many browser subtleties

Roby - 20

JavaScript Weaknesses

Not strongly typed– Scripting languageWeak debugger support

No compilation– syntax errors caught at runtime– Can’t optimizeADASS ‘09

Does not work well with large applications

Roby - 21

Great Opportunity / Lots of problems



Opportunity– Stunning web applications– Great benefit to user
– Easy to use

Problems– Hard to debug– Lots of testing on Browsers– Have to be AJAX guru
– Easy to write bad Java Script

ADASS ‘09

Roby - 22

What is the Solution?

Google Web Toolkit

ADASS ‘09

Roby - 23GWT

ADASS ‘09

Google Web Toolkit

One approach to AJAX

Well SupportedJava instead of JavaScript

Attempts to fix the AJAX challenges



FreeRoby - 24Benefits of GWTADASS ‘09

Handles cross browser issues

Benefits of compilationMore optimalJava better for large applications

Great debugging support

Java code reuseNatively call JavaScriptNo plugins

Roby - 25

How it works

ADASS ‘09

Compiles Java into JavaScriptCreates one JavaScript file per browser type

Only builds what you useProvides UI support

Comes with a development browser for debugging

Provides an RPC environment for server callsAllows for anything JavaScript can doRoby - 26

How to develop with GWTIEWriteCodein JavaTestBrowser

Debugger

Compile into
JavaScript

Firefox
Safari
ChromeDeploy toWeb ServerWeb ServerADASS ‘09

Roby - 27

Spitzer Heritage Archive

Name resolution on the browser
 Input field validation
 Coordinate conversion
 Tabular displays without page reload– Sort– Page– Update– Row clickingTrue FITS Visualization– Zooming– Changing color / Stretch– Magnifier / Thumbnail– Crop– Ra, Dec, Flux readout

ADASS ‘09

ExampleShow FITS data andmouse readout
Roby - 28

Example: Web Fits Viewer

See MouseReadout

Move Mouse OverImageADASS ‘09

Roby - 29Browser

ServerRequest Fits

•Displays Image•Stores Projection•Reads Fits File
•Return Projection and Image

Mouse Moved- Capture mouse x, y
- Converts to World Coordinates- Displays RA/DEC
Mouse Paused

Retrieve flux value from FITS
file using Image Pixel

Calls Server with Image Pixel

Displays Flux ValueADASS ‘09

Return only the specific FluxValue

Roby30-ADASS ‘09

Roby - 31