progressive enhancement with gwt

I just made my progressive-enhancement library available on github. Read more about it on my new blog

Moving my blog to github

For various reasons I've decided to leave blogger and take my ramblings to github pages. My blog can now be found here. So-long blogger, and thanks for getting me started!

Eclipse code template for GWT jsni methods

Read this article at my new blog

What makes a good developer?

Read this article on my new blog

GWT JavaScriptObjects (Javascript Overlays)

read this article on my new blog

On 'Flow' and feeling productive

read this article on my new blog

My first Android app (desktop widget)

Read this article on my new blog

Tom Cruise to play Bjarne Stroustrup in Hollywood coding thriller?

Mission Impossible VI - save the world from Assembly Language - a must C movie.

Welsh National Anthem - Wales vs Argentina, 20/08/2011

Cardiff Millenium Stadium. Roof closed. Goose bumps.

Replicating java threading issues between machines with different cpu counts

Read this article on my new blog

Soaking up the atmosphere at The Millenium Stadium, Cardiff

For my birthday my wife got me an amazing surprise - tickets to the Heineken Cup Final in Cardiff between Leinster and Northampton Saints. It was an awesome game, in an incredible stadium, with a fantastic atmosphere - all told, a great birthday present. I took a little video with my phone just as the players were entering...

JQuery + HtmlUnit = runtimeError messages galore

Read this article on my new blog

Unit Testing code written in "Tell, Don't Ask" style

read this article on my new blog

More and more I find myself enjoying the "Tell, Don't Ask" style of programming, to the extent that recently I've been challenging myself to write all my code that way.

This brought up an interesting discussion while working on a proto-type with an excellent developer I've known and worked with for years - how do you test code written in this style?

Setting the scene

The idea of the proto-type was to play with and test out several Entity-Extraction and Text-Clustering algorithms - some that we had researched, some using existing libraries, and others of our own devising. We collected a few dozen Mb-worth of sample data to toy with, and I knocked up a quick harness to feed the test data into the Entity-Extraction and Test-Clustering routines, which just needed to implement a bunch of Java interfaces I'd written (using "Tell, Don't Ask" style). Each of us then proceeded to implement some of the algorithms, which we plugged in Strategy-Pattern style.

Every so often as we were working, my colleague would turn and say something like "I need to add Xxxx to the Yyyy interface, so I can unit-test my implementation". His feeling was that whilst in principle "Tell, Don't Ask" is laudable, it makes testing very awkward and ungainly.

As a result the interfaces drifted away from "Tell, Don't Ask" so that, whilst they still included the callback-style methods, they now presented a more typical "Ask" style API too - a simple example being: implementing Iterable<T> as well as providing each(T) methods.

Example Tests

Let's look at a simple example of the kind of tests that appear to be made difficult due to the "Tell, Don't Ask" style. Note that I'm using junit 3.8 style for these examples.

Say we have a Stuff interface, which is an immutable container of Thing's, and a ThingMaker that creates many Thing's and returns them packed in a Stuff.  Here are the "Tell, Don't Ask" interfaces we might have started off with:

public interface Thing {
    public String getName();
    public void doThings();
  }

  public interface ThingCallback {
    public void with(Thing thing);
  }

  public interface Stuff {
    public void each(ThingCallback callback);
  }

  public interface ThingMaker {
    public Stuff makeThings(int howMany);
  }

Pretty straight-forward. Now, lets see what happens when we want to test that when we ask the ThingMaker to make two Thing's, we actually get two non-null Thing's. Here's what the test method might look like:

public void testMakesCorrectNumberOfThings() {
    ThingMaker tm = new SimpleThingMaker();
    Stuff result = tm.makeThings(2);

    final boolean[] calledBack = new boolean[1];
    final int[] count = new int[1];
  
    result.each(new ThingCallback() {
      public void with(Thing thing) {
        calledBack[0] = true;
        if (thing != null) {
          count[0] = count[0]++;
        }
      }
    });

    assertTrue(calledBack[0]);
    assertEquals(2, count.length);
  }

Yikes, that's pretty nasty. What's all that nonsense with the final arrays? Well, given that we're working in an anonymous inner class (the callback) we can't just update a boolean or an int that we've declared in the enclosing scope, the only option we have is to cheat and use final variables that have mutable content - arrays are a cheap way to do that. But I think you'll agree this is hideous.

An alternative is to make the inner class do the checking and counting. To do that we have to raise its profile somewhat, to make it a named inner class:

class TestThingCallback implements ThingCallback {
    boolean called;
    int count;

    public void with(Thing thing) {
      called = true;
      count++;
    }
  }

  public void testMakesCorrectNumberOfThings() {
    ThingMaker tm = new SimpleThingMaker();
    Stuff result = tm.makeThings(2);

    TestThingCallback cb = new TestThingCallback();
    result.each(cb);

    assertTrue(cb.called);
    assertEquals(2, cb.count);
  }

OK, well that's a lot better, but the effort of making these "Test Spy" objects grows very quickly, and although this is more readable it somehow feels less concise, and by moving code outside of the test-method it makes it just that little bit more awkward to read.

I think this shows that "classical" unit testing of "Tell, Don't Ask" style code is actually awkward enough to want to find a better way. But can we do any better? Absolutely ...

Enter, jMock

jMock is an astonishingly useful tool in the testing arsenal. It makes truly unit testing your code possible without masses of work creating Test Double's, because it does all the grunt work for you. Lets quickly re-write our test using jmock.

public class TestCaseThingMaker extends MockObjectTestCase {
    public void testMakesCorrectNumberOfThings() {
      final ThingCallback callback = mock(ThingCallback.class);
      checking(new Expectations(){{
        exactly(2).of(callback).each(with(any(Thing.class)));
      }});

      ThingMaker tm = new SimpleThingMaker();
      Stuff result = tm.makeThings(2);
      result.each(callback);
    }
  }

Some of that might need a little explanation, so here goes:

1. The first thing we do inside our test method is create a "mock" instance of the ThingCallback interface. jMock does this for you in the invocation of the mock method.
2. Next we set up our "expectations" of what will happen to the mock ThingCallback during our test. The slightly funky syntax with the double braces is just an instance initializer on an anonymous inner class. The interesting bit is the declaration of what we expect to happen to our mock object - this is the bit inside those {{ ... }} written in jMock's intuitive internal DSL. To understand it you just have to read the whole line from left to right - we're expecting exactly 2 invocations of callback.each() with any instance of Thing.
3. Once we've set up our expectations it only remains to build the object under test - SimpleThingMaker - and invoke the methods we want to test.
4. If you are staring at that and wondering how JMock knows that the test is finished and the expectations should have been met (and that it should fail the test if not), notice that I'm using the JUnit-3 integration here - extending MockObjectTestCase - and the behind the scenes plumbing is taking care of that last step for me.
   
   If you're using the JUnit-4 integration you need to explicitly invoke assertIsSatisfied on the mock object context (org.jmock.Mockery) which supplied your mock objects.

jMock takes a little getting used to, as it involves quite a different way of thinking about your test. If you want to write good tests with it it certainly involves considerable effort to learn how to use it well (its easy to use it badly and end up with tests which are very difficult to understand). Once you get used to it though, it really does make tests much easier to write and, more importantly, to read.

I find that jMock really comes into its own when testing Tell, Don't Ask code - the code under test is clean and, by nature of the improved data-hiding, more robust, whilst jMock provides a very neat way to test that code with a minimum of fuss and boiler-plate. 

UPDATE: After ruminating on this for a while I came to the conclusion that JMock is so good at testing "Tell, don't ask" code that I was sure the designers of JMock must have set out with that in mind. I found a very nice post from Nat Pryce (one of the JMock authors) which confirmed my suspicions - Nat describes tell don't ask very succinctly:

   "...objects tell each other what to do by sending commands to one another, they don't ask each other for information and then make decisions upon the results of those queries.

The end result of this style is that it is easy to swap one object for another that can respond to the same commands but in a different way. This is because the behaviour of one object is not tied to the internal structure of the objects that it talks to."

Nat goes on to say that the only way to test tell-dont-ask code is to see how the state of the world is affected when objects are told to do something (because you can't ask them about their state), and that this is best achieved with mock objects, whereas "train wreck" code (Nat's description of code that is not written tell-dont-ask style, and commonly violates demeter's law) is hard to test with mock objects.

ElasticSearch vs SOLRCloud

Read this article on my new blog

For an upcoming work project I need a scalable search platform - scalable to tens or hundreds of millions of documents (news articles), and millions of queries per day. We're a (mostly) Java shop, and have a lot of experience with Lucene, so two solutions that pique my curiosity are SOLRCloud (SOLR + ZooKeeper) and ElasticSearch.

Initial Impressions - ElasticSearch

ElasticSearch is impressive. Its clean, simple, and elegant. For those who are familiar with Compass, ElasticSearch can be considered as Compass 3.0 (quoting Shay Bannon, author of Compass). ElasticSearch has been under development for about 9 months at time of writing, and is currently at version 0.15. It appears to be very actively developed, with new features and fixes flowing steadily. 

My main worry at this point is that there appears to be only one "resource" active on the project - Shay Bannon (@kimchy) himself, who seems to be architect, developer, documentation-writer, and a prolific commenter on forums.

Noteworthy features include:

• Document-oriented / Schema-free (JSON documents)
• Store, retrieve, index and search multiple versions of documents
• Self-hosting RESTful web-service api
• Exposes the full power of lucene queries
• Multiple Indexes in one cluster (described as Multi-Tenancy)
• Built from the ground-up with scalability and distributed-operation in mind - supporting distributed search, automatic fail-over and re-balancing, with no single point of failure
• Support for async write/backup to shared storage (Gateway, in ElasticSearch parlance)
• "Percolator" (aka. prospective search)

Initial Impressions - SOLRCloud

SOLR is a project from the same (Apache) stable as Lucene itself, and the projects have recently merged to some degree. SOLRCloud is an extension that integrates ZooKeeper with SOLR with the express aim of "enabling and simplifying the creation and use of Solr clusters."

SOLRCloud is described as "still under development", ie., not yet a GA release. Currently proclaimed features include:

• Central configuration of the entire cluster
• Automatic load-balancing and fail-over for queries
• ZooKeeper integration for cluster coordination and configuration (not sure I would have listed that as a feature personally!)

I'll add that SOLRCloud is part of the SOLR code-base, and is being developed by core Lucene and SOLR committers including Mark Miller and Yonik Seeley. This can only be a good thing :). On top of all that, SOLR has been around for a good long time now, so it is battle-tested and there's lots of information available (including numerous books).

That said, I still have a good few worries:

• Setup/deployment just sounds fiddly - it is recommended not to deploy zookeeper embedded with SOLR (though I cannot find any explanation to back up that recommendation), which means you need both a ZooKeeper ensemble - multiple ZooKeeper instances - and a SOLRCloud ... er ... cloud.
• No GA release as yet, and no roadmap that I can find (this is the closest I got).

Next Steps

My next steps are to dive in to both technologies and really get to see which best suits our needs, and really how difficult these things are likely to be to manage in a medium/large-scale deployment.

Progressive Enhancement with GWT, part 3

Read this article on my new blog

Read about my GWT.Progressive library on my new blog

This is the third part in a series, following my thoughts on using GWT in SEO'able web applications. The other parts in the series are part 1 and part 2.

In my previous posts I described an idea for progressive enhancement using GWT -  "activating" server-generated html, to combine GWT goodness with an SEO friendly server-generated website, and my findings after some initial trials.

One of the problems I described in that second post was that it would be very difficult to work with these widgets if nested widgets could not be automatically (or at least easily) bound to fields within this widget.

After a little playing around and learning about GWT Generators I now have what seems like a nice solution, using a Generator to do almost all of the donkey work. Think of it like UiBinder, but with the templates provided at runtime (courtesy of the server). Here's an example class that automatically binds sub-widgets - an Image in this case - to a field of that class:

public class MyWidget extends Widget {
   
    interface MyActivator extends ElementActivator<MyWidget> {}
    private static MyActivator activator = GWT.create(MyActivator.class);
   
    @RuntimeUiField(tag="img", cssClass="small") Image small;
   
    public MyWidget(Element anElement) {
        // this will set our element and bind our image field.
        setElement(activator.activate(this, anElement));
   
        // now we can play with our fields.
        small.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent aEvent) {
                Window.alert("clicked!");
            }
        });
    }   
}

This class will bind onto any html that has an image tag somewhere in its inner-html, for example:

<div> <!-- Say our MyWidget is bound here -->
  <div>
    <span>
      <img class="small" src="/images/image.jpg"> <!-- will be bound to our Image widget -->
    </span>
  </div>
</div>

Anyone familiar with UiBinder will recognize the pattern I've used for the "activator":

1. Extend an interface with no methods
   

   interface MyActivator extends ElementActivator<MyWidget> {}

2. GWT.create() an instance of that interface
   

   private static MyActivator activator = GWT.create(MyActivator.class);

3. Then use it to initialize your widget
   

   setElement(activator.activate(this, anElement));

The nice thing about this is we can automatically bind as many widgets as we like onto various sites within the inner-html of our current widget's element. It doesn't mess with the structure (unless you explicitly do so after the binding is done for you), and you can have as much other html within the elements as you like - it will just be left alone, which gives your designers the flexibility to change the layout quite a lot without necessarily needing to re-compile your GWT code.

Currently I have my generator set up to allow your widgets to bind to a choice of tag-name or css-class or both, for example:

// bind to the first <div> found by breadth-first search of child elements
@RuntimeUiField(tag="div") Label label;

// bind to first element with class="my-widget" found by breadth-first search
@RuntimeUiField(cssClass="my-widget") Label label;

// bind to first <div> with class="my-widget" found by breadth-first search
@RuntimeUiField(tag="div", cssClass="my-widget") Label label;

Notice in my examples so far I'm binding standard GWT widgets onto the nested elements. This works for the elements I've used in these examples because they all have a

public static Type wrap(Element anElement)

method which allows those widgets to be bound onto elements that are already attached to the DOM.

It is also possible to bind widgets of your own making in one of two ways:

1. Create a wrap method like

   public static MyWidget wrap(Element anElement)

2. Create a single-argument public Constructor that accepts an Element as its argument.

Activate-able widgets can be nested within other such widgets - with no limits that I am aware of so far - and it is also possible to assign nested widgets to a List field in the enclosing widget, like this:

@RuntimeUiField(tag="img") List<Image> images;

This will search recursively for any <img> tags inside the enclosing widget's element and bind them all to Image widget's that will be added to the List. The current limitations here are that the List must be declared either as List or ArrayList, and parameterized with a concrete type that meets the criteria defined above (i.e. has a static wrap(Element) method, or a single-arg constructor that takes an Element as the argument).

A remaining question is how to bind the outer-most Widget. Currently I'm doing that using the DOM scanning code I wrote during earlier experiments and which I'm also using in the automatic scanning process set up by the Generator. For example to find the outer-most widgets and kick off the binding process I have something like this in my EntryPoint:

public void onModuleLoad() {
    List<MyWidget> _myWidgets = new ArrayList<mywidget>();
    for (Element _e : Elements.getByCssClass("outer-most-widget")) {
        new MyWidget(_e);
    }
    // do stuff with our widgets ...
}

I think of this as very similar to the RootPanel situation - "normal" GWT apps kick off by getting a RootPanel(body tag) or RootPanel's (looked up by id), to which everything else is added. It would be nice to hide away some of that scanning code inside a "top-level" widget - much like RootPanel does for the normal case. I can imagine this might look something like:

public void onModuleLoad() {
    Page _page = Page.activate();
    _page.doStuffWithWidgets();
    // ...
}

I still have lots of things to figure out and questions to answer, for example:

• What's the performance like when binding many hundreds of widgets?
• How will this really work when I make ajax requests for more data? (should I make ajax requests for html snippets which I add to the DOM and then bind onto, or switch to json for ajax requests and make my widgets able to replicate themselves from an initial html template?)
• What's the best way to divide labour between developers and designers, and for them to organize their interaction? (Ideally I'd like there to be something of a cycle between them, where the designer can rough-out a page design, agree the componentisation with the developer, the developer knocks out some components and a build which the designer can use to activate their static designs, add fidelity, work on other pages with the same components, etc).
• Where is the sweet-spot between creating high-fidelity html server-side and decorating it client-side using GWT? Should the GWT components really be just for adding dynamism, or is it a good idea to use them to build additional html sweetness? - I mean the server could dish out html that is more of a model than a view (just enough "view" to satisfy SEO), and the GWT layer acts as a client-side controller and view (SOFEA/TSA with a nod to SEO).

I'll try to keep posting as I work things out.

This probably belongs in a separate post, but with reference to that last point on TSA (Thin Server Architecture) - the working group list the following points to define the concept:

1. Do not use server-side templating to create the web page.
2. Use a classical and simple client-server model, where the client runs in the browser.
3. Separate concerns using protocol between client and server and get a much more efficient and less costly development model.

I'm right behind them on (2) and (3), and also on (1) for "enterprise" apps where SEO is a non-goal. However, for an app that needs SEO, (1) is a deal-breaker, so I'd offer this alternative 1st rule instead:

1. Use server-side templating to produce a model for the client to consume which minimally satisfies the needs of SEO.

Progressive Enhancement with GWT, part 2

This is the second part in a series, following my thoughts on using GWT in SEO'able web applications. The other parts in the series are part 1 and part 3.

Since my earlier post, I spent a little time (only a few hours really, so far) trying a few things out. Here's a smattering of things I learned...

Scanning for elements and binding widgets onto them is easy. Making those widgets behave just like widgets in any normal GWT app needs a little more work.

Who's the daddy?

One big problem to get around is that normally GWT widgets are attached via a hierarchy of other widgets (parents) leading back to the RootPanel, whereas when you bind onto some arbitrary element that is already on the page you don't get this hierarchy for free.

When widgets are added to a parent widget some magic happens to set up things like the eventing system. Without that magic you can add as much event-handling plumbing as you like, but it won't work because your widget isn't wired into the eventing system.

Actually getting around this is not all that difficult. Simply invoking onAttach() will wire up your widget, though its a little unpleasant to have to do that.

Another problem with the lack of hierarchy is, well, there's no hierarchy. Things that you would normally do in GWT widgets - like adding, removing or replacing child widgets - gets a little trickier. If you want to use the technique recursively (and why wouldn't you?), you need to allow widgets to bind to elements inside other widgets without causing them to be removed from and re-attached to the DOM, but crucially you still need to add them as 'logical' children of the parent widget, otherwise the parent knows nothing about the child widgets and can't do any of those "normal" operations with them.

To do that there are two problems to overcome:

1. The parent needs to have the children added to it, so that the set of child widgets is known and available for manipulation (say by extending ComplexPanel and using the getChildren() method).
2. Some of the child widgets might need hard, typed references in the parent widget to allow direct manipulation of the child widget - just like in a "normal" GWT widget you would keep a reference to the Button you added in the constructor in order that you can bind ClickHandler's to it or toggle its enabled-ness.

Point 1 is easily solved - any widget that wants to play this way needs to support adding other widgets without triggering an attachment to the current element. When you add a normal child widget to a normal  parent widget, the child is detached from its current parent - logically and physically - so that its html element is actually inserted into the DOM under the parent's element. This is not what we want when binding onto a template - we just want the logical attachment step, so we need to support an add method something like:

    public void logicalAdd(Widget aWidget) {

        getChildren().add(aWidget);

        adopt(aWidget);     

    }    

I've yet to try to solve point 2. So far I've built:

• Tools to help with scanning for elements to bind to, and then binding the right widget.
• Plumbing to allow recursively binding widgets with logical hierarchy intact (point 1 above).
• An example that binds widgets recursively - an outer container, an inner container, and a bunch of widgets inside that are manipulated by the inner container.

I'll try to update the post with an example at some point. Meanwhile my next challenge is to solve point 2  such that widget developers can build their widgets in a fairly typical GWT way.

As an aside, I lay awake for a while last night pondering the ability to give designers a client-side templating system, where they can write the html for a component once (declaring it to be a template, which may include recursive binding points for GWT-activated widgets) and then re-use it elsewhere within their html by reference to the template. I'm sure this would be possible, though its utility might extend only to mock-ups.

Installing fonts in Ubuntu

Installing fonts in ubuntu is very easy these days - just open a ttf file and you are presented with a nice sample of the font (quick brown fox style), and a button in the bottom right corner to install the font.

Nice'n'easy, but you're not quite done yet. You'll definitely need to restart running apps before the font becomes available to them, and quite possibly you'll need to rebuild the font cache, which you can do by rebooting (hah!) or:

sudo fccache -fv

btw., check out Eurostile. Its about 50 years old, but nonetheless is one of the most gorgeous fonts i've ever seen.

Progressive Enhancement with GWT, part 1

This is the first part in a series, following my thoughts on using GWT in SEO'able web applications. The other parts in the series are part 2 and part 3.

GWT Is a superb framework for developing complex, componentized html & javascript widgets.  You can have your cake and eat it:

• Drop down into native javascript as and when you feel the need
• Integrate easily with native js components and libraries
• Use GWT components relatively easily from native javascript
• Create super-condensed, fast, platform-specific code, easily
• All the benefits of Java's static type-system, packages, and tooling to manage and refactor your code

It is very tempting to go for an all-out GWT user-interface, which is great if what you want is a super-snazzy Rich-Internet-Application which packs down into very small and extremely cacheable js bundles that fetch data asynchronously from the server, and you don't mind re-compiling your user-interface to make even a very small change.

It isn't so great when:

• You need to expose the content of your site for search-engines to index (The SEO Problem).
• You want to leverage the html and css skills of your UI designers, and to be able to generate more flexible layouts without requiring a re-compile (The Design Problem).

The SEO Problem

To a search engine, GWT apps just look like a big fat lump of dense javascript. Nothing to see here, move along. Its a similar problem for any web-app that uses ajax to collect data from the server, but the problem is magnified with GWT due to the fact that the entire application tends to present as a large lump of dense javascript, whereas many other ajax technologies typically involve some amount of server-side content rendering that can make the site at least partially visible to crawlers.

Google have a recommendation for how to get around the problems of SEO for ajax applications, which entails a special url form and the creation of "html snapshots" - effectively a parallel, ajax-disabled site that the crawler can index. This seems to me to be a workable but irritating solution that involves doing a lot of extra work just to allow a search engine to crawl the site. Its effectively just a Google-approved cloaking method. Also it isn't clear to me whether any other search engines than Google support this approach.

The Design Problem

Don't get me wrong, its not as bad as all that. You can, of course, leverage your UI/UX designer's talents when building GWT apps. They can produce designs that the GWT developers base their components on, and with UIBinder the html fragments produced by a designer can be used in large chunks, but there is always some disconnect between what the designers produce and what is actually output by the application - usually because there is a developer translating the designer's work into GWT components.

In retrospect, having built a number of "monolithic" GWT applications, it seems to me that what we're missing is a way to step back just a little from the "GWT does everything" mind-set, and instead to leverage GWT where it is best suited, and something a little more flexible where GWT can be too restrictive - for example when laying out high level components on a page it would be advantageous to be able to escape from the restrictions of having to compile that page layout into js, and instead work at the level of straight-forward declarative markup.

Introducing "GWT-Activated Pages"

How can we solve these two issues? One idea I've been toying with, is to use GWT for progressive enhancement of simple html + css, and goes as follows:

Rather than try to build two almost parallel versions of your application (one for SEO, one for real users), why not build one with a layered approach that allows graceful degradation for browsers with javascript disabled (of which search-engines could be considered a sub-set).

The base-layer that non-javascript browsers would render, and which search-engines would see, would be generated  by some typical server-side technology - php, jsp, struts, jfaces, ... take your pick. This would build a "wireframe" of your page, giving it a basic shape and layout, and filling in some starter content. The markup would ideally be meaningful, in the sense that headings would appear in <h1> tags to indicate that they are headings, rather than to give them any particular styling.

This base layer would be something that designers could work on directly, including any and all css styling.

The second layer would be a set of GWT widgets that "activate" or progressively enhance the page, by scanning the DOM for certain signs that denote activateable sections of markup. When the base page loads, GWT widgets search for elements to bind themselves to. When a widget finds such an element it binds to it and "activates" it. Activation could mean anything from completely changing the html markup, to binding event-listeners, to handling interaction with ajax data loading from the server.

Here's a simple example "base" layer:



<html>
  <body>
    <h1>Page Header</h1>
    <ol class="gwt-navigation-widget">
      <!-- the listitems are generated server side -->
      <li><a href="..">Home</a></li>
      <li><a href="..">News</a></li>
      <li><a href="..">Videos</a></li>
      <li><a href="..">Photos</a></li>
      <li><a href="..">About</a></li>
    </ol>
    <ol class="gwt-news-ticker-widget">
      <!-- the listitems are generated server side -->
      <li>News story 1</li>
      <li>News story 2</li>
      ...
      <!-- this last listitem gives a link that a search engine can follow to get more data -->
      <li><a href="..">older stories</a></li>
    </ol>


    <script type="text/javascript" language="javascript" src="widgets/navigation-widget.js"></script>
    <script type="text/javascript" language="javascript" src="widgets/news-ticker-widget.js"></script>
  </body>
</html>

Notice the elements with css class-names prefixed with "gwt-". These are the signs that our gwt widgets will be looking for in order to know which elements they should activate.

As you probably guessed, the navigation widget would detect any elements with a class-name matching "gwt-navigation-widget", while the news-ticker will search for "gwt-news-ticker-widget".

OK, so what do we get for our troubles? Well, several things potentially:

1. One request to the server to get our initial page full of data (rather than multiple widgets requesting async loading of little chunks of data)
2. A page that contains the data and is search-engine friendly, allowing pages deep within your app to indexed by search-engines
3. A very clear separation of widgets and page layout, allowing you more flexibility to change the page layout without GWT re-compile
4. Flexibility in dividing work between designers and developers:
   
   • designers can focus on the design-heavy html and css work, and the overall page layout
   • developers can focus on interaction with the server, complex widget behaviour, etc.

Upon finding an element to bind to, the widget would:

• Examine the content of the element - this will very likely be the source of its initial configuration and/or data-set, and also might include some information about how to load more content, as in the news-ticker example whose last <li> is a link to "older stories". I'm sure it would be a good idea to make this even more explicit, but like I said this is supposed to be a simple example :)
• Replace or modify the content of the element - perhaps the widget displays a very complicated UI, so it removes the html and replaces it with something nifty that it generates, or maybe it just adds some decoration in the form of small visible changes, or perhaps it binds a bunch of event handlers to do neat tricks like adding gesture handling for touch-screen users.

It seems that it would be perfectly possible to bind widgets inside widgets in this way, although at some point you would probably want to control the binding order such that an outer widget binds before an inner one. One way to do this might be to have a page-activator that seeks elements that want to be activated, and which all widgets are registered with. This could be described nicely as a Pattern.

In my simple example I showed the scripts being loaded separately, just for clarity, but I'm sure you wouldn't want to load each widget as a separate script - that would lose a good chunk of GWT's advantage. Rather, the whole widget-set could be loaded as one script, cached forever, and used all over.

Now, if you want to see an example of GWT-activated pages at work, just take a look at my older post on rendering 3D Rubiks Cubes with GWT and HTML5 Canvas, where the rubik's cubes are rendered by a gwt widget that "activates" a <div> element containing the configuration for the cube.

OK, but what are the down-sides? Here's a few...

• Compiler no longer has visibility across the whole UI.
• Messaging between components becomes more difficult (but not impossible). This has its advantages too - it forces low coupling. Messaging via OpenAjax Hub or similar would be worth considering.
• It's more work than a straight-out GWT UI, and many would argue why bother to use GWT at all if you need SEO (depends on your skill-set and the complexity of the components you're building in my view).
• I'm sure that there are others which I'm currently blind to ... I need to try to build some more complex and interesting examples to find these out.

tl;dr ?

Reading List, 17-01-2011

I love it when I get a box from Amazon. Today's new arrivals: five (count 'em) new tech books:


I'm particularly intrigued to read "The Art of Scalability" - I've never come across a book quite like this that addresses the organisational aspects of scaling a company and processes alongside the architectural aspects of developing scalable software.

Linux Distro popularity

Interesting to see how Ubuntu has overtaken its sire Debian in recent years - Google Trends really is amazing.

Google Trends chart of Ubuntu (blue), Debian (red), CentOS (green) and Suse (orange).

Here's the link to see the full google-trends page for this comparison.

I love the spikes on the ubuntu line every 6 months - I imagine these coincide with the 6-monthly .4 and .10 releases (April and October).

Interestingly, when I compare Ubuntu with Windows 7 and OSX, OSX loses out strongly to Ubuntu (perhaps I'm using the wrong term, but I tried a number of different combinations), while Win7 is around 3x more popular than Ubuntu.  Also interesting to note how OSX beats Ubuntu in the "news" mentions (below the x-axis) presumably because of the Apple PR machine:

Google Trends chart of Ubuntu (blue), Windows 7 (red), OSX (orange)

3D graphics using the html5 canvas

I thought i'd put up a quick sample of my latest play-thing - a 3D rendering of a rubik's cube, using javascript (GWT) to implement the z-buffer and the html5 canvas as the display.  I originally built this in plain old javascript, but have now converted it to GWT - partly just for fun and partly to make the code a bit more manageable and refactorable (if that's even a word). Along the way I made a few optimisations like caching radian, sin and cosine values of angles.

The cube is made from 27 "blocks", each of which has a face in each of the rubik-cube face colours. When the 27 blocks are put together we get the completed cube. Admittedly the 27th block isn't really necessary (its right in the middle where it is never visible), but it made life just that little bit simpler to ignore that and go with it.

The cubes you can see below are rendered when the page loads. The scenes are pretty simple, so render very quickly. You may have seen the cube configuration instead of the cubes for a short while until the javascript loaded, at which point the configuration is replaced by the rendered cubes.

Configuring a cube to display is as simple as adding a <div> element like this:

<div class="rubiks" style="width:150px; height:150px;">
  {"rubik-cube":{}, "camera":{}}
</div>

This sets up the default position and orientation for both camera and cube, which looks like this:

{ "rubik-cube": {}, "camera":{} }

That's a pretty boring view, so lets rotate the cube so that we can see more than just the red-face nearest us. To do that we supply some rotations around the x and y axis like this:

<div class="rubiks" style="width:150px; height:150px;">
  { 
    "rubik-cube":{ 
      "rotate-x":35, 
      "rotate-y":35, 
      "rotate-z":35 
    }, 
    "camera":{}
  }
</div>

This results in the following cube:

{ "rubik-cube": { "rotate-x":35, "rotate-y":35, "rotate-z":35 }, "camera":{} }

I'm quite pleased with the results so far, and the performance is not bad either it seems. The speed of actually drawing on the canvas seems to be plenty good enough to get away with a bit of animation. On my (Core i7) laptop I can spin the cube on all 3 axis at a couple-hundred frames per second (hopefully i'll put up an example in a later post).

Next steps for the rubik's application (yeah, like i'll get around to it) would be:

• Supply "twist" information in the configuration so I can show cubes in various stages of completion.
• Animate the twists, allowing a viewer to step through the twists, for example to see how to solve a particular part of a cube.
• Interactive mode where the viewer can play with the cube.

In a separate direction, the z-buffer i've built up in order to render the cubes could be improved in lots of nice ways too.

Just before I finish off with a few more views of the cube, I wanted to mention that I had a few issues finding a way to host the scripts and use them in Blogger. Annoyingly you can't host javascript or html files directly from Blogger, so I had to find somewhere else to put them.

My usual approach for hosting source code is to use github "gists", which provides a neat way of showing prettified source, but also lets you view the "raw" source. That allowed me to host the js somewhere, but I had to work around a cross-site scripting issue loading the GWT sources from a different domain.

Fortunately GWT makes that easy with its "xs" linker, which produces a bunch of ".no-cache.js" files instead of "no-cache.html" files, and solves the XSS problem. To use the xs linker you just add a single line to your .gwt.xml file:

<add-linker name="xs" />

Sadly that prevents hosted mode from working (currently), but that's easy enough to work around :)

{ "rubik-cube": { "rotate-x":35, "rotate-y":35 }, "camera":{} }	{ "rubik-cube": { "rotate-x":45, "rotate-y":135 }, "camera":{} }	{ "rubik-cube": { "rotate-x":45, "rotate-z":135 }, "camera":{} }	{ "rubik-cube": { "rotate-x":45, "rotate-y":215 }, "camera":{} }
{ "rubik-cube": { "rotate-x":135, "rotate-y":35 }, "camera":{} }	{ "rubik-cube": { "rotate-x":95, "rotate-y":125 }, "camera":{} }	{ "rubik-cube": { "rotate-x":15, "rotate-y":15, "rotate-z":15 }, "camera":{} }	{ "rubik-cube": { "rotate-x":25, "rotate-y":-25 }, "camera":{} }