« Keynote (RIA Unleashed: Boston 2009) | Main | Custom Components in Flex 3 and 4 (RIA Unleashed: Boston 2009) »

How Not to Code Flex Applications (RIA Unleashed: Boston 2009)

Jeff Tapper

What is bad code
* Doesn't meet needs of the project: efficiency, maintainability, time to develop
* Code which doesn't make sense

Why do we write bad code
* Lack of time
* Lack of knowledge
* Lack of caring

What bad code leads to
* Delays
* Project failure
* Job loss
* Death

Bad code samples

If you are doing something wrong note it, add comments about why so you know you need to fix it later

Bad Code Sample 1

<mx:VBox styleName="doubleLine"/>
.doubleLine {
    background-image: Embed("/assets/images/doubleLine.png");
}

* Bad use of container (don't use if it won't have children)
* Better to replace with mx:Image

Bad Code Sample 2

<mx:List itemRenderer="see below" selectable="false">
<!-- item renderer -->
<mx:VBox>
<mx:Image/>
<mx:Label/>
</mx:VBox>

* Use of list when you don't need it's features: virtualization, selectability
* Better to replace with mx:Repeater

Bad Code Sample 3

public function setDate(u:String, p:String):void {
    username.text = u;
    password.text = p;
}
<mx:TextInput id="username"/>
<mx:TextInput id="password"/>

* Properties set on controls instead of a model (race conditions, control names, additional fields)
* Modify the model let the view follow using Bindings

Bad Code Sample 4

<mx:Form currentState="{ModelLocator.getInstance().loginState}"/>
new CarignromEvent("changeState");

* View events handled in top level component
* Local property changing local state is best unless other people need to know about it

Bad Code Sample 5

<mx:VBox borderStyle="solid" backgroundColor="" otherCSSStyles>
<mx:Text/>
</mx:VBox>

* Inappropriate container nesting (mostly for styling, not child layout, i.e. container with only one child)
* Exception is mx:ViewStack and mx:TabNavigator require children be containers
* Better to use mx:TextArea as that supports background and border styles

Bad Code Sample 6

<comp:Comp1 id="menuChooser"/>
<comp:Comp2 menuForDisplay="{menuChoose.menuGroup.selection.label}"/>

* Bad coupling (two dots and you are out)
* Better to dispatch event that others can listen for

Bad Code Sample 7

<mx:Button enabled="foo &amp;&amp; (bar != ''  || bar == '') // etc."/>

* Being too clever (hard to maintain and debug)
* Move the logic into a function

Tags: design flex riaunleashedboston2009