new taming ajax with gwt - software summit · 2008. 1. 3. · scott blum — taming ajax with gwt...

Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Google, Inc.

Scott Blum — Taming AJAX with GWT

Taming AJAX with GWTScott Blum



OverviewWhy AJAX?Why GWT?How GWT WorksAdd GWT to your AppAdvanced TechniquesSummaryQ & A



Demo – A Production AppAJAX Texas Hold’em

http://www.gpokr.com/



AJAX: Easy on UsersNo installation

Every application is just a URL away

Secure… the mantra we teach our parentsinstalling things = mostly unsafesurfing the web = mostly safe

Web simplicityAJAX pages have the familiar web look and feelWeb simplicity – back, forward, links, URLs



AJAX: Easy on ServersState maintained on client

Only send the data, not the presentationSend only deltas instead of entire UI stateClean separation of concernsAllows servers to be effectively stateless

Leverage user’s CPU and RAMDo everything you can on the clientMuch faster for the user, too!



Traditional App Cycle



AJAX App Cycle



Summary and Q&AUse AJAXThe End



AJAX: Hard on DevelopersJavaScript is the “J” in AJAXNo strong type system

typos + expandos = bug-o-sImagine this gem on line 5912 of your script

x.compnent = document.getElementById("x");// a "spelling bug" that will bite much later

Poor IDE supportDebuggers… for some browsers…



AJAX: Hard on DevelopersIf you support IE6 and FF you’re doing well!But then there’s

IE7Older MozillaeSafariOperaKonquerorYou name it



AJAX: Hard on DevelopersNo installation… sort of

In a sense, it’s also always-reinstall (better be small)Modularizing JavaScript is really tricky

Secure… sort ofHard enough just to make AJAX work at all!Lots of JS = lots of attack surface

Has web simplicity… sort ofHistory, bookmarks and even hyperlinks misbehaveBadly coded AJAX is worse than traditional HTML



AJAX: Hard on DevelopersLots of JS libraries to choose from, but…

You often wind up paying for the whole library when you only need 5% of itInline comments and well-named identifiers add to code sizeThe compiler can’t tell you if your using the library wrongUpgrading to new versions?



Solution: Use GWTWrite your AJAX code in JavaCompile it with a real Java compilerDebug it in a real Java IDEUnit test it with JUnitJavadoc it without script size worriesReuse it on a class or package basisShare it as a JAR



Solution: Use GWTJava has a lot of advantages over JavaScript

Static type checkingGreat IDE support• Code completion• Quick correction• Lint, style, and other warnings• Refactoring

Established code patternsScales to large projects and large teams



Solution: Use GWT

(+50 more slides about howJava whoops JavaScript)



How GWT WorksBuild your app in JavaDOM-based Widget frameworkDebug in a real Java IDECompile to JavaScriptDeploy compiled output as static contentBuilt-in RPC based on Servlets



Code Sample – A Simple App<html><head><meta name='gwt:module'content='com.google.gwt.sample.hello.Hello'>

<title>Hello</title></head><body><script language="javascript" src="gwt.js"></script></body></html>



Code Sample – A Simple Apppublic class Hello implements EntryPoint {

public void onModuleLoad() {Button b = new Button("Click me",new ClickListener() {public void onClick(Widget sender) {Window.alert("Hello, AJAX");

}});RootPanel.get().add(b);

}

}



Demo – A Simple AppHello, AJAX



How GWT WorksGWT

ToolsClient Server

Java to JavaScriptCompiler

Hosted Mode

Widget Framework

JRE Emulation

Browser Abstraction

SerializationFramework

Deferred Binding

Java Servlet

Other Servers



How GWT Works

Client

Widget Framework

JRE Emulation

Browser Abstraction



Client Frameworkgwt-user.jarOpen Source: Apache 2.0Browser abstraction layerFull set of UI Widgets, styled with CSS

Real HTML elementsEvent drivenLike Swing or SWT

Panels for managing layout



Demo – Widgets and HistoryMail and KitchenSink



Client FrameworkGrowing subset of the JRE

Much of java.lang, java.utilNo reflection (by design!)What makes sense on a browser• No threads, file i/o, etc.

RPC, XML, JSON, i18n, other acronyms



How GWT Works

Server

Java Servlet

Serialization Framework

Other Servers



GWT’s Built-in RPCgwt-servlet.jarOpen Source: Apache 2.0Servlets on the server side Explicit server calls

This is a good thing ☺

Declare a remote interfaceSend POJOs, primitives, collections



Code Sample – RPC Interfaces// Synchronous interface (declared)public interface SpellingService extends RemoteService {String[] suggest(String wordToCheck);

}

// Asynchronous interface (derived)public interface SpellingServiceAsync {void suggest(String wordToCheck, AsyncCallback callback);

}



Code Sample – RPC CallSpellServiceAsync spell = GWT.create(SpellService.class);

spell.suggest("compnent", new AsyncCallback() {

void onSuccess(Object result) {String[] alts = (String[])result;if (alts.length > 0)showSuggestions(alts);

}

void onFailure(Throwable e) {reportProblem(e);

}

});



Code Sample – RPC Servlet// Servlet classpublic class SpellingServiceImpl

extends RemoteServiceServletimplements SpellingService {

public String[] suggest(String maybeMisspelledWord) {List list = new ArrayList();// populate list; run any server-side code you likereturn (String[]) list.toArray(new String[list.size()]);

}

}



Demo – RPCDynaTable



Network Usage

0

10000

20000

30000

40000

50000

60000

70000

80000

90000

Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Page 7

Byt

es T

rans

ferr

ed

Traditional HTML GWT First Run GWT Other Runs



GWT’s Built-in RPCAlways asynchronousGenerated classes perform serializationUnpublished super-efficient wire formatLibraries support custom RPC



How GWT Works

Tools

Java to JavaScriptCompiler

Hosted Mode

Deferred Binding



GWT Toolsgwt-dev-(windows|linux|mac).jarFree; Currently Closed-SourceCompilerHosted Mode supportCommon Infrastructure



GWT Tools – CompilerCompile Java into JavaScriptFull Java 1.4 language supportDeploy compiled scripts on any web serverOptimize like heck

Monolithic compileType TighteningAggressive Code Pruning



Hello AJAX – Javapublic class Hello implements EntryPoint {

public void onModuleLoad() {Button b = new Button("Click me",new ClickListener() {public void onClick(Widget sender) {Window.alert("Hello, AJAX");

}});RootPanel.get().add(b);

}

}



Hello AJAX – Generated Script// from class Hellofunction _$onModuleLoad(_this$static){var _b = _$Button(new _Button(), 'Click me',_$Hello$1(new _Hello$1(), _this$static));

_$add(_get(), _b);}

// from anonymous ClickListener classfunction _onClick(_sender){_alert('Hello, AJAX');

}



Hello AJAX – Obfuscatedfunction ne(oe){var pe=qe(new re(),'Click me',se(new te(),oe));ue(ve(),pe);}

function xe(ye){ze('Hello, AJAX');}



GWT Tools – Pay for Use

0

10000

20000

30000

40000

50000

60000

Empty

Wind

ow.al

ert("h

ello")

Vertica

lPanel

Button

Check

BoxTree

(3 ite

ms)

Labe

lTex

tBox

Grid (4

x 4)

HTML

Imag

e

TabPan

el (3

tabs)

ListB

ox (3

items)

Radio

Button

(3)

Hyperl

inkHori

zonta

lPanel

FlowPan

elAbs

oluteP

anel

Scrip

t Siz

e (b

ytes

)



GWT Tools – Hosted ModeRun under a real 1.4 or 5.0 JVMRun inside the browser with full DOM accessFull debugging and IDE supportPlatform support:

Windows with IELinux with MozillaMac OS X with Safari may already be available

Embedded Tomcat serves files from your classpath for easy setup



GWT Tools – Deferred BindingReplace classes at compile time

DOM dom = (DOM)GWT.create(DOM.class);

dom.doSomethingPlatformSpecific();

At runtime, dom actually refers to the most appropriate subclass

DOMInterface

InternetExplorerClass

MozillaClass

Application code

Deferred binding compiles in the correct subclass based on

selection rules.SafariClass



GWT Tools – Deferred Binding

Single JavaCode Base

Download exactly what you need in a single

can't-go-wrong chunk

Cache it on the client until the sun explodes

…

FireFox 1.0.x

Your Code

en_US

1D04ADDA.cache.html

Safari 2.0.x

Your Code

fr_FR…

7EFE4D24.cache.html

IE 6

Your Code

en_UK…

15F361BB.cache.html

Opera 9

Your Code

fr_CA…

D415D917.cache.html



GWT Tools – Deferred BindingWhy do at runtime what you can do at compile time?Because of type tightening, polymorphic calls can be inlinedGenerators provide an optimized alternative to runtime reflection

Our own RPC is built on it



Add GWT to Your AppAttach a <meta> tag to your HTMLInclude the gwt.js scriptAdd an id to elements you’re interested inDeploy compiler output as static contentWorks with any HTML-generation approach



Demo – Adding GWTA Simple JSP Example



Advanced TechniquesEffective RPCHanging RPCJavaScript native interface (JSNI)



Effective RPCCalls are Asynchronous only

Think event-driven

Limit the number of invocationsThink “chunky”, not “chatty”Ideally, no more than 1 call per user action

Limit to 2 outstanding calls at onceBrowser-imposed limit



Hanging RPCImagine a chat room appNaïve solution:

Clients poll on timerMost calls return emptySlow perceived responseWasted processing/bandwidth



Hanging RPCa.k.a. “server push” or “comet”

Not really possible with HTTP; this fakes it

Basic algorithmClient calls to check for eventsServer blocks until an event occursClient calls again to wait for next event

Pro: Less processing/bandwidth than pollingCon: Each client constantly uses a TCP connection and server thread; not as easy to throttle clients



More Info on RPCRon Bodkin’s AJAX Performance and Monitoring

More depth on these topicsJetty continuations and hanging RPC



JavaScript Native InterfaceHand-write JavaScript into your Java class

Like inline assembly in C

Foundation of GWT’s frameworkInteract with browser directlyCall an external script

Wrap existing JavaScript with type-safe Java signatures

Constructs JS supports better than JavaFunction pointer tableString-key map



Code sample – JSNI

native void alert(String msg) /*-{alert(msg);

}-*/;



JSNI FeaturesImplement a Java method in JavaScript Call Java methods from JavaScriptRead and write Java fields from JavaScriptMarshal values between Java/JavaScript

Super efficient in production

Throw exceptions across Java/JavaScript boundariesOur entire client framework is based on it

If you don’t like ours, you can write your own ☺



Code Sample – JSNInative JavaScriptObject lazyInitMap() /*-{var map = [email protected]::stringMap;if (map == null) {map = [email protected]::stringMap = {};

}return map;

}-*/;

native String getValue(String value) /*-{var map = [email protected]::lazyInitMap()();var result = map[key];return (result == null) ? null : result;

}-*/;

native void putValue(String key, String value) /*-{var map = [email protected]::lazyInitMap()();map[key] = value;

}-*/;



Growing GWT CommunityCommunity and Support

5000+ members on the developer forumBooks, articles, blogsMeta-sites (e.g. http://gwtpowered.org)645,000 results for “google web toolkit”

Libraries and Applications25 projects on Google Code Project HostingGWT Widgets on SourceForgeJetBrains' JET markup framework for GWT

ToolsJetBrains IntelliJ IDEA support for GWT built into Version 6.0Googlipse, an open source Eclipse plug-in for GWTVistaFei for GWT – Visual DesignerInstantiations GWT Designer – Visual Designer; round-trip to Source!



Instantiations GWT Designer



Production Appshttp://www.dimdim.comWeb-based conferencing

http://www.indigopuzzles.comHigh-quality online puzzles

http://www.notetwonote.comStudent self-testing



ConclusionAJAX is hard: you tame it… or vice-versa

You need leverage to take full advantage of AJAXPhD in browser quirks is no longer a prereqWe will share our best work and ideas with you, and we hope you will return the favorMuch more to come… see you online!

http://code.google.com/webtoolkit/



Q & AAsk me anything! ☺[email protected]

new taming ajax with gwt - software summit · 2008. 1. 3. · scott blum — taming ajax with gwt...

Documents