[Be el o ge]

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.