Good Code is Beautiful

Published 2008-10-15.
Time to read: 2 minutes.

This page is part of the posts collection, categorized under Software.

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:

Shell

<mx:TextArea  width="100" height="100%"
contextMenu="{cm}" xmlns:components="components.*"
creationComplete="init()" width="100%"
xmlns:mx="https://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.

Long ago I adopted the convention of ordering all attributes in alphabetical order, one per line. I would write the above like this:

Shell

<mx:TextArea
    contextMenu="{cm}"
    creationComplete="init()"
    height="100%"
    width="100%"
    xmlns:components="components.*"
    xmlns:mx="https://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 back in 2011, prior to canceling the Flex product. I take some of it the way the characters of “Pirates of the Caribbean” consider the Pirate’s Code: “Argh, it be more like a set of guidelines.”

The Pirate’s Codex, from the Pirates of the Caribbean movie

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:

Shell

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. When the Python programming language was first introduced it was initially controversial in part because it used indentation to define control structure. Python programs do not need braces for scoping 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:

Shell

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 the Flex Pretty Printer plugin for Eclipse / Flash Builder. If you like, you can importing my formatting rules, which enforce the vertically compressed style above.