GWT@Jazoon08 - Part 1/6 - First Impressions Count

LOGO SPEAKER‘S COMPANY

# 1first impressions count.

checking in at a hotel ...

choosing a puppy ...

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

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

irrelevant.

source code elegance and maintainability

how much fun it is to develop

choice of programming language

GWT manifesto.

“To radically improvethe web experience for usersby enabling developersto use existing Java toolsto build no-compromise Ajaxfor any modern browser.”

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

startup issues.

lazy loading

rendering issues.

GWTto the rescue

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 codefrom 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.

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 refactorrefactoring difficulty = maintenance worrymaintenance worry = the need to “get it right” the first time (framework-itis)

stop! no more GWT introduction stuff

please...

so what makesGWT so fast?

LOGO SPEAKER‘S COMPANYis it magic?

deferred binding.

only payfor what you see

right code.user agentlocaledebug vs. productionnetwork characteristicsloggingdebug id on html elements…anything that can make a difference for the user

modularize.

DOMImplIE6

DOMImplMozilla

DOMImplSafari

DOMImpl…

problems.

dynamic modules over HTTP suckslow to start

awful network utilizationslow to execute

requires polymorphic dispatch at runtimeimpossible 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();

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

BETTER OPTIMIZATIONS

example

Label label = new Label(“test”);

output (not obfuscated)

Firefox e.textContent = s;

IE6 e.innerText = s;

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”; }

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”/>

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

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

</replace-with>

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

<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”/>

SET PROPERTY VALUE AT RUNTIME (optional)

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

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

]]></property-provider>

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”; }

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

</generate-with>

DECLARE REBIND RULES (other conditions)

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

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

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

<none>

GWT REFLECTION VS JAVA REFLECTION

TypeOracle oracle = generatorContext.getTypeOracle();

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)]

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 ]

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>

public void onModuleLoad() {

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

RootPanel.get().add(wishForm);

deferred binding.[ pages versus modules ]

SEARCH

SEARCHEDIT

ACCOUNT

extreme graphics.

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 callsreplay sequence like a macro

fastest method to draw static datacompiler can do performance optimizationscache results as bitmap where possible

solutions.dual compile

measure average client side thresholdif too slow render on server bare HTML (StringBuffer) / Java2D

SVG / VML / flash

solutions.small enhancements

replace DOM.setStyleAttribute with CSS filesdon’t use widgets when all you need is HTMLavoid many listenerssingle listener on root -> DOM.sinkEvents

MAARTENVOLDERS.comPASSIONATE ABOUT PEOPLE AND TECHNOLOGY

GWT@Jazoon08 - Part 1/6 - First Impressions Count

Technology

GWT Workshop

Gwt Presentation

GWT Indepth

Yokas - GWT

GWT Opportunity

GWT@Jazoon08 - Part 6/6 - The Perfect Experience

Formation GWT · 2013-03-09 · • GWT et les appels distants RPC • Design patterns GWT • Intégration applis coté serveur (Spring, Servlets...) • Intégration GWT/Javascript

Gwt II - trabajando con gwt

Prague GWT

Google Web Toolkit (GWT) - University of Arizonamercer/Presentations/335/gwt.pdf · Google Web Toolkit (GWT) Tuesday, November 30, 2010. What is GWT? GWT is a development toolkit

Gwt Prezentace

Pico - GWT

GWT@Jazoon08 - Part 4/6 - Attention to Detail

Architecting your GWT applications with GWT-Platform - Lesson 02

GWT@Jazoon08 - Part 2/6 - Attentive Service

GWT Panels

GWT integration with Vaadin - 2017.javacro.hr...GWT integration with Vaadin Peter Lehto @peter_lehto expert & trainer. Vaadin & GWT GWT Transport mechanisms. QA aadin Connectors Web

Atelier gwt

An introduction to GWT and Ext GWT

GWT: Why GWT, GQuery, and RequestFactory