Zooming In
This is the second in a series of articles on the LM micro-component architecture. Click here to start from the beginning.

In this post we’re going to describe components in more detail, and use a real application to show the micro-component architecture in action. For the sake of clarity, we’ve simplified some of the details, but the underlying model as described here is essentially identical to that of the functioning framework.

Within LM, components are either atomic in nature, or else they are composed of other components. Atomic components can either be concrete (HTML, CSS, JS or content) or else they are abstract. More on abstract components later.

The image below shows a typical component breakdown for an interface button. It can be seen that the button is a composite component, and, even though it represents a very simple interface item, it is itself composed of quite a high number of sub-components. At first glance, it may seem like overkill to break something as simple as a button down into so many parts….

… but if we consider (image below) a component representing a button group, we can immediately see the low-level factoring that occurs naturally. It should be clear that both graphical and behavioral consistency are reinforced by explicitly specifying the component breakdown in such detail.

A Real-World Example
We can see that the images below describe two folder managers which share the same general structure. At first glance, they appear more alike than they actually are. Each folder manager deals with a different underlying data type (images or contacts) and behaves differently depending on the context (double clicking an image fires-up the image viewer, whereas double clicking a contact brings up the contact properties form). That said, they also have a great deal in common. Apart from the graphical layout, many behaviors are also shared: dragging and dropping has the same effect in both contexts, as do the cut, copy and paste buttons, for example.

The image below shows a breakdown of some graphical components in the generic folder manager. The folder manager also references many other types of components, but it’s harder to visualize them graphically. The highlighted parts represent the various button groups (as described above) and the various icon templates. We have already seen that button groups share a wide range of common components. Similarly, behind the scenes, both folder managers share many items. For example, the same drag and drop library is used by both instances. Combined with the fact that they both use the same type of data structure to represent two quite different hierarchies, this means both instances are highly compatible with each other. Although it doesn’t make much sense to drop an image into a contact folder, if both folders contained similar data types, it would be straightforward to drag and drop items between the two windows (with both source and destination data structures being automatically updated both in the bowser and on the server).

E Pur Si Muove
And just to show that these examples do indeed come from a working application, below is a two minute video which shows the contact and image managers being used within a Twitter client which is written in LM.

It’s all about Structure
By now, it should be clear that intense factoring is one of the defining principles behind the micro-component architecture. And, although the LM compiler does carry-out some additional factoring, the key point is that the architecture itself promotes the natural identification of recurring structure at the specification level.

The first post emphasized the high level advantages of this granular component sharing: increased inter- and intra- application compatibility, leading to the possibility of complex application ecosystems emerging, in which applications can be combined, re-combined and augmented with ease.

In the next post, we’ll look at some low-level advantages of the micro-component architecture. We’ll see how it allows highly complex applications (comparable to desktop software) to be delivered to the browser in a highly efficient manner, even over high latency (eg mobile) networks.