Archive for the ‘gwt’ Category

GWT: follow-up

Tuesday, February 26th, 2008

This is a follow-up post on Why I dumped GWT.

First of all, I had a really long week + weekend and I was tired when I wrote the post. I apologize for the rather in-your-face title. I should have chosen a more subtitle wording, especially since I really appreciate all the work that developers donate in their free time to open source projects.

I did’t expect my blog post would end up as the main article on ongwt.com. I use my blog mainly to communicate with colleagues about my work. It probably has something to do with my recent switch to feedburner. Hooray for feedburner!

Like I wrote, I like GWT and its approach. It’s really nice to see how intelligent the development team approached and solved the problem at hand. The image handling (sprites), js compression and http round-trip optimisations are really clever.

I’ll start by describing how my site came to what it is now. The site started as a playground for me. I wanted to try the latest new thing (ajax!) and so I first started with scriptaculous. I didn’t succeed in getting the layout right with pure css (after all, I’m only a Java developer) and I stumbled upon GWT. The mail app demo is really nice and this gave me the idea to start a site that searches on-line marketplaces and lets users treat the classifieds as e-mail: with the possibility to delete, mark items as read/unread and star them. Much like Google Reader.

For this, GWT was the perfect match. Everything went as I expected it to do, sometimes with some cursing about why my onclick events were not fired and why a non-existing background image in css stopped the hosted mode to work, but all-in-all it was very good.

After some (positive) discussion with my other half, I wanted the work I put in it to give me some return-on-investment (money!). It turned out after some basic user testing (she sitting at the keyboard and I shouting “why would you do that?” and “that’s not meant to be used like that”) that the whole idea was too complex for a standard user (no offense to my super-intelligent girlfriend) who stumbles upon my site. So week after week I removed some of the functionality to make the page less overwhelming. Until I finally found myself using GWT only for the autocompleter, which clearly wasn’t the intention of the GWT framework. This, together with the remarks I gave in the previous post (adsense, analytics and seo) made me decide to temporarily stop developing with GWT.

I expect to start again with GWT once the site “gains some momentum”, and then I will re-enable those more complex features which should be easier than with mootools. I’ll probably ask some advice from a usability expert about how to design the page with all this functionality without overwhelming first-time users. And I will check out MyGWT and GWT-Ext more thoroughly.

Why I dumped GWT

Sunday, February 24th, 2008

I’ve used GWT for over half a year now on koopjeszoeker.be. Two weeks ago I decided to stop development with GWT and go with plain HTML and mootools for the autocompleter. I’ve used mootools already a lot and I’m really getting the hang of it.

Why? Why did I spend all this time developing in GWT and why did I decided to stop?

First of all, GWT is a fantastic framework for doing web development. I think it’s the best tool at the moment if you want to build the next GMail or an intranet application. For all those slow and lousy web interfaces (for timesheets, CMS, …), GWT could come to the rescue. But my site is completely different.

Some of the reasons below are not really related to GWT, but more to using ajax in general. It is my opinion however, that these problems are easier to solve with ’standard’ javascript libraries like mootools, prototype, dwr or scriptaculous since these have a nice way to add some ajax to certain DOM elements. For example, in GWT I had to subclass the autocompleter textbox so I could attach it to an input field that already existed in the HTML. Maybe all of this could by solved if GWT had constructors that accept a DOM id too.

SEO

I’m entering in a highly competitive segment where SEO is really important. Since most of the html is build with GWT, you end up with a pretty empty page for Google. I added some noscript tags, but this was not really helpful.

Adsense

Another problem were my adsense banners. Since I didn’t have a lot of content on the page, the banners were sometimes off topic. An even bigger problem was that the banners stayed the same when people searched for different keywords (since the ajax refresh didn’t trigger an adsense refresh). I solved this by doing the search with a page refresh instead of an ajax call. The ajax part of the site was limited to sorting, faceting, i18n and displaying tips.

Google Analytics

I’m also using Google Analytics. Although no real evidence exists, it would be naive to think that Google isn’t using this data. But because of the ajax calls, I don’t get as many pageviews as a static version of competing sites. Every visitor is seen as doing 1 page visit, while he may have browsed several pages. This makes my bounce rate in Google Analytics really high. This can’t be good for my Google rankings.
In Belgium we have CIM Metriweb, a kind of archaic tracking system that is used when marketeers look for sites that have many hits. I’m not currently using this, but this thing depends on pageviews if you want the big guys to donate to your site.

What now?

I wanted a fully functional HTML version, where GWT was injected in some places to replace the full page loads with ajax calls. However, I couldn’t find an easy way to do this. And once I succeeded, I found that I had almost no code left in GWT that was worth using it instead of mootools. So now, after a lot of research and experimenting, I decided that I’ll go for the plain-old html way and spiced up some parts with ajax (like the “so 2007″ textbox autocompleter).

I discovered the Blueprint CSS framework (version 0.7 now has semantic classes) and CSS sprites. I’ve used Kuler and read a lot about CSS tips and tricks. I even read a bit about usability.

And since I spend 3 hours a day on the train, I have time to redesign the site. Using blueprint, it really was easy and the result is a much better looking, stable, fast site. Check the homepage: it only has 1 css, 1 javascript, 1 gif and 1 jpeg, but there are 25 images! Ah, the magic of blueprint, sprites and jawr…

Update: please see GWT follow-up

GWT and IE: The Story Continues

Friday, September 28th, 2007

This is the second time I loose more than a day searching why Internet Explorer choked on my GWT application.

Finally, I replaced my whole GWT code with the latest working version, but still without result. The only difference between the working version and the broken one was the CSS file. After a boring process of commenting and uncommenting CSS lines, I found that the guilty part was this:

#content{
border: 1px solid #3F8FB6;
}

I still don’t get it…

GWT and IE: operation aborted

Wednesday, September 19th, 2007

I got an “operation aborted” error in Internet Explorer 7, which rendered half of the page and then showed an empty page. Needless to say that everything worked perfectly in Firefox.

Even stranger was that I finally managed to fix it, but when I added Google Adsense banners, I got the error again!

After some googling and frustrating (un)commenting of blocks of code, I finally moved all javascript imports (GWT and Google Analytics) to the end of the page (just before the closing body tag). And – woohoo!- everything works!

Thanks to this overview of the problem!

www.koopjeszoeker.com

Monday, June 18th, 2007

After tryouts with script.aculo.us, mootools and DWR, I finally decided to go with Google Web Toolkit (GWT) for the (badly needed) update of my koopjeszoeker website.

GWT allows me to make changes much faster than I could do it with DWR or other frameworks. Writing javascript from Java code seems strange at first, but it’s much like writing a Swing application.

On top of that, I get the following benefits:

  • I don’t need to worry about versioning, GWT uses hashes which create new filenames for every release. So I can cache all files “until the sun explodes”.
  • GWT compresses and obfuscates the generated javascript
  • Internationalisation is fully supported as in Java with properties files
  • GWT creates separate files for every browser and language, which means that a Dutch user on Firefox doesn’t need to download code that can be used on an English Safari.
  • The javascript is compatible on all major browsers

My experiences:

  • During development, compile to Firefox for one language instead of to all browsers for all languages. You can do this by adding this to your module xml file:
    <extend-property name="locale" values="nl_BE"/><set-property name="user.agent" value="gecko"/>
  • Get a faster computer, it really helps. On my Pentium 4 2.8 Ghz, it took 30 seconds to compile. On my brand new Dual Core 2.6Ghz with 2 RAID disks, it takes 5 seconds. Considering the number of times you compile, it really makes it much more fun to develop.
  • There is also a “hosted mode” which runs the code as Java, without compiling to javascript. I don’t use this anymore because (for my project) it takes longer to start up than simply compiling to javascript and it’s more difficult to integrate with a backend.
  • I did integration with Spring for the RPC calls by extending RemoteServiceServlet and overriding the method processCall:
    public String processCall(String payload) throws SerializationException {        initialize();        try {            RPCRequest rpcRequest = RPC.decodeRequest(payload, AjaxService.class);            return RPC.invokeAndEncodeResponse(this.ajaxService, rpcRequest.getMethod(),                rpcRequest.getParameters());          } catch (IncompatibleRemoteServiceException ex) {            return RPC.encodeResponseForFailure(null, ex);          }    }

  • AJAX pages don’t work well with Google indexing and Google Adsense. For that reason, I created seperate pages for the search results instead of putting the whole site on one page. I also added noscript tags to the html with a plain html result.