Advanced RIA architecture with GWT - Part I (first overview)

Rich Internet Applications (RIA) are not really a new thing, but currently there are just a couple of web pages out there, using a real RIA architecture. So it's new enough to write a series of articles about creating a good RIA architecture with the Google Web Toolkit. I'm sure some of the patterns and concepts are also portable to other frameworks.

Model View Presenter Pattern (MVP)

In the last year it became very popular in the GWT community to use the MVP pattern instead of the MVC (Modell View Controller) pattern. One of the reasons is that Ray Ryan from Google introduced it as a best practice at Google IO 2009:

The pattern is supported very well by GWT since version 1.6 introduced interfaces like HasWidgets or HasClickHandlers to decouple the View from the presenter in the required way. The other great new technology that GWT 2.0 provides to support this pattern is the new UI-Binder mechanism, which allows a declarative UI creation.

The difference to the MVC pattern is, that the model is not accessed by the view directly. Instead the presenter does the job. This reduces the view just to a collection of UI elements and their layout. Below you can see the difference between both:

In the MVP pattern the presenter is the leading part of each component. It will communicate to the server, render the model to the view and thus contain the whole logic of this component.

EventBus

Since each component in the UI is build of a presenter and it's view object, there must be any way of communication between the components.

Assume you have got a photo app like Flickr or Picasa and you want to create a list with all photo albums on left while the thumbnail view on the right will show all photos in the selected album. How will a selection on the left component be communicated to the right?

The EventBus solves this problem. If an album is selected on the left, the presenter will fire an AlbumSelectedEvent, while the other presenter has registered a Handler for this event. If your application becomes bigger, other presenters can also register for this event and react to it. There should be exactly one EventBus for the whole application and all events should be fired through this.

Command Pattern

The Command Pattern is a classical pattern widely used in software development. In GWT applications it is a great way to realize the communication to the backend (e. g. on a server). The idea is, that each presenter can give command or better action objects to one central handler, who is delegating the command to an executor (e. g. on the server or the client site service for RESTful API). The presenter does not care about, how and by whom the command is executed.

All together

Let's take a look on an overview of our sample photo application. It's architectre could look like the following:

As you can see, there is no backend realized in this sample, but it shows how the architectural concept from above can work together.