Your SlideShare is downloading. ×
GWT Introduction and Overview - SV Code Camp 09
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

GWT Introduction and Overview - SV Code Camp 09

4,410
views

Published on

Google Web Toolkit - Introduction and Overview …

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,410
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
104
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

    • 1. 1 Google Web Toolkit Introduction & Overview Introduction & Overview Fred Sauer Developer Advocate fredsa@google.com SV Code Camp Oct 4, 2009
    • 2. 2 Agenda Introduction Selecting a language Feature tour Developer productivity Need for speed Compiler magic Q&A
    • 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
    • 7. 7 No plugins required VML Flash Silverlight
    • 8. 8 What we don't want
    • 9. 9 GWT Browser-Proofs Your JavaScript Code... IE Firefox Safari Chrome Opera
    • 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 A More Powerful Web, Made Easier
    • 12. 12 Eating our own dogfood 12
    • 13. 13 Selecting a language
    • 14. 14 Rich ecosystem of tools and libraries + + =
    • 15. 15 Code completion and javadoc
    • 16. 16 Can you find the bug? Hint: JavaScript is a dynamic language
    • 17. 17 Java is a static language Catch errors at compile time
    • 18. 18 Feature tour
    • 19. 19 Pluggable Architecture
    • 20. 20 More than just a compiler
    • 21. 21 Sprites for free 20,558 bytes 6,824 bytes 11 separate images 1 bundled image
    • 22. 22 Without ClientBundle
    • 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>
    • 26. 26 History just works
    • 27. 27 Rich Text Area
    • 28. 28 RTL, I18N, L10N, A11Y
    • 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 GUI Editing
    • 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 Shameless plugs (gwt-dnd, gwt-log, gwt- voices)
    • 33. 33 Developer productivity
    • 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
    • 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 Google Plugin for Eclipse
    • 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 GWT Debugging in the browser
    • 40. 40 Need for speed
    • 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
    • 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 Developer guided code splitting
    • 45. 45 Developer guided code splitting
    • 46. 46 Manual code splitting - Don't try this at home 46
    • 47. 47 Developer guided code splitting GWT.runAsync(new RunAsyncCallback() { public void onSuccess() { … } public void onFailure(Throwable caught) { … } });
    • 48. 48 Story of Your Compile (SOYC) -C
    • 49. 51 Compiler magic
    • 50. 52 GWT quote to remember “The fastest code is that which does not run.” Joel Webber GWT co-creator
    • 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. 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"); }
    • 54. 83 Thank you Read more http://code.google.com/webtoolkit/ Contact info Fred Sauer Developer Advocate fredsa@google.com Questions?