1

Google Web ToolkitIntroduction & Overview

Fred SauerDeveloper Advocatefredsa@google.com 

SV Code CampOct 4, 2009

2

Agenda

Introduction

Selecting a language

Feature tour

Developer productivity

Need for speed

Compiler magic

Q&A

3

Google Web Toolkit

Write

Core Java APIs

Widgets

Libraries

Java IDEs

Debug

JVM Debugging

Development Mode

A real browser

Developer Productivity

Optimize

GWT Compiler

Image Bundle (Sprites)

CSS Magic

End User Performance

Run

Desktop

Mobile

Online/Offline

Gadgets

4

May 2006 GWT 1.0 Launch at JavaOne

Aug 2008 GWT 1.5 Java 5 language support

Apr 2009 GWT 1.7 Dedicated IE8 support

Fall 2009 GWT 2.0 LOTS of interesting stuff

3+ years in review

5

Mission statement

"GWT's mission is 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."

6

Focus

Productivity for developers

Language, IDEs, tools, libraries

People, ecosystem

Performance for your users

'Perfect' caching

Whole program optimization

Better than practical hand written code

7

No plugins required

VML Flash

Silverlight

8

What we don't want

9

GWT Browser-Proofs Your JavaScript Code...

IE

Firefox

Safari

Chrome

Opera

10

Deferred Binding

14800 ms4836 ms1997 ms7148 msDOM manipulation

2469 ms1520 ms918 ms2477 msinnerText=...

-1386 ms908 ms-textContent=...

4078 ms2053 ms1276 ms2876 msTypical portable setInnerText()

IEOperaWebkit (Safari)

Firefox

Improvement 39%32%29%14%

11

A More Powerful Web, Made Easier

12

Eating our own dogfood

12

13

Selecting a language

14

Rich ecosystem of tools and libraries

+ + =

15

Code completion and javadoc

16

Can you find the bug?

Hint: JavaScript is a dynamic language

17

Java is a static language

Catch errors at compile time

18

Feature tour

19

Pluggable Architecture

20

More than just a compiler

21

Sprites for free

20,558 bytes

6,824 bytes

11 separate images

1 bundled image

22

Without ClientBundle

23

Roundtrips are deadly

1 round trip for TCP connection setup

(1 round trip for HTTP redirect?)

1 round trip for each HTTP request

$ ping ohare.comPING ohare.com (70.142.247.22): 56 data bytes64 bytes from 70.142.247.22: icmp_seq=0 ttl=113 time=54.689 ms64 bytes from 70.142.247.22: icmp_seq=1 ttl=113 time=55.500 ms64 bytes from 70.142.247.22: icmp_seq=2 ttl=113 time=54.728 ms

$ ping ohare.comPING ohare.com (70.142.247.22): 56 data bytes64 bytes from 70.142.247.22: icmp_seq=0 ttl=113 time=54.689 ms64 bytes from 70.142.247.22: icmp_seq=1 ttl=113 time=55.500 ms64 bytes from 70.142.247.22: icmp_seq=2 ttl=113 time=54.728 ms

24

Reducing round trip time

Use HTTP Expires and Cache-Control headers

Use GWT 'Perfect Caching'

Cache 'forever' - your entire app and all its resources

Bundle, bundle, bundle

Enable HTTP Pipelining

Use multiple hostnames

Defeat browser's two connection limit

Watch out for DNS lookup overhead though

25

Know your HTTP Headers

<!-- See RFC 2616. Here's an example: Expires: Thu, 02 Sep 2010 03:21:55 GMT Cache-Control: public, max-age=31536000--><Files *.cache.*> ExpiresDefault "now plus 1 year"</Files>

<Files *.nocache.*> ExpiresDefault "access"</Files>

26

History just works

27

Rich Text Area

28

RTL, I18N, L10N, A11Y

29

Widget Libraries

• GWT (http://code.google.com/webtoolkit/)  

• Incubator  (http://code.google.com/p/google-web-toolkit-incubator/)

• Smart GWT (http://code.google.com/p/smartgwt/)

• GWT-Ext (http://code.google.com/p/gwt-ext/)

• Vaadin (IT Mill Toolkit) (http://vaadin.com/)

• GWT mosaic (http://code.google.com/p/gwt-mosaic/)

• Ext GWT (http://extjs.com/products/gxt/)

• Advanced GWT Components    (http://advanced-gwt.sourceforge.net/) 

30

GUI Editing

31

Simple, Powerful RPCs

interface SpellService extends RemoteService { /**  * Checks spelling and suggests  * alternatives.  * @param the word to check  * @return the list of alternatives  */ String[] suggest(String word);}

32

Shameless plugs (gwt-dnd, gwt-log, gwt-voices)

33

Developer productivity

34

GWT 2.0 operating modes

Development Mode (Hosted Mode)

All about productivity

Java + JavaScript

Now in any supported browser

Production Mode (Web Mode)

All about performance

Compiled, Pure JavaScript

35

Development Mode (Hosted Mode)

JVM debugging

Server & Client code in the same IDE

Step in / over / out

Introspect & modify variables

Hot swap code (ignore the IDE warning!)

NOT TRUE

36

Java Virtual Machine

Development Mode

Code Server

Web Server

Duke, the Java mascotCopyright © Sun Microsystems Inc., all rights reserved.

37

Google Plugin for Eclipse

38

Eclipse plugin highlights

Extensive JSNI support

RPC sync/async quick fixes

Launch configurations

GWT JUnit tests

Contributor SDKs (gwt-user, gwt-dev-<platform>)

Development Mode (GWT 2.0)

Hosted Mode (GWT 1.7)

Constantly improving; check back often

39

GWT Debugging in the browser

40

Need for speed

41

Speed matters

perceived as instantaneous.

maintains the feeling that a single task is being carried out.

limit for keeping user’s attention.

0.1 seconds

1 second

10 seconds

42

Another reason speed matters

2. UIChanges

3. UserLearns

1. UserAction

Performance for your users

43

GWT Helps Apps Startup More Quickly

26-Nov 29-Apr 18-Jun 28-Jul 12-Sep 27-Oct 24-Dec 16-Mar

Siz

e of

Initi

al J

avaS

crip

t Dow

nloa

d (K

B)

375

750

1125

1500

0

7x Decrease InInitial Download Sizewith runAsync()

1400 KB

200 KB

44

Developer guided code splitting

45

Developer guided code splitting

46

Manual code splitting - Don't try this at home

46

47

Developer guided code splitting

GWT.runAsync(new RunAsyncCallback() {

  public void onSuccess() {    …  }

  public void onFailure(Throwable caught) {    …  }

});

48

Story of Your Compile (SOYC)

-C

51

Compiler magic

52

GWT quote to remember

“The fastest code is thatwhich does not run.”

Joel WebberGWT co-creator

53

Conventional and non-conventional

Java transformations

Dead-code elimination

Method inlining

Constant folding & propagation

JavaScript transformations (gzip motivated)

Method reordering

Argument renaming

54

EXPERIMENTAL arguments you should know// Don't care what Class#getName() returns?-XdisableClassMetadata

5% - 10% script reduction

Showcase metadata before

Showcase metadata after

55

EXPERIMENTAL arguments you should know// In a real-world (very large) Google app...// 1% script size reduction// 10% faster in performance-sensitive code-XdisableCastChecking

try { ((Quacker) animal).quack();} catch (ClassCastException c) { Window.alert("Found a non-quacker");}

83

Thank you

Read morehttp://code.google.com/webtoolkit/

Contact infoFred Sauer

Developer Advocate

fredsa@google.com

Questions?