These are the slides from my "How Not To Code Flex Applications" session

1. How not to code Flex
Applications
Tips and Tricks to keep you from
being fired, or fed to the lions.
Jeff Tapper
jtapper@digitalprimates.net
Digital Primates IT Consulting

2. Who Am I
 Jeff Tapper (jtapper@digitalprimates.net)
 Senior Consultant – Digital Primates IT Consulting
Group
 Building Internet Applications since 1995
 Authored 10 books on internet technologies
 Adobe Certified Instructor for all Flex, AIR, Flash, and
ColdFusion courses
 http://blogs.digitalprimates.net/jefftapper
 Twitter: jefftapper

3. Who Are You?
• Developers who…
– are open to learning
– Have some experience with Flex
– Have a sense of humor
• If this isn’t you, you should probably leave

4. Agenda
• What is bad code
• Why do developers code badly
• Bad Code Samples
• Rules to Live By
• Questions

5. What is Bad Code
• Bad code is…
– Code which doesn’t meet the needs of a project
• Efficiency
• maintainability
• Time to develop
– Code which doesn’t make sense

6. Why do developers code badly?
• Lack of Time
• Lack of Knowledge
• Lack of Caring

7. Some of my bad code…
public class XMLListener extends
EventDispatcher
{
// FIXME! - JT - yes, i know this is
// not the right solution
// but im making the socket public so I
// can attach a listener to it
// this can clearly be done better, but im
// tired, and this is what i have at the
// moment
public var socket:XMLSocket;

8. What are the consequences
• Bad code can lead to
– Delays
– Project failure
– Job loss
– Death

9. Sample 1
<mx:VBox xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;>
<mx:TextInput id=quot;usernamequot; width=quot;150quot;/>
<mx:TextInput id=quot;passwordquot; width=quot;150quot;/>
<mx:VBox width=“150quot; height=quot;10quot;
styleName=quot;doubleLinequot;/>
<mx:Button label=quot;submitquot;/>
</mx:VBox>
Main.css
.doubleLine{
background-image: Embed(quot;/assets/images/doubleLine.pngquot;);
}
Rule1.mxml

10. What is wrong with #1
• Summary: Inappropriate use of container.
• Description: <mx:Image> should be used to
display an image, not a container with an
backgroundImage style
• Type: Maintainability, Performance
• Rule: Its never appropriate to use a container
which will never have children.

11. #2
Main App
<mx:List dataProvider=quot;{ac}quot;
itemRenderer=quot;component.ItemRendererquot;
selectable=quot;falsequot; />
ItemRenderer
<mx:VBox xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; >
<mx:Image source=quot;{data.image}quot;/>
<mx:Label text=quot;{data.colorname}quot;
height=quot;30quot;/>
</mx:VBox>
Rule2.mxml

12. What is wrong with #2
• Summary: List used when VBox more
appropriate
• Description: A List control has lots of code
dealing with selecting items, clearly, this is not
about item selection
• Type: Performance, Maintainability
• Rule: Never use a List based component when
list functionality is not needed.

13. #3
<mx:Script>
<![CDATA[
private function
setData(un:String, pw:String):void{
username.text=un;
password.text=pw;
}
]]>
</mx:Script>
<mx:TextInput id=quot;username“ />
<mx:TextInput id=quot;passwordquot; />

14. What is wrong with #3
• Summary: Properties are set on
controls, when data binding would be better
• Description: Setting properties on controls
• Type: Maintenance, Development Time
• Rule: Modify the Model, Let the View Follow

15. #4
Rule4.mxml

16. What is wrong with #4
• Summary: Views events handled in top level
component
• Description: View is dispatching an event
which is handled by a controller by passing
event data back to view
• Type: Maintenance, Separation of Concerns
• Rule: Always handle events as locally as
possible

17. #5
<mx:VBox borderStyle=quot;solidquot;
borderColor=quot;#00000quot;
backgroundColor=quot;#FFFFFFquot;
width=quot;200quot; height=quot;100quot;>
<mx:Text text=quot;{bodyText}quot; width=quot;100%quot;
height=quot;100%quot; />
</mx:VBox>
Rule5.mxml

18. What is wrong with #5
• Summary: Inappropriate container nesting
• Description: Additional containers added for
styling, not for child layout
• Type: Performance
• Rule: If you have a container with only one
child, you are usually doing something wrong.

19. #6
<mx:Application
xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;
xmlns:comp=quot;*quot;>
<comp:ChooseMenu id= quot;chooserquot; />
<comp:DisplayMenu
menuForDisplay=quot;{chooser.menuGroup.selection.label}quot;
/>
</mx:Application>
Rule6.mxml

20. What is wrong with #6
• Summary: reaching into a child of a child
• Description: Components should interact with
their children, not their children’s children
• Type: Separation of Concerns, Encapsulation
• Rule: Two dots and your out

21. #7
<mx:LinkButton label=quot;{labels.ProcessStatus}quot;
enabled =quot;{(gridTests.selectedItems.length==1
&amp;&amp; (hasRight ||
(gridTests.selectedItem.StatusCode!='XX'
&amp;&amp;gridTests.selectedItem.StatusCode!='XY')))?
((gridTests.selectedItem.IsDerived=='n')?
(gridTests.selectedItem.StatusCode!='YY'&amp;&amp;
gridTests.selectedItem.StatusCode!='YX' &amp;&amp;
gridTests.selectedItem.StatusCode!='XYX'):false)
:false}quot;
click =quot;setTestStatus(event);quot;/>
Rule7.mxml

22. What is wrong with #7
• Summary: unreadable code
• Description: Use functions, not complex
binding expressions
• Type: Maintainability
• Rule: Being too clever makes you a dumb-ass

23. Everyone Writes Bad Code -
sometimes
• If you spend some time in the SDK source
code, you can find gems like this:
var changeCount:int;
changeCount=Math.max(1,getStyle(quot;horizontalChangeCountquot;));
if (changeCount * 0 != 0){
changeCount = 1;
}

24. Rules To Live By
• Its never appropriate to use a container when
they will never have children.
• Never use a List based component when list
functionality is not needed.
• Modify the Model, Let the View Follow
• Always handle events as locally as possible
• If you find you have a container with only one
child, you are probably doing something wrong.
• Don’t be a dumb-ass
• Flex isnt broken, you are.

25. Questions