1
Google Web ToolkitIntroduction & Overview
Fred SauerDeveloper [email protected]
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
Questions?
Top Related