Code Zen

I have had a few conversations with some fellow developers here and there (most often with Mat) around code quality, and sometimes I get really frustrated to see what passes for “Good enough for now” code. In user interface development, its very easy to confuse all work with all visually displayable features. But when you are going to live with the code for a while or this code is going to be the foundation of later features, how can you not track code quality?

And of course there are extremes to that argument. I have worked with enough wannabe-architects who want the code to be pristine and who would much rather write their perfect piece of software no matter what the cost (in terms of time, features dropped or developer-pay) is. They should be tarred and feathered cause they weaken the valid calls for code quality.

But there has to be a middle ground here. The problem is well-written code is hard to quantify. Features are blessed with visibility but architecture isn’t. I had a conversation with a friend yesterday on how I prefer being a developer to a designer since design is so subjective, and what I might think is wonderful design may be pooh-poohed by someone else (worse, my theoretical manager), but code either works or it doesn’t and thats instant feedback.

Software architecture or “well-written code” seems to suffer from the same problem of subjectivity as design to some extent. And if you are fortunate enough to actually have a conversation around code quality (and I dont mean in the theoretical sense but you actually sit down and review what you have written), its lack of visible benefits to the product makes it one of the first things to be dropped when trying to make deadlines.

How do you quantify code quality then? As a developer I can tell you it has real returns. In my (Flash) world it sometimes translates to faster load times, less taxing of the CPU, smaller number of classes to be maintained, but its really hard to measure. How do you say the swf weighing 300k is worth the extra couple of weeks than a swf weighing 600k that was never written but would have if checks on code quality weren’t there. How do you measure against something that never existed ! Worse, how do you track that when there is no feature that maps to lighter swfs ?

And then there are the the really invisibles: dead code paths within code, extra classes that you dont use or are so badly written that they are such pain to work with that other developer on the project just writes new classes with the same functionality? How do you check such things? How do you justify investment in tools that enable high quality code ?

Heck, if you had to justify version control, how would you? Thank God some things like that dont have to be justified anymore but when will that stature be given to tools like Review-Board. Is code quality just a developer itch ?

Do you track code quality ? How ? Do you use any particular tools ? Do you have coding standards ? Please share your thoughts here, cause I am really curious.

Does good code-base just accidentally happen to get written or is there a process to get to it ?

I have this love/hate thing going with Flex off late (if you know me personally, this would be no surprise to you). While I do love the Flex IDE with code completion and language intelligence, the Flex apps that I see on the web are a far cry from the kind of experiences that got me into Flash. So when I heard Keith Peters, aka Bit-101, gave a talk on “Bringing the Flash back into Flash” at Flash Forward ’08, I pinged him over Twitter asking him if he could share what he presented (as I am sure others did as well). So he did and it was a good read, I strongly recommend reading it here.

Having worked a lot with both technologies, I kind of feel let down by both of them just about as much. Unlike Keith, the experience I would like to see isn’t the ostentatious experiences that made 2advanced and such studios famous. While they definitely caught the eye, the crazy zap zoom effects wear thin on the second or third visit. The experience I would like to see Flash/Flex enable is closer to the experiences that Apple seems to enable (disclaimer: I am no Apple fanboy, and find a lot of things they do completely wrong). They are simpler effects but dont make you stop doing what you are doing and wait till the animation ends. I love my IPhone and just compare the experience there to any other Flash experience on a RIA. Both Flash and Flex fail pretty bad on that front. Here is why:

Flex 2/3:

• Poor user experience by default

I dont get it how the core Flex 3 experience is acceptable by Flex developers. Non scrolling lists ? C’mon ! No control over itemRenderers in List controls (can you grow one’s width and height without having it clipped off by its neighbour ? ). Hacks to get any kind of custom Tooltips ? These are few in a long list of gripes I have with the framework

• Really hard to extend core components

Its really amazing how hard it is to extend any Flex component, so much so that entire frameworks have been built just to do that (read about OpenFlux here). Flex 4 promises to ease this but thats still a year away.

• Tightly coupled framework

It really kills me how tightly coupled the Flex framework is. There is no way to use, for example, just the collections framework without pulling in the UI framework. Why cant dataBinding be used in pure AS3 projects ?

• Transitions/Effects an afterthought

Out of the box, Flex has no effects or transitions built in. So you have to explicitly create transitions but I wish out of the box some effects were enabled.

• File Size

The huge swf size of a Flex app makes it unusable for any kind of widgets or smaller dimension swfs, and Flex 4 will not change this (their roadmap states that Flex 4 files will be around the same file size as Flex 3). The size of the swf goes beyond the load time. Heavy core objects mean they are more taxing on your CPU, which explains why complex animations with more than a few UIComponent objects stutter.

Flash

• Really poor code editor

The quality of the code editor is really poor in Flash, enough for me to never use it.

• Version control nightmare

Any code within the timeline is a nightmare for version control so you have no idea when your project is a few months old what the changes were. Same thing with any changes to a graphical element.

• Write everything from scratch

I am not a fan of the Flash components architecture, which offers less capabilities than the Flex component set. So I end up writing components from scratch.

So what I am really looking for is a framework I can use in Flex Builder that is lighter than Flex and is more expressive by default. I have been working on a project that may enable those features that I am hoping to release soon, so do stay tuned.

One is such a lonely number ;). This weekend I launched a new blog:The ‘Pit Stop at http://arpitmathur.com. Unlike Code Zen (this blog), where I have tried really hard to keep personal commentary to a minimum and make it as developer focused as I could with a lot of source code and tips for web development, the new one is going to be more on my opinions on (among other things) the social web and the evolution of the online experience from a geek’s point of view. More on the why here. In the meanwhile, this blog will remain the outlet for all my developer focussed stuff (I am still a coder at work).

Do let me know what you think and please add The ‘Pit Stop to your feed readers.

Cheers

Yup. This blog is now aggregated by Guy Kawasaki‘s latest project: alltop.com. Specifically, http://ria.alltop.com, the channel dedicated to Rich Internet Applications. I share the space with some pretty big guns in the RIA domain, so thats pretty exciting :). For those not in the know, alltop is a site aggregating top shelf content from across the web across different subjects, and present them in an easy to scan layout (very popurls, which I love 😉 ). So do check out the different channels on alltop.com and see if you like it.

Dayum, have to up the quality of my posts now. No pressure, no pressure …

Flash’s crossdomain access policies have always been one of the things developers have always complained against. The specification keeps changing, even with minor updates to the Flash Players (actually I dont really know what counts as a major release in Flash Player land, all releases are point-point-point releases like 9.0.124.0, making them look really minor). I lost more than 2 days on cross domain issues last week before I finally figured it out. So I figured blogging this could help someone else not waste as much time as I did.

If you are reading this post, also check out my previous crossdomain entry as well, which talks about setting up the Flash logging as well as the newly introduced content-type strictness that broke my last app.

In this particular entry I want to talk about how Flash handles HTTP 302 headers while loading images using a Loader, as well as certain tricks to debug crossdomain related issues. While Flash does load images from outside its security sandbox, it does not give you access to the BitmapData of those images which is what I was trying to do.

Whats HTTP 302 ?
HTTP 302 http header tells the browser that the content has been moved temporarily to a different URL. When the browser receives this message it immediately tries the new url. The header is explained in more detail here.

Why is this a problem ?
The problem occurs when you try to load a resource from a url that may redirect to a url outside the security sandbox of the swf. Although Flash automatically calls the new url, it does not use any loaderContext. The LoaderContext object is the optional argument to a URLRequest when making data request calls using a Loader that tells Flash Player to look for a crossdomain.xml file. The first thing that usually causes errors is that the developer forgets to pass this argument. As far as I remember, AS2 used to look for crossdomain files automatically when making cross-domain calls but AS3 does not. But even when you pass this parameter to a Loader’s load function, if the url automatically redirects using 302, the Flash player does not use the LoaderContext in the subsequent call.

The solution:
The way to resolve this (and I only found this after way too long), is to look at the url of LoaderInfo object of the Loader object (Loader.contentLoaderInfo). This data is populated with the new redirected-to URL at the time when the Loader fires the HTTPStatusEvent (and all events following that). Your code needs to check if the final url was different from the original url and if so, load the new URL again, using a LoaderContext that makes the loader look for a crossdomain.xml. The code looks something like this:

[AS]

public function ImageLoadTest(){
l = new Loader()
l.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete)
addChild(l);
load(imageURL);
}
private function onLoadComplete(event:Event):void{
try{
trace( Bitmap(l.content).bitmapData)
}catch(e:Error){
trace(‘Cannot access bitmap of image due to crossdomain issues’);
load(l.contentLoaderInfo.url);
}
}

private function load(url:String):void{
var context:LoaderContext = new LoaderContext(true)
l.load(new URLRequest(url), context);
}

[/AS]

This seems a little idiotic, and makes every load takes twice as long, not to mention consume twice the bandwidth. If anyone knows another way to do this, let me know. However if you do not know the location of the final server up until the time of loading, then this seems to be the only way.

Setting up Flex Builder projects to surface cross domain errors:
The worst part of this bug is that it will never surface when you are developing the code using Flex Builder, since by default, Flex Builder uses the file protocol (file://) to reference the html and swfs, and at this time, all http calls regardless of domains, are allowed. So this bug came up only during the QA phase and seriously jeopardized my project. The way you *should* develop Flex/AS3 projects in Flex Builder is to switch the location of the output folder of your project to the documentRoot of a locally running HTTP server (Macs come with Apache 2 built in, and its an easy install for Windows), and then use the http:// protocol to reference the file. Make sure to change the host file on your machine to reference that page as a subdomain of the project’s final web location. Now all security sandbox errors will come up as you develop your app in the trace console window of Flex Builder

Verify crossdomain files with Charles:
I use Charles, an http proxy, to monitor the http behavior of my application. Charles comes with a very nifty feature called local mappings that lets you load local files when the browser makes certain calls. I ended up using this to load crossdomain files sitting on my desktop everytime Flash made certain http requests for them, really a great tool considering the schema has changed a bit in the last few versions of the Flash Player.

And of course enabling Flash Player logs is absolutely essential while debugging Flash Player cross domain issues.