1
Google Web Toolkit
Introduction & Overview
Introduction & Overview
Fred Sauer
Developer Advocate
fredsa@google.com
SV Co...
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
...
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 ...
5
Mission statement
"GWT's mission is to radically improve
the web experience for users by
enabling developers to use exis...
6
Focus
Productivity for developers
Language, IDEs, tools, libraries
People, ecosystem
Performance for your users
'Perfect...
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-...
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 HTT...
24
Reducing round trip time
Use HTTP Expires and Cache-Control headers
Use GWT 'Perfect Caching'
Cache 'forever' - your en...
25
Know your HTTP Headers
<!-- See RFC 2616. Here's an example:
Expires: Thu, 02 Sep 2010 03:21:55 GMT
Cache-Control: publ...
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-in...
30
GUI Editing
31
Simple, Powerful RPCs
interface SpellService extends RemoteService {
/**
* Checks spelling and suggests
* alternatives....
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 br...
35
Development Mode (Hosted Mode)
JVM debugging
Server & Client code in the same IDE
Step in / over / out
Introspect & mod...
36
Java
Virtu
al
Mac
hine
Development Mode
Code
Server
Web
Server
Duke, the Java mascot
Copyright © Sun Microsystems Inc.,...
37
Google Plugin for Eclipse
38
Eclipse plugin highlights
Extensive JSNI support
RPC sync/async quick fixes
Launch configurations
GWT JUnit tests
Contr...
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 keep...
42
Another reason speed matters
2. UI
Changes
3. User
Learns
1. User
Action
Performance for your
43
GWT Helps Apps Startup More Quickly
26-Nov 29-Apr 18-Jun 28-Jul 12-Sep 27-Oct 24-Dec 16-Mar
SizeofInitialJavaScriptDown...
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 onFailu...
48
Story of Your Compile (SOYC)
-C
51
Compiler magic
52
GWT quote to remember
“The fastest code is that
which does not run.”
Joel Webber
GWT co-creator
53
Conventional and non-conventional
Java transformations
Dead-code elimination
Method inlining
Constant folding & propaga...
54
EXPERIMENTAL arguments you should
know
// Don't care what Class#getName() returns?
-XdisableClassMetadata 5% - 10%
scri...
55
EXPERIMENTAL arguments you should
know
// In a real-world (very large) Google app...
// 1% script size reduction
// 10%...
83
Thank you
Read more
http://code.google.com/webtoolkit/
Contact info
Fred Sauer
Developer Advocate
fredsa@google.com
Que...
Upcoming SlideShare
Loading in...5
×

GWT Introduction and Overview - SV Code Camp 09

4,489

Published on

Google Web Toolkit - Introduction and Overview
Silicon Valley Code Camp 2009

Published in: Sports, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,489
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
104
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • quick survey
    Raise your hand if you&amp;apos;ve never written a web app using GWT
    …your organization maintains multiple (&amp;gt;1) GWT apps
    …uses GWT for all new web apps
    We have a lot to cover, so let&amp;apos;s begin
  • Hope: you&amp;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&amp;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?
    &amp;lt;click through&amp;gt;
    If HTML + CSS + JavaScript + Images = 40 files, that&amp;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* =&amp;gt; cache forever; new versions receive new file names
    - *nocache* =&amp;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&amp;apos;re building real apps you need certain things to &amp;quot;just work&amp;quot;
    Constants, Messages, ConstantsWithLookup, Dictionary, Localizable, DateTimeFormat, NumberFormat
  • That&amp;apos;s the productivity, performance and speed pitch
    Now, let&amp;apos;s get to know our toolkit in more detail
  • A very useful tool:
    - understand why your JavaScript output isn&amp;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&amp;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()&amp;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&amp;apos;t it be great if we could have our cake and eat it too?
    WE CAN!
  • If you&amp;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&amp;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
  • &amp;lt;set-configuration-property name=&amp;quot;CssResource.obfuscationPrefix&amp;quot; value=&amp;quot;foo&amp;quot; /&amp;gt;
    &amp;lt;set-configuration-property name=&amp;quot;CssResource.obfuscationPrefix&amp;quot; value=&amp;quot;foo&amp;quot; /&amp;gt;
  • How many of you are interested in gadgets?
    &amp;lt;MAYBE SKIP SECTION?&amp;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!
  • GWT Introduction and Overview - SV Code Camp 09

    1. 1. 1 Google Web Toolkit Introduction & Overview Introduction & Overview Fred Sauer Developer Advocate fredsa@google.com SV Code Camp Oct 4, 2009
    2. 2. 2 Agenda Introduction Selecting a language Feature tour Developer productivity Need for speed Compiler magic Q&A
    3. 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. 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. 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. 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. 7. 7 No plugins required VML Flash Silverlight
    8. 8. 8 What we don't want
    9. 9. 9 GWT Browser-Proofs Your JavaScript Code... IE Firefox Safari Chrome Opera
    10. 10. 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. 11. 11 A More Powerful Web, Made Easier
    12. 12. 12 Eating our own dogfood 12
    13. 13. 13 Selecting a language
    14. 14. 14 Rich ecosystem of tools and libraries + + =
    15. 15. 15 Code completion and javadoc
    16. 16. 16 Can you find the bug? Hint: JavaScript is a dynamic language
    17. 17. 17 Java is a static language Catch errors at compile time
    18. 18. 18 Feature tour
    19. 19. 19 Pluggable Architecture
    20. 20. 20 More than just a compiler
    21. 21. 21 Sprites for free 20,558 bytes 6,824 bytes 11 separate images 1 bundled image
    22. 22. 22 Without ClientBundle
    23. 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. 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. 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. 26. 26 History just works
    27. 27. 27 Rich Text Area
    28. 28. 28 RTL, I18N, L10N, A11Y
    29. 29. 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. 30. 30 GUI Editing
    31. 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); }
    32. 32. 32 Shameless plugs (gwt-dnd, gwt-log, gwt- voices)
    33. 33. 33 Developer productivity
    34. 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. 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. 36. 36 Java Virtu al Mac hine Development Mode Code Server Web Server Duke, the Java mascot Copyright © Sun Microsystems Inc., all rights reserved.
    37. 37. 37 Google Plugin for Eclipse
    38. 38. 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. 39. 39 GWT Debugging in the browser
    40. 40. 40 Need for speed
    41. 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. 42 Another reason speed matters 2. UI Changes 3. User Learns 1. User Action Performance for your
    43. 43. 43 GWT Helps Apps Startup More Quickly 26-Nov 29-Apr 18-Jun 28-Jul 12-Sep 27-Oct 24-Dec 16-Mar SizeofInitialJavaScriptDownload(KB) 375 750 1125 1500 0 7x Decrease In Initial Download Size with runAsync() 1400 KB 200 KB
    44. 44. 44 Developer guided code splitting
    45. 45. 45 Developer guided code splitting
    46. 46. 46 Manual code splitting - Don't try this at home 46
    47. 47. 47 Developer guided code splitting GWT.runAsync(new RunAsyncCallback() { public void onSuccess() { … } public void onFailure(Throwable caught) { … } });
    48. 48. 48 Story of Your Compile (SOYC) -C
    49. 49. 51 Compiler magic
    50. 50. 52 GWT quote to remember “The fastest code is that which does not run.” Joel Webber GWT co-creator
    51. 51. 53 Conventional and non-conventional Java transformations Dead-code elimination Method inlining Constant folding & propagation JavaScript transformations (gzip motivated) Method reordering Argument renaming
    52. 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. 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"); }
    54. 54. 83 Thank you Read more http://code.google.com/webtoolkit/ Contact info Fred Sauer Developer Advocate fredsa@google.com Questions?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×