Vivisecting Media

Adobe Edge Article: Coding Standards

A few months ago I was asked to write an article for the Adobe Edge Newsletter on a topic of my choosing. After spending a bit of time thinking about what moved me at the moment, I decided to sit down and write about the need for RIA and web app developers to invest time into research, development and adoption of code standards. This week, the article “Coding standards: What are they and why should you use them?” went live and I want to share the link with everyone.

One of the challenges of writing an article like this is first defining your audience and then determining how to cover the topic in the alloted text. The Edge sets a word count guideline and this limits how deep I could or in this case could not go. Personally, I fully support the word count guide because this both focuses the topic and generates more digestible articles. Yet, on a topic as broad and as deep as this one I had to focus more on an introductory guide to coding standards and adoption.

The second challenge is determining your audience. My goal was to create an article that worked for both readers who have never heard of coding standards, and readers that have been using them for years. I always try to create a broad stripe across my reader base because I want to inform as many people as possible. This thought process was kind of beaten into me during my years as a Technical Support rep and team-lead at Macromedia. There is nothing like having to write Tech-notes and email support to teach you how to write to a broad audience.

The main point I wanted to get across with this article is that coding standards are actually much more then just code formating. Code formatting, or code conventions, really focus on how you name variables, methods, classes, etc. Yet, this is just the tip of the coding standards iceberg. One of the least discussed aspects of coding standards is the adoption and implementation practice of code design patterns. As developers, we need to better understand how adoption of patterns, frameworks and micro-architectures help structure our code. Not only do they provided rapid development but they also help guide us into a more structured development process.

As RIA and web application development expands we are seeing a demand for much more complex and scalable applications. Scalability is not just about user load but includes further expansion of features and performance over time. More and more developers are being asked to create applications that have a lifespan longer then just a few months. Some people may gaffe at that comment, but if you look at a lot of “rich” applications up to this point, most have been for marketing campaigns and advertising. The nature of these kinds of projects do not focus on lifespan and version updates. Their focus is on making them work in a short time to meet the marketing deadline and then get them out the door.

With the trend of Web 2.0 (which I hate as a term), the web world is quickly being pushed into the long standing Desktop Software model. This is forcing a lot of us to re-evaluate how we design and develop our online enabled applications. This is a scary yet wonderful time in our industry as we are rapidly adopting and developing new ways of web application design and construction. Due to this push I feel its time to help expose more of us to coding standards. My article is more a call to arms then a definitive guide to coding standards implementation. If you are interested, take a read and add your thoughts to the comments…

VivMedia Code Library: Version 0.02 Released

Its been a busy few weeks for me (with work and personal projects) but I am happy to say that version 0.02 of the VivMedia library is now available. This update includes a fully automated Unit Test suite for all the code except the Local Connection Manager. Trying to automate the LCM is going to be coding feat in itself, so right now it is being tested the old fashioned way a.k.a. by hand. There are a few minor updates to the existing code such as streamlining how the HashTable clones the internal Array and some other minor updates to support automated testing. As usual the code is fully ASDoced and generated docs are available with the ZIP download.

The big change is this version is the addition of the new SelectionController and ISelectable interface. The SelectionController is a manager that allows you to group any number of items that implement the ISelectable interface and then treat them as a Radio Group or multi-selectable group. With the controller you assign items to groups and then you can use the controller to select and deselect the items.

A great example of this code is how I handle image highlighting in the Photoslider. Each of my image thumbnails implement ISelectable and then when a user clicks a thumb it calls the SelectionController.selectItem() and passes itself as an argument. The SelectionController then sets selected on all the thumbnails in the group, setting true for the passed in item and false for the rest. I plan on doing a full tutorial in the near future so keep an eye out for it. Enjoy!

Was Amazon.com hacked? [update: probably not]

Update: After further scrutiny it looks like the DNS whois was read wrong by us and we all jumped to conclusions. The response back was any domain with Amazon.com in the name. If you look at the last one then you can see all is on the up and up. So it probably is just a bad update… we shall see what is mentioned later.

Today’s big news in the tech industry was Amazon.com’s US outage. If you haven’t heard about it Amazon.com US, went down at 10:27am PST on June 6th:

An Amazon spokesperson said this afternoon, “Amazon’s systems are very complex and on rare occasions, despite our best efforts they may experience problems. We work to minimize any disruption and to get the site back as quickly as possible.”
— Amazon’s Web Site Goes Down: An ‘Unplanned Event’ on New York Times Bits by Brad Stone

But what is the real cause of this? Some sys admin friends of mine where trying to shop at Amazon when it went down. Being what they are they took a peek under the hood and it looks like the DNS was hacked. When a whois was run on Amazon.com this is what was returned at 11:20am PST:

$ whois amazon.com

Whois Server Version 2.0

Domain names in the .com and .net domains can now be registered with many different competing registrars. Go to http://www.internic.net for detailed information.

Server Name: AMAZON.COM.ZZZZZ.GET.LAID.AT.WWW.SWINGINGCOMMUNITY.COM
IP Address: 69.41.185.219
Registrar: INNERWISE, INC. D/B/A ITSYOURDOMAIN.COM
Whois Server: whois.itsyourdomain.com
Referral URL: http://www.itsyourdomain.com

Server Name: AMAZON.COM.MORE.INFO.AT.WWW.BEYONDWHOIS.COM
IP Address: 203.36.226.2
Registrar: TUCOWS INC.
Whois Server: whois.tucows.com
Referral URL: http://domainhelp.opensrs.net

Server Name: AMAZON.COM.IS.N0T.AS.1337.AS.WWW.GULLI.COM
IP Address: 80.190.192.24
Registrar: EPAG DOMAINSERVICES GMBH
Whois Server: whois.enterprice.net
Referral URL: http://www.enterprice.net

Domain Name: AMAZON.COM
Registrar: NETWORK SOLUTIONS, LLC.
Whois Server: whois.networksolutions.com
Referral URL: http://www.networksolutions.com
Name Server: UDNS1.ULTRADNS.NET
Name Server: UDNS2.ULTRADNS.NET
Status: clientDeleteProhibited
Status: clientTransferProhibited
Status: clientUpdateProhibited
Updated Date: 28-mar-2008
Creation Date: 01-nov-1994
Expiration Date: 31-oct-2017

Last update of whois database: Fri, 06 Jun 2008 14:15:03 EDT

This just reeks of the same thing that happened to Comcast. If you read the full article at Wired, the hack sounds exactly the same. It will be interesting to see what Amazon has to say once the dust settles…

The Extendable Singleton Pattern

The Singleton pattern is one of my favorite little patterns that can be used in any language that provides static typed properties/methods. There are many different uses of the Singleton and just as many ways to implement them within code. In this post I am going to first introduce the basic Singleton pattern, explore how it is most often defined in ActionScript (including tips on protecting the Singleton instance), then talk about how to create an extendable Singleton and why on earth you would want to. If you already know the principles of Singletons, skip ahead to the second section of this post “Defining Singletons in ActionScript”.

Read the rest of this entry »

VivMedia Code: the HashTable

One of my favorite, and until recently, most used classes in Flex was the ArrayCollection. The ArrayCollection is a powerful data-structure that acts similarly to an Array but provides an extended API that provide shortcuts to data access. A few of the more used accessors are contains(), which tells you if the item is in the ArrayCollection and getItemIndex() which tells you where the item is in the ArrayCollection.

The ArrayCollection is much more then this too. It also has the ability to tie directly into FlexData services and then dynamically page the data into the ArrayCollection instance as data is requested. The ArrayCollection is also the complex data structure that is generated by the HTTPService (when parse to Object is set) if you have more then one child node in an XML structure. If you haven’t used it yet, the ArrayCollection is a very powerful data-structure.

Of course, with this robustness comes limitations. First off, its Flex only. This means that if you are used to Flex development but find yourself on an AS3 only project, you can’t use the ArrayCollection. Another big one is performance. As you begin filling the ArrayCollection up, queries into the data structure start to slow down, and I mean significantly slow down. If you have hundreds of objects in the ArrayCollection, the performance for lookup and access are way slower then just looping over an array and finding it the old fashioned way. A more minor issue is when trying to manipulate data dynamically you start having to write some pretty ugly code such as to prevent null reference errors:

// remove the item if it exists
if(myCollection.contains(objectNeeded))
{
	myCollection.removedItemAt(myCollection.getItemIndex(objectNeeded));
}

Its not that bad, but as you get more and more complex accessing structures you start longing for the simplicity of an Array. This is where the HashTable came into the picture. I wanted something that performs like an Array, yet has the API data accessors that can simplify development. Yet, there was one more thing that I wanted, the ability to map key’s to values like in an object or Dictionary but still maintain Array like access.

From this need came the HashTable. In the past I had built multiple solutions similar to the HashTable but they typically where one-offs that lived in the code the functionality was needed. I never got around to formalizing it into a proper data-structure. I finally got the chance and built it from the ground up for my Photoslider app. So, let’s talk about the HashTable…

Read the rest of this entry »

VivMedia Code: The EventBroker

The EventBroker, in the Vivisecting Media Library, is an Flash Event routing utility that can be used in any ActionScript 3.0 or a Flex Project. The code was developed to be SDK independent so that it does not rely on any Flex classes. The EventBroker is designed to solve the challenge of passing Events to objects that may not be aware of the dispatching item or are not within the parent/child hierarchy of the Event bubble system. In this post I will discuss the Flash Event Model, what limitations are part of the Event Model, how the EventBroker resolves these issues and considerations when using the EventBroker.

Read the rest of this entry »

Vivisecting Media Code Depot launched…

A while back I was doing some research into the Flash Local Connection and the ability to retain object typing across Flash applications. From this research came my Local Connection Manager (LCM) which I then hosted the source from my own server. Over the last few months I have also begun developing a set of helper classes that provide functionality that I tend to need from project to project. My goal with both the LCM and these other classes is to release them all under Mozilla Public License (MPL) and make them available to anyone that wants to use them. As luck would have it, a few of the projects I am working on are allowing me to use my MPL versions of the code and these means I have to make the code publicly available. This was the motivation I needed to get my Google Code repository set up.

Right now there are only three “tools” in the Vivisecting Media Code Framework but this toolset will grow over the coming year. I actually have a lot more in the wings but I want to roll them out in a logical order. One of the driving forces for this code is the Photoslider application that I am working on. Unfortunately this means that some of my core code is still pretty application specific and wouldn’t make sense to release yet.

The other driving force is a long term strategy that I have been talking about with some Interactive Architects in which we want to create a more robust development platform for RIA developers. Of course this kind of thing requires a lot of up-front planning and until that kicks in I may hold back on some code until the order makes sense. Don’t want to put the cart in front of the horse.

Not only will I be releasing “framework” code but I have some other tools that I want to release under MPL. Those may come out as just SWCs and not the full source, but I haven’t decided the full release strategy for that yet.

So, what is currently in the repository? As I mentioned about there are currently three tools:

Local Connection Manager
The Local Connection Manager provides a simpler interface to the Flash Local Connection system. This class provides all the default error and event handling for establishing a connection and also enables developers to retain strong types across Flash Applications. This means that if you create a custom MyObject and send this through the LCM then the receiving Flash app will parse the sent data as a MyObject object. The LCM also handles error messaging better so that if the an error occurs such as unknown type in the callee application then it the LCM will inform the caller Flash app that an error occurred. If you have ever worked with Local Connections then you know this kind of thing can be a pain in the arse. I have some other ideas for this class so expect future changes. (Works with AS3 and Flex projects)

Event Broker
The Event Broker is based partly on the Observer pattern. If you do a lot of Flex development then you are pretty familiar with the ActionScript 3.0 event model. One of the challenges with the Event model is that to receive the objects Event you either need to know the location of the object so you can register to the event or be in the Events bubble chain. In most cases this is not an issue, but with complex layout or dynamic environments, hooking into the event chain can be a challenge. The EventBroker handles this by providing a single point of contact that any object can both subscribe and broadcast through. This enables the developer to handle event routing for those special cases. (Works with AS3 and Flex projects)

Hash Table
The HashTable is very similar to the Flex ArrayCollection (AC) but doesn’t have a lot of the overhead that the AC adds. That and you don’t need the Flex SDK to use the HashTable. The HashTable allows you to add key/value pairs using any object type as a key. You may ask, why not use a Dictionary? Well, the HashTable adds a lot helper functionality that the Dictionary doesn’t have. Such as isEmpty, getAllKeys(), getAllItems(), removeAll(), removeItem() and length. I can’t even count the number of times I have had to create a dual array to handle some of these tasks so I finally got around and wrote an official HashTable. (Works with AS3 and Flex projects)

These are just brief descriptions of what the tools do, I plan on dedicating a full post to each tool to describe the functionality in-depth, show examples and also explain some gotchas when using them (nothing is ever perfect!). I am looking forward to this code project!

Flex 4: New MXML States Specification

Ted over at OnFlex posted a link to the new Flex 4 MXML states spec and I sat down to read it. After finishing the spec, I thought long and hard about it and finally decided to add my own thoughts about the new spec to their wiki. It is really awesome that Adobe is starting to open up the specs to the public. It gives developers a chance to see where the technology is going and also allows them to give feedback to the team. Anyway, I am reposting my comments here so that you all can see what I had to say:

After my first in-depth pass of the spec I have some concerns around the developer workflow and the possible complexity of the MXML generated with the new inline states. I agree that the current Flex state mechanism is hard to read, limited and can be overly complex to follow. Looking at the new proposed methodology I feel the solution has the potential to become just as complex, if not more so, and could make the code harder to follow for developers with larger components. An example of this kind of complex situation would be creating large forms that dynamically change their field structure dependent upon how the user answered previous fields in the form. On a project I worked on we relied heavily on states to solve this issue because we constantly had to show/hide fields and extend forms based on the user selections.

My first concern is that by moving into an inline methodology making changes from code view becomes harder to traverse and manage overtime. The new inline syntax requires the developer to look for state properties and tags within the whole of the MXML layout to determine what is being show when and where. One of the benefits of the current syntax is that each state node clearly (more or less) shows what happens when each state is selected. With the new syntax the developer has to comb over all the code and then attempt to find all the references that define state layout. In many situations this can be overcome by componentizing the code to help alleviate the complexity of the MXML but with large forms this is not necessarily an easy or viable solution.

My second concern is based around state inheritance. I see that I can set includeIn/excludeFrom to multiple states or groups, but this means that I have to track all of the reparenting inline vs. using the classic “basedOn” inheritance approach. A benefit of the inheritance model is that if state A handles a complex reparentaing structure and state B is a simple change to state A, a developer can simply state the changes in state B and then say extend from state A. With the new syntax, a developer has to track all the iterations of A and verify that B is added to all the state A changes and then make sure the B changes are applied.

As you can tell, both of my concerns are focused on codebase management. With the push of RIA development we are now creating code bases that have to grow, mature and scale over time. The focus of maintenance and team growth on a project is becoming more important for development teams and as new developers are brought into the code base, readability and ease of maintenance is very important. If a new developer was assigned to edit a form using the new layout they would have to review all of the MXML layout to determine both how it is structured and how it evolves with state changes. If this state management is defined outside of the layout then in some ways it is easier to determine what is changing and when. I fully realize that the current states model needs to be redesigned but I feel moving to 100% inline solution is not necessarily the best answer and possibly a hybrid approach could help help manage code readability.

Part of my passion about states is that I was the QA engineer assigned to the first iteration of states when we were developing them for Flex 2. States are one of those concepts that are hard to grasp at first but then make a lot of sense and are incredibly useful after you get it. In fact, we used states all over the place on Scion.com and I think all of the dev team learned to both love and hate them. Let me know what you think about the proposed changes and if you feel strongly one way or the other I highly recommend commenting directly on the Flex spec!

Run and Debug Config for PyDev w/ Google Apps Engine

Now that I have PyDev running in my Eclipse the next big step was to get support for running and debugging the Google App Engine SDK. This will be a simple post since Josh Feth Suttgart already took care of figuring out, by far, the simplest and most robust way of building your run configuration in Eclipse. Follow his step by step instructions here:

Google App Engine & eclipse (PyDev)

Once you have configured your run environment his setup also allows for you to debug from the same launch profile. To debug you just use the Debug version of the launch profile, no changes have to be made! There are a few things to note about this configuration:

• When you start a run session this only starts the Google App Engine server. Unlike using Flex Builder or Aptana, this does not launch a browser window to your application path. You will need to open a browser window and then navigate to the localhost:[port] that you have configured. If someone knows how to directly launch to a specified path let me know and I will update this post.
• Since you are starting a server with your run session you need to stop the session before starting a new debug session (or visa versa). If you do not stop (terminate) the previous session you will get an error in the Eclipse console.
• The Google App Engine is smart enough to check touch times so when you update a file you can just refresh the browser (’course you probably know that if you did the gApp tutorial). This makes the workflow with PyDev really easy. Keep you browser window open and keep hitting refresh after any changes. Unless of course you are using a lot of JavaScript then you may need to clear you cache.

Have fun and let me know if you have any tips on improving the workflow!

Installing PyDev on OS X 10.5.2

Update: If you are receiving an error when attempting to point PyDev to the OS X 10.5 install of Python 2.5 and are looking for the proper path to fix the error, then feel free to skip my rant by jumping down to here.

During the weekend I decided to begin playing with the Google App Engine and see what all the hubbub was about. Like most developers I couldn’t get into the preview (yet) but I could download and run the SDK. The SDK is all Python, a language I knew a little about but never delved into. Actually, the only thing I knew about it was that whitespace matters and having a good IDE is critical. Knowing this I looked up IDE options and found a plugin called PyDev for my favorite IDE, Eclipse.

After taking a brief look at the feature set I saw the important ones; code completion, debugging, refactoring and I was sold. I downloaded the plugin into Eclipse 3.3.2 and fired it up. The fist first thing I tried to do was create a new project, when I tried that I got a message informing me that I had to define the Python interpreter settings before I could create a project. Okay, makes sense to me.

I looked up the help docs and it said to open Eclipse > preferences > PyDev > Interpreter – Python, choose new… from the Interpreters section and point to my Python install directory. I knew that OS X Leopard has Python built in so I look into the usual locations such as ~/Library/, /Library/ and /System/. Nothing obvious jumped out so I did a quick search on the web and find the default install location is:

/System/Library/Frameworks/Python.framework/

Awesome, so I point the Interpreter to the Python exec yet it won’t let me choose it. Well, it is a symlink so maybe I need to go to the actual exec. I know that OS X has 2.5 installed so I navigate down to:

/System/Library/Frameworks/Python.framework/Versions/2.5/

and try to choose the Python exec located there. It accepts this location and then when I select it I get the “Error getting info on interpreter” dialog. What the hell does that mean? It has some notes in the dialog that says that common errors include specifying an invalid interpreter and/or spaces in the Eclipse path. Oops. I have have a space in my Eclipse path, I fix it then try again. Same error. Hmmmm….

There is also a bug documentation URL referenced in dialog so I do some searching and it tells me that if you get this error you are pointing to an invalid interpreter. Well duh, the dialog told me that much. What frustrates me is that the bug URL has the people responding back with “Hey, I fixed it.” with no statement on how, just that they fixed it! Okay, that’s not helping… time to do some testing.

I try using 2.3 to see if that works. Nope, same error. Okay, what other paths are there? I do some more digging and find out there is actually an APP file located at:

/System/Library/Frameworks/Python.framework/Versions/2.5/Resources/

I try both the Python.app and Python Launcher.app. This time a get a different error:

Check your error log for more details.

More info can also be found at the bug report:
http://sourceforge.net/tracker/index.php?func=detail&aid=1523582&group_id=85796&atid=577329

java.io.IOException: /System/Library/Frameworks/Python.framework/Versions/2.5/Resources/Python.app: cannot execute

WTF!?!? I do more digging and people are having the same issue but NO WHERE IS IT DOCUMENTED ON HOW TO FIX IT!?!?! Okay, deep breaths… I want to use this plugin and people have it working in OS X and swear by it, I must prevail!

I do some more searching and stumble upon a forum that talks about getting PyDev running with Maya.

– SOLUTION HERE –

Update: Gabriel Lamounier provided the direct path to Python for Leopard in the comments section for my original post. He points out that the correct path is:

/System/Library/Frameworks/Python.framework/Versions/2.5/bin/python2.5

I verified it and PyDev does like this path. Thanks Gabriel, I swore I tried this path during my testing but I must not have, after multiple hours of digging it’s sometimes easy to miss the semi-obvious. So, the easy answer is… use this path when setting up your Python interpreter. For grins, read the rest of the post to find out the “hack” way I came upon.

It seems that you cannot point to the APP but you have to point to the contents in the APP which contains the Python interpreter. sigh Seriously, who would have thunk it? So, the path for the Python interpreter in OS X 10.5 is:

/System/Library/Frameworks/Python.framework/Versions/2.5/Resources/Python.app/
Contents/MacOS

Remember, an OS X APP is really just a fancy Directory. But wait, there’s more! You can’t actually navigate to the contents of an APP file from your standard OS X open dialog. Well thank god for kessaris who posted the Maya solution because he mentions that when you are in the open dialog you can press SHIT-CMD-G SHIFT-CMD-G to open a URL dialog that allows you to paste a path in. In most cases you have to Right click (CMD-Click) > Paste… to get the path in, but once you do you will see the Python interpreter in the MacOS folder. Select it and it works! You are now off to the Python races.

I want to give a big shout out to kessaris, whoever you are, for posting this incredibly helpful reply. Also, I hope this post helps someone install PyDev, because it really, really is a great IDE. More on PyDev and the Google App Engine coming soon!!