Flex, RIA, as3

I’ve been working on optimizing some javascript code these days and I came across a technique for optimizing long loops called Duff’s Device or Loop Unwinding which seems pretty well known in the javascript world but I haven’t seen anyone use it in actionscript code.

The basic idea is that there is a small overhead associated with executing the loop body, so if we unfold the loop in a way that it does the work of 8 iterations in 1 iteration, we can save some time. My tests show that in long enough loops this technique can give us 8x to 10x performance gain.

Here are the results of my tests using Grant Skinner’s performance test harness …

Here are the actual test cases .. I borrowed the implementation from Miller Medeiros’ javascript test cases and Jeff Greenberg’s original javascript implementation …

Flex, RIA, as3

I haven’t talked much about our startup project factors on this blog yet, but you will hear more and more about it from me over the coming weeks. Today, we’re open sourcing a very small but quite interesting part of the factors web client code. The client is built mostly in AS3 using an in house framework we call crayons. Crayons provides an application architecture as well as a library of user interface components along with a component architecture, you could think of it as a mixture of functionality provided by flex framework and cairngorm, but several times lighter since it only implements functionality we need for factors and doesn’t try to be too generic.

Among other things Crayons has a built in data binding framework which we’re open sourcing today. Data binding in crayons in based on Signals where an object dispatches a specialized ChangeSignal whenever a bindable property changes, for example the setter of a bindable property data in SomeModel object would look like this …

When an object signals a change in a property it has to pass in the old value of the property and the new value of the property. Unlike Flex, there is no [Bindable] metadata tag, an object can make one of its properties bindable by dispatching a ChangeSignal whenever that property changes. The ChangeSignal implementation is inspired by Jackson Dunstan’s TurboSignals instead of Rob Penner’s more flexible AS3Signals library because using a specialized signal made sense in this scenario .. just like flex, signaling a change in a property is something we do a lot in a crayons application, for example to signal change in model data or change in the property of a component, for data binding etc. so taking advantage of the speed of a specialized signal seemed reasonable. Also this especially helps data binding, since a Binding is really an implmentation of a ChangeSlot and Jackson’s already shown that such specialized slots are extremely fast. While in most cases its hard to justfy implementing a Slot interface just to add a listener and I would almost always go with adding a function listener, but in case of data binding since this is only used internally within the binding framework and the user of data binding is not bothered with it, implmentating a ChangeSlot was perfectly reasonable.

Now to use crayons data binding you can use a Binder object to bind a source ChangeSignal to a target property as follows …

The Binder class provides some other interesting apis to remove binding or to check if a binding exists. This binding implementation is heavily inspired from Eric Feminella’s implementation where he’s used as3signals. I refactored it for use with ChangeSignal and ChangeSlot and changed some other APIs for our needs.

That’s about it, you can get the complete crayons binding framework source code here on Github, do let me know what you think, any feedback would be very welcome.

Finally, I want to say thank you to Jackson Dunstan, Eric Feminella and Rob Penner who’s great work and research helped me implement this. I’ll buy you guys beer whenever we get a chance to meet

Flex, RIA

Update: Troy Gilbert suggested a much better solution for this in the comments below that uses -frame compiler option over the [Frame] metadata tag, I suggest you use his approach since it stops the compiler from bundling in Flex framework specific code like IFlexModuleFactory that you don’t really need.

Update: Troy further improved his class here

***

Today, I needed to create a preloader for a pure AS3 application compiled with mxmlc. I couldn’t find much documentation on the topic but this post by Keith Peters describes the solution in good detail, except his post is some what old and the code there doesn’t work with the latest compiler..

As Keith describes, the first thing you need to do to implement a preloader is move your application to the second frame of the movie, this is done by adding a [Frame] metadata tag above your document class and providing it with a factory class that will initialize your application, in case of Flex this factory is mx.core.SystemManager .. we will have to write our own.

Your document class would now look something like this …

Our ApplicationLoader factory class has to extend MovieClip (not Sprite) and has to implement the interface mx.core.IFlexModuleFactory (this is the main change since Keith’s post). In the below code, I’ve stubbed out functions from IFlexModuleFactory and you can leave the code as is for most applications, you will only need to change this if your application loads other SWF’s at runtime or if you’re building an AIR application.

When we compile our Example application the compiler will generate a class (you can see it with -keep) that subclasses our ApplicationLoader factory and implements some additional functionality .. an instance of this sits in the first frame of our movie, loads the second frame that has our application and shows a preloader while the application loads …

You may change the look of your preloader in the onEnterFrame method but since this first frame needs to load quickly keep it light and avoid using any classes that are not native to Flash Player.

Finally thank’s to Keith for his post that got me started and also for all the other cool stuff I’ve learned from him over the years.

Erlang, Flex, RIA

SWF Machine is an Erlang program I’ve been writing, to generate SWF files from Erlang. This program takes a custom instruction set as input and generates SWF binary instructions, which once saved in an SWF file can be run in the Flash Player, here’s a quick demo of SWFMachine in action …

A similar attempt by Takashi Yamamiya and the eswf library on google code were quite helpful in getting me started, so thanks to them for sharing.

Flex, RIA

I had the opportunity to present a 4.5 hr lecture on Building Rich Internet Applications at ACM’s Compute 2010 today. We started out by defining what an RIA is and exploring the various RIA platforms available, we then further explored the Flash Platform in more detail, wrote some experimental code to understand the internals of Flash Player, looked at Flex 4 and its various new features and also spent some time understanding the Flex Component Lifecycle

Here’s the slide deck from beginning of the lecture which tries to define what an RIA is and explores the architecture a typical RIA platform …