How not to code Flex
                     Applications
                 Tips and Tricks to keep you from
                 ...
Who Am I
   Jeff Tapper (jtapper@digitalprimates.net)
   Senior Consultant – Digital Primates IT Consulting
    Group
 ...
Who Are You?
• Developers who…
  – are open to learning
  – Have some experience with Flex
  – Have a sense of humor
• If ...
Agenda
•   What is bad code
•   Why do developers code badly
•   Bad Code Samples
•   Rules to Live By
•   Questions
What is Bad Code
• Bad code is…
  – Code which doesn’t meet the needs of a project
     • Efficiency
     • maintainabilit...
Why do developers code badly?
• Lack of Time
• Lack of Knowledge
• Lack of Caring
Some of my bad code…
public class XMLListener extends
  EventDispatcher
{

// FIXME! - JT - yes, i know this is
// not the...
What are the consequences
• Bad code can lead to
  – Delays
  – Project failure
  – Job loss
  – Death
Sample 1
<mx:VBox xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;>
  <mx:TextInput id=quot;usernamequot; width=quot;150q...
What is wrong with #1
• Summary: Inappropriate use of container.
• Description: <mx:Image> should be used to
  display an ...
#2
Main App
<mx:List dataProvider=quot;{ac}quot;
  itemRenderer=quot;component.ItemRendererquot;
  selectable=quot;falsequ...
What is wrong with #2
• Summary: List used when VBox more
  appropriate
• Description: A List control has lots of code
  d...
#3
<mx:Script>
<![CDATA[
private function
  setData(un:String, pw:String):void{
  username.text=un;
  password.text=pw;
}
...
What is wrong with #3
• Summary: Properties are set on
  controls, when data binding would be better
• Description: Settin...
#4




Rule4.mxml
What is wrong with #4
• Summary: Views events handled in top level
  component
• Description: View is dispatching an event...
#5
<mx:VBox borderStyle=quot;solidquot;
  borderColor=quot;#00000quot;
  backgroundColor=quot;#FFFFFFquot;
  width=quot;20...
What is wrong with #5
• Summary: Inappropriate container nesting
• Description: Additional containers added for
  styling,...
#6
<mx:Application
  xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;
  xmlns:comp=quot;*quot;>

  <comp:ChooseMenu id= q...
What is wrong with #6
• Summary: reaching into a child of a child
• Description: Components should interact with
  their c...
#7
<mx:LinkButton label=quot;{labels.ProcessStatus}quot;
  enabled =quot;{(gridTests.selectedItems.length==1
  &amp;&amp; ...
What is wrong with #7
• Summary: unreadable code
• Description: Use functions, not complex
  binding expressions
• Type: M...
Everyone Writes Bad Code -
               sometimes
• If you spend some time in the SDK source
  code, you can find gems l...
Rules To Live By
• Its never appropriate to use a container when
  they will never have children.
• Never use a List based...
Questions
Upcoming SlideShare
Loading in …5
×

How Not To Code Flex Applications

5,157 views

Published on

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

Published in: Technology
2 Comments
13 Likes
Statistics
Notes
  • These are bad examples that I think you learned yourself, rather than from peer review. Most newcomers won't pick up these bad habits that you demonstrate. You might be doing a disservice to the community by even showing them. Clean it up or take it down.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • you can find all the code on my blog http://blogs.digitalprimates.net/jefftapper
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,157
On SlideShare
0
From Embeds
0
Number of Embeds
1,030
Actions
Shares
0
Downloads
0
Comments
2
Likes
13
Embeds 0
No embeds

No notes for slide

How Not To Code Flex Applications

  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

×