This document summarizes a presentation about Google Web Toolkit (GWT). It discusses how GWT allows developers to write code in Java and compile it to optimized JavaScript. GWT handles cross-browser compatibility issues and improves developer productivity through features like Java debugging and code splitting. It also improves end user performance through techniques like deferred binding, image sprites, and compiler optimizations that minimize code size and roundtrip times.
3. 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. 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. 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. 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
23. 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. 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. 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>
31. 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);
}
34. 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. 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
41. 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. 42
Another reason speed matters
2. UI
Changes
3. User
Learns
1. User
Action
Performance for your
52. 54
EXPERIMENTAL arguments you should
know
// Don't care what Class#getName() returns?
-XdisableClassMetadata 5% - 10%
script reduction
Showcase metadata before
Showcase metadata after
53. 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");
}
quick survey
Raise your hand if you&apos;ve never written a web app using GWT
…your organization maintains multiple (&gt;1) GWT apps
…uses GWT for all new web apps
We have a lot to cover, so let&apos;s begin
Hope: you&apos;ve read GWT mission statement
Hope: agree that we must FOCUS ON THE USER experience
Part of that mission means making you, the developer, more productive
In other words, GWT is all about…
PRODUCTIVITY FOR DEVELOPERS LIKE YOU
AND PERFORMANCE FOR YOUR USERS
Google Web Toolkit 101
OUR generators, more importantly YOUR generators
I&apos;d like to take a moment to talk about a widely misunderstood problem.
The problem is of course: WHY IS OUR WEB SITE SO SLOOOOOOOOOW?
&lt;click through&gt;
If HTML + CSS + JavaScript + Images = 40 files, that&apos;s 50ms*40=2s
Last night I pinged a few servers in Sydney; 380ms * 40 = 15s!!!
GWT produces two classes of files: cache/nocache
- *cache* =&gt; cache forever; new versions receive new file names
- *nocache* =&gt; must-revalidate
Raise your hand if your web server set Expires/Cache-Control headers
So how do we create those perfectly cacheable *cache* files?
When you&apos;re building real apps you need certain things to &quot;just work&quot;
Constants, Messages, ConstantsWithLookup, Dictionary, Localizable, DateTimeFormat, NumberFormat
That&apos;s the productivity, performance and speed pitch
Now, let&apos;s get to know our toolkit in more detail
A very useful tool:
- understand why your JavaScript output isn&apos;t quite as small (yet) as it could be
- why initial download is large
We already covered -style PRETTY and -draftCompile for DEVELOPMENT.
Hopefully in DEVELOPMENT you also are building just ONE PERMUTATION (i.e. one browser, one language, one logging level)
- If not (or for PRODUCTION) use -localWorkers=#cores
Now for something different.
Here&apos;s a simple JavsScript object in JSON format
- {} identify JavaScript objects, [] identify arrays, : for name/value pairs
JSON is great
- transfer data between client and server OR between servers
- Subset of ECMA script so it can be parsed or eval()&apos;d by the browser
In JavaScript you have a couple of options
1. Write the whole thing out every time; brittle w.r.t. changes
2. Introduce function overhead
Wouldn&apos;t it be great if we could have our cake and eat it too?
WE CAN!
If you&apos;re using com.google.gwt.json.JSON library, STOP
Use JSO Types instead
-You keep the abstractions that make you productive
-Your user sees none of that code; only the benefits
GREAT for federating/integrating with other systems via web hooks or RESTful interfaces
ImageBundles are really easy to create
- Declare an interface with a method for each image
- That&apos;s it!
We can of course bundle other resources as well
Remember: bundle, bundle, bundle
RFC 2397 data: URLs
This cursor data: URL can be injected into your injected stylesheet at compile time
- You get the convenience of a separate *.cur file
- The user either gets a forever cacheable strongly named URL or an inline data: resource
- YOU BOTH WIN
Locale sensitive names so different languages can have different images
Your getWidth()/getHeight() methods automatically adjust
How many of you are interested in gadgets?
&lt;MAYBE SKIP SECTION?&gt;
GWT makes it really easy to create them without having to resort to hand written JavaScript
- Logging code is partially/completely compiled out in production
- Mobile clients log to server
- UncaughtExceptionHandler included
Add or improve stack traces where browsers are lacking
compiler.emulatedStack does add overhead (not for PRODUCTION)
- You can just turn on recordLineNumbers (less overhead)
- You can already get original method names from the symbol maps
This stack trace came from 100% compiled JavaScript
- UNKNOWN indicates this is browser land, not your JVM
- short, two-letter method names shows OBFUSCATED output
- Original Java class/method names injected into source
- Copy/paste into your IDE stacktrace console and they are hyperlinked!