• Save
How Not To Code Flex Applications
Upcoming SlideShare
Loading in...5
×
 

How Not To Code Flex Applications

on

  • 6,998 views

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

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

Statistics

Views

Total Views
6,998
Views on SlideShare
5,977
Embed Views
1,021

Actions

Likes
13
Downloads
0
Comments
2

11 Embeds 1,021

http://blogs.digitalprimates.net 872
http://www.digitalprimates.net 114
http://www.slideshare.net 23
http://geekbot.net 3
http://webcache.googleusercontent.com 2
http://www.ravenzh.cn 2
http://www.gostudy.ca 1
http://blogs.digitalprimates.com 1
http://www.enter-system.com 1
http://209.85.195.132 1
http://h3ll0.hellogroup.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • you can find all the code on my blog http://blogs.digitalprimates.net/jefftapper
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

How Not To Code Flex Applications How Not To Code Flex Applications Presentation Transcript

  • 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
  • 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
  • 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
  • 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 • maintainability • Time to develop – Code which doesn’t make sense
  • 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 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;
  • 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;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
  • 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.
  • #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
  • 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.
  • #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; />
  • 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
  • #4 Rule4.mxml
  • 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
  • #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
  • 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.
  • #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
  • 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
  • #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
  • 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
  • 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; }
  • 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.
  • Questions