Good Code is Beautiful

2008-10-15 / All Blog posts

First, I'd like to point out a few practical reasons why orderliness is important. Can you spot the bug in the following Flex code? This custom component is not as wide as expected:

<mx:TextArea  width="100" height="100%"
contextMenu="{cm}" xmlns:components="components.*"
creationComplete="init()" width="100%"
xmlns:mx="http://www.adobe.com/2006/mxml">
...
</mx:TextArea>

The bug occurs because two width attributes were provided, one with the value 100 pixels and one with the value 100%. Jamming a long list of attributes into an MXML tag in no particular order is an invitation to chaos. No error message is generated if an attribute is specified twice.

I adopt the convention of ordering all attributes in alphabetical order, one per line; I would write the above like this:

<mx:TextArea
    contextMenu="{cm}"
    creationComplete="init()"
    height="100%"
    width="100%"
    xmlns:components="components.*"
    xmlns:mx="http://www.adobe.com/2006/mxml">
...
</mx:TextArea>

Other people write certain attributes first, like id, width and height. Whatever convention you adopt, stick to it.

Here are the official ActionScript coding conventions, as published by Adobe. I take some of it the way the cast of "Pirates of the Caribbean" consider the Pirate's Code: "Argh, it be more like a set of guidelines."

ANSI/Unix vs. Vertically Compressed Styles

I realize that this topic might make me flame-bait, but my experience has shown that the ANSI/Unix style of vertically spacing parenthesis increases the maintenance costs of a program.

Functions/methods should fit on a single screen; so should data structures. Because programs written in bygone days had to be editable on a green screen, 80 columns was the widest that a program could be written. In the 'bad old days', it was better to let a program run to more lines in order to avoid folding code. Here is an example:

private function GridContextEventHandler(event:GridContextEvent):void
{
   if (event.menuItem=='Edit')
   {
      EditGridItem(event.selectedIndex);
   }
   else if (event.menuItem=='Remove')
   {
      RemoveGridItem(event.selectedIndex);
   }
}

A vertically compressed style is much more easily read. Python initially made waves in part because code formatting enforces control structure. Python programs do not need parentheses as a result. Why not write ActionScript in the same manner, so parenthesis are virtually redundant? The Sun/Java convention is a good example of this formatting convention. The above program fragment would be written like this using a vertically compressed style:

private function GridContextEventHandler(event:GridContextEvent):void {
   if (event.menuItem=='Edit') {
      EditGridItem(event.selectedIndex);
   } else if (event.menuItem=='Remove') {
      RemoveGridItem(event.selectedIndex);
   }
}

Enforcing Style

Coding style conventions can be automatically applied by installing Flex Pretty Printer into Eclipse / Flash Builder. If you like, you can importing my formatting rules, which enforce the vertically compressed style above.

Complete Disregard for Style

Recently I examined a programming candidate's programming style. He didn't get the job. Here is how he wrote the above code:

private function GridContextEventHandler(event:GridContextEvent):void{
 if(event.menuItem=='Edit')
 EditGridItem(event.selectedIndex);
 else if(event.menuItem=='Remove')
 RemoveGridItem(event.selectedIndex);
}

The rest of his code did not work very well. Seems like from the way he wrote it that he didn't really care. No surprise that someone else got the job.


comments powered by Disqus