« AspectJ 5 M2 released today | Main | Printing entries from this blog »

April 08, 2005

Making the code look like the design

I took some time out over Easter to recharge ahead of the big AspectJ push on AspectJ 5 M3 and generics. It gave me some "fiddling around" time to catch up on those little jobs you've been meaning to get to for ages. One such job was to make some improvements to the AspectJ website (we've very recently acquired the ability to run php scripts on the Eclipse servers). In particular, keeping the AspectJ home page current and interesting is always a challenge. Since I occassionaly write interesting things in this blog (I hope ;) ), and there are several other AOP related blogs around I thought it would be nice to change the home page to include some syndicated content - that way the page could update itself without me having to do anything ;).

That change per se isn't the subject of this entry though. While I was editing the pages, I couldn't resist cleaning up the markup. The original Eclipse AspectJ site was put together in late 2002, and has just had incremental updates since then. Whilst the new site looks pretty much the same, the markup is now completely different - and what struck me as I was doing the work is that I was applying two principles that we also talk about with respect to AOP: "making the code look like the design", and "separation of concerns". In website design terms, I'm playing catch-up with the rest of the world here, but from an AOP perspective it's interesting to see how the principles we work too can help with more software development tasks than just writing programs.

Take a look at the current (at time of writing) AspectJ home page and then at the new AspectJ home page. If we concentrate on the main body of the pages, we can see that both pages have the same logical structure and the same content. What's the design of the home page? You can see that the page is broken down into sections: there's a main heading "aspectj project" under which come several sub-headings ("News and Events", "Recent Books and Articles", and "Links"). In each of these sub-sections you find a list of entries.

So both pages look the same and have the same design for the main body of the page. But as I mentioned previously, they have a very different implementation. In the case of the old home page, the (html) code does not look at all like the design. The effect is created with table markup, as was pretty common in late 2002 (and probably still is today...). Here's an extract:

 ...
 <tr>
    <td ALIGN=LEFT VALIGN=TOP BGCOLOR="#0080C0"><b><font color="#FFFFFF"  
          face="Arial,Helvetica"> News and Events</font></b></td>
 </tr>
 <tr>
    <td> 
      <table cellSpacing="5" cellPadding="2" width="100%" border="0">     
        <tr>
          <td vAlign="top" align="left" height="12" width="23">
            <img src="http://eclipse.org/images/Adarrow.gif" border="0" width="16" height="16">
          </td>
          <td colspan="2"  valign="top">
  	    <b>April 7th, 2005 - AspectJ 5 M2 (milestone 2) build now available. </b> 
             The second milestone build of AspectJ 5 is now available, with full support for compiling Java        
             5  language features and annotation matching and binding.
             See the <a href="doc/README-150.html">README</a>
             for more details, or go straight to the <<a href="doc/ajdk15notebook/index.html">AspectJ 5
    	     Developer's Notebook</a> for a detailed description of the new language features.
          </td>
        </tr>
      <tr>
          <<td vAlign="top" align="left" height="23" width="23">
            <img src="http://eclipse.org/images/Adarrow.gif" border="0" width="16" height="16">
          </td>
          <td colspan="2" height="23">
                 <b>March 14-18, 2005 </b>-
          	<b><a target="_top" href="http://aosd.net/2005/index.php">AOSD.05</a></b>,
                 Chicago, IL
                 <br/>
	         The International Conference on 
	         Aspect-Oriented Software Development 
                 with Gregor Kiczales, Cristina Videira Lopes, 
                 Mik Kersten, Adrian Colyer, Andrew Clement, 
	         Julie Waterhouse, Jonas Boner, Alexandre Vasseur, 
                 Ron Bodkin, Nicholas Lesiecki, Ramnivas Laddad, Grady Booch, et al.
          </td>
       </tr>             	
      ...

Note the use of nested tables, images embedded in (every) table row, colspans, bold markup etc. - all part of the code used to implement the design. The end result is pretty ugly. Fast forward to the new page markup. Here's the same section of home page again:

  ...
  <h2>News and Events</h2>

  <dl>  
  
   <dt> April 7, 2005 <a href="downloads.php">AspectJ 5 M2</a> build now available</dt>
   <dd>
	   The second milestone build of AspectJ 5 is now available, with full support for compiling Java 5 language
	   features and annotation matching and binding.
	   See the <a href="doc/README-150.html">README</a>
	   for more details, or go straight to the <a href="doc/ajdk15notebook/index.html">AspectJ 5
	   Developer's Notebook</a> for a detailed description of the new language features.
   </dd>
  
    <dt> March 14-18, 2005 -
            <a target="_top" href="http://aosd.net/2005/index.php">AOSD.05</a>,
            Chicago, IL
    </dt>
    <dd>
	    The International Conference on 
	    Aspect-Oriented Software Development 
	    with Gregor Kiczales, Cristina Videira Lopes, 
	    Mik Kersten, Adrian Colyer, Andrew Clement, 
	    Julie Waterhouse, Jonas Boner, Alexandre Vasseur, 
	    Ron Bodkin, Nicholas Lesiecki, Ramnivas Laddad, Grady Booch, et al.
    </dd>
    ...

This code, I argue, looks just like the design - there's a heading, followed by a list. All of the implementation noise has been removed. Dan Cederholm (author of " Web Standards Solutions") calls this a semantic markup because the "code" is describing what things are (their design), as opposed to how they should be presented. As well as being much nicer to work with, this markup has a lot of other benefits too in terms of accessibility, maintenance, support for a wide variety of devices, and so on.

The reason that I was able to make the code look like the design was by applying the principle of separation of concerns. Without a technology that helps you to do that, it's hard to get the code clean. In the case of AOP, that technology is AspectJ. In the case of web site design, that technology is CSS. Remember that both pages look the same when viewed in a standard browser. The reason I can do that in the new site is that CSS allows me to separate the presentation concern from the content (a phrase involving grandmothers, eggs, and sucking is coming to mind here for many of my readers - forgive me whilst I make a point...). Here's an extract from the style sheet that says h2 headings should have white text and a blue background bar, and list items should have the little arrow image instead of a bullet:

h2 { font-family: arial, helvetica, geneva; 
     font-size: 12pt; 
     font-weight: bold ; 
     line-height: 14px;
     color: #FFFFFF;
     background-color: #0080C0;
     padding: 5px;
}

dt {
  background: url(images/Adarrow.gif) no-repeat 0 50%;
  font-family: arial, helvetica, geneva; 
  font-size: 10pt;
  font-weight: bold;
  padding-left: 22px;
  padding-top: 6px;
  padding-bottom: 6px;
}

dd {
  line-height: 1.2em;
}

...

Note also that just as with separation of concerns in AspectJ programs we get other benefits from this separation too - notably the option to "compose" the page with a variety of different style sheets: one formatting the page for printing for example. What we make modular, we can also more easily replace, extend, and reuse.

The moral of the story of course is that by understanding underlying principles we can apply them to all of our work as designers and implementors. The same principles that provide the motivation for languages like AspectJ are applicable in a wide range of situations - including I'm sure a good number that we've yet to encounter.

Posted by adrian at April 8, 2005 12:39 PM [permalink]

Comments

Post a comment