# 1 first impressions count.

# 1

first impressions count.

checking in at a hotel ...

choosing a puppy ...

unboxing your iPhone ...

unboxing your iPhone ...

unboxing your iPhone ...

start fast. “ Every web usability study I have conducted since 1994 has shown the same thing: Users beg us to speed up page downloads.” - Jakob Nielsen

start fast.

“ Every web usability study I have

conducted since 1994 has shown

the same thing: Users beg us to

speed up page downloads.”

- Jakob Nielsen

human attention. 0.1 seconds - perceived as instantaneous 1 second - maintains the feeling that a single task is being carried out 10 seconds - limit for keeping user’s attention

human attention.

0.1 seconds - perceived as instantaneous

1 second - maintains the feeling that a single task is being carried out

10 seconds - limit for keeping user’s attention

annoying. slow apps are annoying buggy apps are annoying slow, buggy apps are not worth using

annoying.

slow apps are annoying

buggy apps are annoying

slow, buggy apps are not worth using

irrelevant. source code elegance and maintainability how much fun it is to develop choice of programming language

irrelevant.

source code elegance and maintainability

how much fun it is to develop

choice of programming language

GWT manifesto. “ To radically improve the web experience for users by enabling developers to use existing Java tools to build no-compromise Ajax for any modern browser .”

GWT manifesto.

“ To radically improve

the web experience for users

by enabling developers

to use existing Java tools

to build no-compromise Ajax

for any modern browser .”

page load. 1. download resources 2. run JavaScript startup code 3. render layout

page load.

1. download resources

2. run JavaScript startup code

3. render layout

resource issues. 50kb = 1200ms 25kb = 950ms 2 x 25kb = 2 x 950 ms 50kb = 1900ms ms kb

resource issues.

50kb = 1200ms

25kb = 950ms

2 x 25kb = 2 x 950 ms

50kb = 1900ms

startup issues. lazy loading lazy loading lazy loading lazy loading lazy loading

startup issues.

lazy loading

lazy loading

lazy loading

lazy loading

lazy loading

rendering issues.

rendering issues.

GWT to the rescue

GWT

to the rescue

goal. reduce # HTTP request by reducing file count cache until the sun explodes cross browser, cross platform at no cost min usability compromises due to impl changes extreme JavaScript code optimizations

goal.

reduce # HTTP request by reducing file count

cache until the sun explodes

cross browser, cross platform at no cost

min usability compromises due to impl changes

extreme JavaScript code optimizations

compiler. “ Seperate maintainability of the source code from the effectiveness of the executable.” - Bruce Johnson

compiler.

“ Seperate maintainability of the source code

from the effectiveness of the executable.”

- Bruce Johnson

compiler. handwritten JavaScript has a conflict of interest long, useful identifiers = bigger, slower apps nice formatting = bigger, slower apps comments = bigger, slower apps zero-cost abstraction

compiler.

handwritten JavaScript has a conflict of interest

long, useful identifiers = bigger, slower apps

nice formatting = bigger, slower apps

comments = bigger, slower apps

zero-cost abstraction

compiler. user feedback and usability testing are vital you will never get it right the first N times being able to iterate quickly is key developers need tools with lots of leverage

compiler.

user feedback and usability testing are vital

you will never get it right the first N times

being able to iterate quickly is key

developers need tools with lots of leverage

compiler. again, JavaScript has a conflict of interest JavaScript = difficult to refactor refactoring difficulty = maintenance worry maintenance worry = the need to “get it right” the first time (framework-itis)

compiler.

again, JavaScript has a conflict of interest

JavaScript = difficult to refactor

refactoring difficulty = maintenance worry

maintenance worry = the need to “get it right” the first time (framework-itis)

stop! no more GWT introduction stuff please...

stop!

no more GWT introduction stuff

please...

so what makes GWT so fast?

so what makes

GWT so fast?

is it magic?

deferred binding.

deferred binding.

only pay for what you see

only pay

for what you see

right code. user agent locale debug vs. production network characteristics logging debug id on html elements … anything that can make a difference for the user

right code.

user agent

locale

debug vs. production

network characteristics

logging

debug id on html elements

…

anything that can make a difference for the user

modularize. DOMImplIE6 DOMImplMozilla DOMImplSafari DOMImpl … DOM

modularize.

problems. dynamic modules over HTTP suck slow to start awful network utilization slow to execute requires polymorphic dispatch at runtime impossible to eliminate dead code hard to maintain “ DLL Hell” for the web

problems.

dynamic modules over HTTP suck

slow to start

awful network utilization

slow to execute

requires polymorphic dispatch at runtime

impossible to eliminate dead code

hard to maintain

“ DLL Hell” for the web

magic. DOMImpl dom = GWT.create (DOMImpl.class); generates permutations at compile time: DOMImpl dom = new DOMImplMozilla(); DOMImpl dom = new DOMImplIE6(); DOMImpl dom = new DOMImplSafari();

magic.

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

generates permutations at compile time:

DOMImpl dom = new DOMImplMozilla();

DOMImpl dom = new DOMImplIE6();

DOMImpl dom = new DOMImplSafari();

DOMIMPL EXAMPLE abstract class DOMImpl { abstract void setInnerText(Element e, String s); } public class DOMImplMozilla extends DOMImpl { native void setInnerText(Element e, String s) /*-- { e.textContent = s; } --*/ } public class DOMImplIE6 extends DOMImpl { native void setInnerText(Element e, String s) /*-- { e.innerText = s; } --*/ }

DOMIMPL EXAMPLE

abstract class DOMImpl {

abstract void setInnerText(Element e, String s);

}

public class DOMImplMozilla extends DOMImpl {

native void setInnerText(Element e, String s)

/*-- { e.textContent = s; } --*/

}

public class DOMImplIE6 extends DOMImpl {

native void setInnerText(Element e, String s)

/*-- { e.innerText = s; } --*/

}

advantages. right code smaller code better optimizations fewer network roundtrips metaprogramming

advantages.

right code

smaller code

better optimizations

fewer network roundtrips

metaprogramming

BETTER OPTIMIZATIONS example Label label = new Label(“test”); output (not obfuscated) Firefox e.textContent = s; IE6 e.innerText = s;

BETTER OPTIMIZATIONS

example

Label label = new Label(“test”);

output (not obfuscated)

Firefox e.textContent = s;

IE6 e.innerText = s;

deferred binding. [ dependency injection ]

deferred binding.

[ dependency injection ]

CREATE AN INTERFACE / BASE CLASS public interface Animal { String makeSound(); } CREATE IMPLEMENTATIONS public class Dog implements Animal { public String makeSound() { return “bark”; } } public class Cat implements Animal { public String makeSound() { return “miauuwww”; } }

CREATE AN INTERFACE / BASE CLASS

public interface Animal {

String makeSound();

}

CREATE IMPLEMENTATIONS

public class Dog implements Animal {

public String makeSound() { return “bark”; }

}

public class Cat implements Animal {

public String makeSound() { return “miauuwww”; }

}

USE IT Animal animal = GWT.create(Animal.class); Window.alert(animal.makeSound()); DECLARE REBIND RULES <replace-with class=“org.animal.Cat”> <when-type-is class=“org.animals.Animal”/> </replace-with>

USE IT

Animal animal = GWT.create(Animal.class);

Window.alert(animal.makeSound());

DECLARE REBIND RULES

<replace-with class=“org.animal.Cat”>

<when-type-is class=“org.animals.Animal”/>

</replace-with>

DECLARE PROPERTY / ENUMERATED SET OF VALUES <define-property name=“animal” values=“cat,dog”/> DECLARE REBIND RULES <replace-with class=“org.animal.Cat”> <when-type-is class=“org.animals.Animal”/> <when-property-is name=“animal” value=“cat”/> </replace-with> <replace-with class=“org.animal.Dog”> <when-type-is class=“org.animals.Animal”/> <when-property-is name=“animal” value=“dog”/> </replace-with>

DECLARE PROPERTY / ENUMERATED SET OF VALUES

<define-property name=“animal” values=“cat,dog”/>

DECLARE REBIND RULES

<replace-with class=“org.animal.Cat”>

<when-type-is class=“org.animals.Animal”/>

<when-property-is name=“animal” value=“cat”/>

</replace-with>

<replace-with class=“org.animal.Dog”>

<when-type-is class=“org.animals.Animal”/>

<when-property-is name=“animal” value=“dog”/>

</replace-with>

DECLARE REBIND RULES (other conditions) <when-type-is class=“...”/><when-type-assignable class=“...”/> <when-property-is name=“...” value=“...”/><any><all><none> EXTEND PROPERTY VALUES (optional / inheritance) <extend-property name=“animal” values=“fish”/> SET DEFAULT PROPERTY VALUE (optional) <set-property name=“animal” values=“dog”/>

DECLARE REBIND RULES (other conditions)

<when-type-is class=“...”/><when-type-assignable class=“...”/>

<when-property-is name=“...” value=“...”/><any><all><none>

EXTEND PROPERTY VALUES (optional / inheritance)

<extend-property name=“animal” values=“fish”/>

SET DEFAULT PROPERTY VALUE (optional)

<set-property name=“animal” values=“dog”/>

SET PROPERTY VALUE AT RUNTIME (optional) <property-provider name=“animal”><!CDATA[ return isCat(document.cookie) ? “cat” : “dog”/> ]]></property-provider>

SET PROPERTY VALUE AT RUNTIME (optional)

<property-provider name=“animal”><!CDATA[

return isCat(document.cookie) ? “cat” : “dog”/>

]]></property-provider>

deferred binding. [ generators ]

deferred binding.

[ generators ]

CREATE A NEW GENERATOR public class CatGenerator extends Generator { public String generate (TreeLogger logger, GeneratorContext ctx, String requestedClass) { PrintWriter pw = ctx.tryCreate(logger, “test”, “ EvilCat ”); pw.println(“package test;”); pw.println(“public class EvilCat implements Animal {“); pw.println(“public String makeSound() { return “Gshhh”; }”); pw.println(“}”); return “test.EvilCat”; }

CREATE A NEW GENERATOR

public class CatGenerator extends Generator {

public String generate (TreeLogger logger, GeneratorContext ctx, String requestedClass) {

PrintWriter pw = ctx.tryCreate(logger, “test”, “ EvilCat ”);

pw.println(“package test;”);

pw.println(“public class EvilCat implements Animal {“);

pw.println(“public String makeSound() { return “Gshhh”; }”);

pw.println(“}”);

return “test.EvilCat”;

}

DECLARE REBIND RULES <generate-with class=“org.animals.CatGenerator”> <when-type-is class=“org.animals.Animal”/> </generate-with> DECLARE REBIND RULES (other conditions) <when-type-is class=“...”/> <when-type-assignable class=“...”/> <when-property-is name=“...” value=“...”/> <any> <all> <none>

DECLARE REBIND RULES

<generate-with class=“org.animals.CatGenerator”>

<when-type-is class=“org.animals.Animal”/>

</generate-with>

DECLARE REBIND RULES (other conditions)

<when-type-is class=“...”/>

<when-type-assignable class=“...”/>

<when-property-is name=“...” value=“...”/>

<any>

<all>

<none>

GWT REFLECTION VS JAVA REFLECTION TypeOracle oracle = generatorContext.getTypeOracle();

GWT REFLECTION VS JAVA REFLECTION

TypeOracle oracle = generatorContext.getTypeOracle();

deferred binding. [ demystified ]

deferred binding.

[ demystified ]

runtime. request generated selection script .nocache.js property providers run to decide prop values property values imply a permutation: map([‘de, ‘ie6’, …], ‘blabla.cache.html’) map([‘nl’, ‘ie6’, …], ‘ababab.cache.html’) map([‘nl’, ‘safari’, …], ‘xyxyxy.cache.html’) strongName = answers[computePropValue(‘locale’)] [computePropValue(‘’user.agent)]

runtime.

request generated selection script .nocache.js

property providers run to decide prop values

property values imply a permutation:

map([‘de, ‘ie6’, …], ‘blabla.cache.html’)

map([‘nl’, ‘ie6’, …], ‘ababab.cache.html’)

map([‘nl’, ‘safari’, …], ‘xyxyxy.cache.html’)

strongName = answers[computePropValue(‘locale’)]

[computePropValue(‘’user.agent)]

permutations. .cache.html allows for perfect caching cache until the sun explodes never fail to get the newest when updated never ask if it hasn’t been updated not even an If-Modified-Since check disk space is cheap bandwith and user attention is expensive

permutations.

.cache.html allows for perfect caching

cache until the sun explodes

never fail to get the newest when updated

never ask if it hasn’t been updated

not even an If-Modified-Since check

disk space is cheap

bandwith and user attention is expensive

deferred binding. [ use case: form generation ]

deferred binding.

[ use case: form generation ]

GOAL less boilerplate code no more listener overhead / memory leaks alternative for traditional MVC + GWTX (PropertyChangeListener) DATA OBJECT + FORM ANNOTATIONS @form.service (value=“com.WishService”) public class Wish implements FormDataObject { @form.field (length = 50, label = “name”, order = 2, required = true) private String name; @form.field (length = 200, label = “description”, order = 1, required = true) private String description; }

GOAL

less boilerplate code

no more listener overhead / memory leaks

alternative for traditional MVC + GWTX (PropertyChangeListener)

DATA OBJECT + FORM ANNOTATIONS

@form.service (value=“com.WishService”)

public class Wish implements FormDataObject {

@form.field (length = 50, label = “name”, order = 2, required = true)

private String name;

@form.field (length = 200, label = “description”, order = 1, required = true)

private String description;

}

BINDING <generate-with class=“ com.FormGenerator ”> <when-type-assignable class=“ com.FormDataObject ”/> </generate-with> USAGE public void onModuleLoad() { Form wishForm = GWT.create(Wish.class); RootPanel.get().add(wishForm); }

BINDING

<generate-with class=“ com.FormGenerator ”>

<when-type-assignable class=“ com.FormDataObject ”/>

</generate-with>

USAGE

public void onModuleLoad() {

Form wishForm = GWT.create(Wish.class);

RootPanel.get().add(wishForm);

}

deferred binding. [ pages versus modules ]

deferred binding.

[ pages versus modules ]

SEARCH 100% SEARCH EDIT 95% ACCOUNT 5%

extreme graphics.

extreme graphics.

problems. DOM operations are slow CANVAS bails out at 1000 - 10000 DIV moves JavaScript VM no match for JVM

problems.

DOM operations are slow

CANVAS bails out at 1000 - 10000 DIV moves

JavaScript VM no match for JVM

solutions. display lists (OpenGL concept) recorded + compiled sequence of calls replay sequence like a macro fastest method to draw static data compiler can do performance optimizations cache results as bitmap where possible

solutions.

display lists (OpenGL concept)

recorded + compiled sequence of calls

replay sequence like a macro

fastest method to draw static data

compiler can do performance optimizations

cache results as bitmap where possible

solutions. dual compile measure average client side threshold if too slow render on server  bare HTML (StringBuffer) / Java2D SVG / VML / flash

solutions.

dual compile

measure average client side threshold

if too slow render on server

 bare HTML (StringBuffer) / Java2D

SVG / VML / flash

solutions. small enhancements replace DOM.setStyleAttribute with CSS files don’t use widgets when all you need is HTML avoid many listeners single listener on root -> DOM.sinkEvents

solutions.

small enhancements

replace DOM.setStyleAttribute with CSS files

don’t use widgets when all you need is HTML

avoid many listeners

single listener on root -> DOM.sinkEvents

MAARTENVOLDERS. com PASSIONATE ABOUT PEOPLE AND TECHNOLOGY

MAARTENVOLDERS. com

PASSIONATE ABOUT PEOPLE AND TECHNOLOGY