Browsers vs GUIs

A browser is a graphical user interface for navigating and manipulating models. A browser is a specific kind of user interfaces. A browser engine offers the means for building this kind of user interfaces.

A browser engine differs from a user interface framework:

  • A user interface framework is concerned with displaying, providing interaction etc. The framework gives you complete control over creating user interface elements such as buttons, positioning them, and handling the user interaction.
  • A browser engine is concerned primarily with manipulating data. Such an engine is indeed based on a graphical user interface framework, but its goal is to provide a higher level language for describing the desired manipulation. The engine components implement patterns of mapping navigation interests on user interaction.

What does this imply?

When you work with a user interface framework the solution is often expressed in the form of "I want a button here", or "When I click here, I want a popup there." When you work with a browser engine, you formulate the solutions in terms of "I want to act on this data", or "When I select this entity, I want to see these details".

There are plenty of user interface frameworks, but only few browser engines. Glamour is such an engine, and it is a key part of Moose. Using Glamour you can build browsers in minutes. This is possible due to a high level mechanism that starts from the observation that a browser is primarily concerned with moving information from one place to another, and secondarily with how this information is presented and acted upon. The information flow and the presentation style form two orthogonal dimensions and are captured almost separately.

However, due to relying on a high level mode, it also means that Glamour provides you with limited possibilities for building a generic user interface. For example, you cannot place a button on a canvas. At least not easily.

But, what do you do when you need to place a button then? Well, you should not need to place a button. A button is an implementation detail. If you take a closer look, in most cases you just need a means to trigger some sort of an action. Furthermore, when it comes to a browser, this action will be related to some piece of data.

In the end, it is not the button that is important. It is the high level ability of triggering an action that matters. From this perspective, having a simple mechanism through which you can define actions that will appear in some standard place close to the data you want to manipulate can be an appropriate solution. The engine takes care of the implementation details of where and how to place the button. It is a different approach but it can serve the purpose just as well.

There are two implications. First, the way you formulate problems must change from handling user interface details to data navigation and interaction use cases. Second, the value of the engine comes from its ability to help you capture these use cases easily (i.e., few lines of expressive code), and to generate reasonable user interfaces.

It is important to understand these nuances before setting up to work with an engine like Glamour.

Posted by Tudor Girba at 28 January 2012, 11:38 pm with tags assessment, analysis, tooling link
|