Category Archives: GWT

GWT Patterns / Best Practices

I just finished reading two articles about Patterns and Anti-Patterns in the Google Web Toolkit. They’re not exactly about rocket science but nice summaries. Also some patterns are not specifically GWT patterns rather RIA patterns in general, but I don’t want to split hairs here…

Patterns + GWT + Ajax = Usability

Key points

  • Client-Side validation. In the article called “prevalidation”, meaning making an async call to the server via Ajax in order to validate input data
  • Code Sharing. Since you write your client side code in Java you can share code with the server side to a certain degree. Validation code and data objects are good candidates for code sharing.
  • Caching. GWT provides several possibilities to cache data on the client side and thus reduce calls to the server. The user has to wait less and your server has less work.
  • Prefetching. You can try to guess what data the user wants to see next. This can be very beneficial, but you be careful: sometimes the user thinks quite different than the developer
  • Thread Simulation. Javascript runs in one thread. No chance to spawn a second one. Use the GWT Timer class to simulate threads or GWT’s deferred commands.

5 GWT Anti-patterns

Key points:

  • To many Ajax calls. Solution: Use DTO‘s to transfer bigger junks of data in less requests.
  • Inline Javascript. Meant are not native Javascript methods, but manually added Javascript code as a String to onclick, onmouseover, etc. attributes. The compiler can’t optimize it, debugging is hard or rather almost impossible. Solution: Use GWT’s event handlers.
  • Listeners instead of CSS Pseudo Classes. Solution: Sometimes it’s more effective and efficient to use CSS Pseudo class instead of GWT Listeners. CSS is easier to change, to deploy and faster because it’s handled by the browser, not the browsers Javascript engine. But be aware of browser differences, specially if you have to support IE6.
  • Window.alert: Window.alert and async calls don’t go well together. Just don’t use it. Plan some area in your application which displays the error and warnings.

The article mentions a fifth anti-pattern: FlexTable. FlexTable is a powerful GWT class to display data which is supposed to be displayed in … well… rows and columns. Additionally to this obvious usage it’s used to layout applications and that is what the above article criticizes. If you look to the comments on that article you’ll find the typical flame-war CSS-based layout vs. table-based. In my opinion it just depends very much on the use case, therefore I wouldn’t go so far to call it an anti-pattern.

DeliciousTwitterFacebookLinkedInRedditSlashdotTechnorati FavoritesDiggShare
Posted in GWT, Patterns | 2 Comments

Crux: component framework for GWT

Crux allows you to create web user interfaces in a declarative and modularized way, which drastically improves development speed and code maintainability. In other words, it brings you the best of both worlds: the comfort of creating pages with HTML and the elegance of controlling those pages using Java code.

So … could we say that GWT + Crux is JSF done right?

You might want to check out UiBinder as well, which is part of the GWT Incubator. I wouldn’t wonder if UiBinder or a similar technology finds its way into GWT 2.0 or later.

DeliciousTwitterFacebookLinkedInRedditSlashdotTechnorati FavoritesDiggShare
Posted in GWT | Leave a comment

Drag and Drop between Web Browser and Desktop

For some time already Drag & Drop within the browser is a pretty common feature for web applications. The next step would be Drag & Drop interaction between your desktop and the web application … without using a plugin (Adobe Air, …).

Swell, a Javascript library, seems to be promising: Wouldn’t it be Swell to be able to drag and drop between Web and desktop
Also there is a demo on their web page: Drag and drop files from your desktop to your browser. They say “two browsers are playing well with the demo (Safari 4, Chrome 2+) while others degrades gracefully.

Now, even cooler would be such support in the Google Web Toolkit, but it seems a common approach there is to utilize Google Gears, which again forces the user to install a plugin (except in Chrome, where Gears is an integrated component). Read more about it here and here.

DeliciousTwitterFacebookLinkedInRedditSlashdotTechnorati FavoritesDiggShare
Posted in GWT, JavaScript, Web | Leave a comment

GWT Best Practices

Google Web Toolkit Architecture: Best Practices for Architecting your GWT App

Langsam aber sicher kämpfe ich mich durch die GWT Session Videos von der Google I/O.

Das Best Practice Video ist mit Sicherheit eines, das man sich auch mehrmals anschauen kann, bzw. sogar muss.
Grundlage für die Best Practices sind die Erfahrungen, die das Team um Ray Ryan während der Neuentwicklung von Googles Adwords UI gesammelt hat.

Kernpunkte sind:

  1. Man sollte sich frühzeitig darum kümmern die Browser History korrekt zu implementieren.
  2. Verwendung eines zentralen Event Busses
  3. Dependency Injection (DI) mit Google Juice oder Gin + Model View Presenter (nicht Model View Controller)

Des Weiteren:

  • Nur soviel Daten laden wie gerade benötigt werden. Der Rest kann jederzeit asynchron nachgeladen werden.
  • Für GWT UI Code ist es besser konkrete Implementierungen anstatt von Interfaces zu verwenden: z.B. ArrayList anstatt List. Das steigert die Performance.
  • Command Pattern (Cache, Failure Handling, Undo / Redo)1

Wer das ganze mit etwas Zusammenhang haben möchte sollte sich das Video anschauen oder die Präsentationsfolien herunterladen.

DeliciousTwitterFacebookLinkedInRedditSlashdotTechnorati FavoritesDiggShare
Posted in GWT | 1 Comment

GWT 2.0 Features

Kurze Zusammenfassung dieses Talks: GWT Can Do What?!?! A Preview of Google Web Toolkit 2.0

OOPHM (Out Of Process Hosted Mode)

  • Supports multiple Browsers. Currently just one browser per operating is supported: Windows: IE, OS X: Safari, Linux: ancient Mozilla version
  • Communicates over network with your hosted mode instance: Great if you’re working on Mac OS X but want to test in IE
  • Included in GWT 2.0 available as Plugin for 1.6 Available in SVN trunk

Compiling Performance

  • Prefer hosted mode over compiling code, because compiling is slow
  • In 1.6: compiler option -localworkers X, compiles X permutations at a time
  • In 2.0: -draftcompile: exclude certain optimizations, just get a compiled version. Great for development, not designed for deployment
  • Restrict number of permutations: e.g. just compile for Firefox or Firefox and IE

Size of Scripts

  • Break script blocks in multiple script blocks
  • Asynchronously fetch code when needed: GWT.runAsynch()
  • runAsynch creates split point in the dependency graph

Client Bundle

  • GWT 1.4 introduced ImageBundle
  • GWT 2.0 will extend this for many more data types: TextResouce (e.g. XML or JSON > great for configuration), ExternalTextResource, DataResource (PDFs, MP3s, …), CSSResource
  • CSSResource includes a ton of cool features like: CSS Parsre, CSS Constants (@def), conditionals (@if, @elif).
  • CssResource already available via Incubator!

Layouts

  • “Have cold sweats when considering measuring everyting” > resizing by Javascript kills the performance of your app.
  • Dealing with CSS attributes like height:100% is an endless pain
  • Therefore GWT 2.0 will come up with updated Layout components like an updated Version of the Dockpanel (check out the Video to see it in action)
  • These updated Layout components don’t run any Javascript code, instead they use CSS constraints

After the talk somebody asked when the GA release of GWT 2.0 will be. Bruce Johnson said something like “Q3 we will start thinking about when we could place the GA”. Also he promised it will be definitely less then a year. So realistically it’s probably Q4 2009 or Q1 2010.

DeliciousTwitterFacebookLinkedInRedditSlashdotTechnorati FavoritesDiggShare
Posted in GWT | Leave a comment