Cleaning up after closures in Flash

19 08 2011

If you haven’t experimented much with closures yet – whether in your Flash/Flex projects, Javascripting or while tinkering with Lua – it’s time to start. In case you’re a little nervous about those pesky memory leaks in Flash, here are some ways to cope.

Pampas Fractal

» 

Much of the following code is bundled into an example Flex project that compares the various closure techniques around a custom Timer class.

Check the code on Github.

What are closures?

Many people think of closures as anonymous functions – probably because that’s the common form they take – but they are more than that. They are scoped, inline functions that provide a “closure” over a collection of free variables (within the function scope).

Check out the Wikipedia entry on closures..

Why use them?

  • They allow the hiding of state (negating the need for maintaining async state in the class) as each closure defines its own variable scope that are available to all nested closures; and
  • Because they’re easier to follow than continually jumping to functions defined at a type-level.

Take a peek

In the below example, we have two closures – the first defines the userEvent property and someVariable, the second adds to that with it’s own scope of serviceEvent. You see how the inner closure has access not only to that state within itself, but also to that of the outer closure, as well as that of the init() function AND the class itself. Welcome to the scope chain. Read the AS3 docs on Function Scope.

public class SomeClass
{
	protected var view:ISomeView;

	public function init():void
	{
		var functionSaysSo:Boolean = true;
	
		userAction.addEventListener(UserEvent.LOGIN, 
			function(userEvent:UserEvent):void
			{
				//this is outer closure 
			
				//define a variable in the outer closure's scope
				var someVariable:String = "something";
			
				service.addEventListener(ServiceEvent.RESULT,
					function(serviceEvent:ServiceEvent):void
					{
						//this is the inner closure

						if (functionSaysSo)
						{	
							view.notify(userEvent.username, serviceEvent.result, someVariable);
						}
					});
				
				//async call
				service.start(userEvent.username, userEvent.pass);
			
			});
	}
}

Tip: If you find yourself contesting the readability assertion from before, don’t fret – it’s early days.

Cleaning up after yourself

Like any listener, using a closure as an event listener can create memory leaks if not properly cleaned up. Luckily, we have a few options up our sleeves to avoid this.

Use weak references? [Short answer: no]

Clean, simple and easy, we could simply add closures as weak references.

userAction.addEventListener(UserEvent.LOGIN, 
	function():void
	{

	}, false, 0, true);	

This keeps the code trim, however it introduces its own problems. If the variable you are listening to lives (is scoped) within another closure or a function definition, it will get cleaned up after the function completes (and before the event might fire). Without a strong reference to that variable, it is a target for garbage collection and you will end up with unpredictable results.

For example, in the following, there is nothing holding onto the timer instance to ensure after the function ends (and before the timer completes) that the timer will still exist and dispatch the TIMER_COMPLETE event.

public class SomethingWeak implements IDoesSomething
{
	public function doSomething():void
	{
		var timer:Timer = new Timer(1000,-1);

		//WARNING! Nothing is holding a reference to timer - GC candidate
		timer.addEventListener(TimerEvent.TIMER_COMPLETE, 
			function(evt:TimerEvent):void
			{
				//something happened!
			}, false, 0, true); 

		timer.start();
	}
}

1. Name your handlers

To improve on this, simply define your handlers locally, and you can remove them within your listeners:

» Aug 30: Updated to inline definition

public class SomethingNamed implements IDoesSomething
{
	public function doSomething():void
	{
		var timer:Timer = new Timer(1000,-1);
		
		var timerHandler:Function;
		
		timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler = function(evt:TimerEvent):void
		{
			//something happened!
			
			//cleanup after ourselves
			timer.removeEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
		});

		timer.start();
	}
}

2. Use arguments.callee to remove them during execution

Even better, we can take advantage of a little known feature in AS3 called arguments.callee, and not even have to name our function:

public class SomethingCallee implements IDoesSomething
{
	public function doSomething():void
	{
		var timer:Timer = new Timer(1000,-1);
		
		timer.addEventListener(TimerEvent.TIMER_COMPLETE, 
			function(evt:TimerEvent):void
			{
				//something happened

				//cleanup after ourselves
				timer.removeEventListener(TimerEvent.TIMER_COMPLETE, arguments.callee);
			});

		timer.start();
	}
}

3. Use type-level handlers to remove from separate call

Alas, what if you need to clean up based on another method or event later in the piece (say when a mediator is disposed)? You’ll need to define your handler at a type-level to retain a reference of it:

» Aug 30: Updated to inline definition

public class SomethingDisposable implements IDoesSomething, IDisposable
{
	//handler is now defined at a type (class) level
	private var timerHandler:Function;
	
	//we have to also scope the timer to the type level in order to remove listeners
	private var timer:Timer;
	
	public function doSomething():void
	{
		timer = new Timer(1000,-1);
		
		timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler = function(evt:TimerEvent):void
		{
			//something happened!
		});

		timer.start();
	}
	
	public function dispose():void
	{
		if (!timer) return;
		
		timer.removeEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
		
		//for completeness sake
		timer.stop();
		timer = null;
	}
}

At this point, you may be wondering why bother with a closure, when you could simply define the handler as a private method? In this particular example, there is no difference unless you wanted the handler to access the timer instance itself in the handler.

4. Use Signals

There is a final alternative – use the as3-signals library. AS3 Signals is a library that provides an alternative to using Flash Events within your APIs. Using Signals, there are a handful of alternatives to clean up after your closures. Every signal implements ISignal, and it’s that interface we’ll focus on.

ISignal.addOnce()

ISignal.addOnce() prescribes attaching a handler which is called once when the signal dispatches and is removed immediately. Below we use a NativeSignal to wrap the TimerEvent.TIMER_COMPLETE, allowing us to avoid attaching and removing event listeners ourselves. We also now return a Signal which gives the user of the class a strongly-typed signal to what they expect.

public class SomethingSignalsAddOnce implements IDoesSomethingWithSignals
{
	public function doSomething(index:int):ISignal
	{
		//create a Signal to return
		const response:ISignal = new Signal(int);

		const timer:Timer = new Timer(index * 100,-1);

		//create a signal from the Timer event
		const signal:NativeSignal = new NativeSignal(timer, TimerEvent.TIMER_COMPLETE, TimerEvent);

		//once TIMER COMPLETE has occurred, we can dispatch our signal - ISignal.addOnce() ensures that any listeners to Timer will be cleaned up
		signal.addOnce(function(evt:TimerEvent):void
		{
			//tell response that something happened (as opposed to dispatching an event, we dispatch the signal)
			response.dispatch(index);
		});

		timer.start();

		return response;
	}
}

This is often very useful, but not always optimal. We may not always want to listen only once – say if we need to selectively remove the listener based on certain conditions. Sometimes we may only want to remove the listener based on another asynchronous event (as in #4 above).

Signals and arguments.callee

Alternatively, we could use the arguments.callee property and do a conditional remove when required (after 5 ticks in the below example):

public class SomethingSignalsCallee implements IDoesSomethingWithSignals
{
	
	public function doSomething(index:int):ISignal
	{
		//create a Signal to return
		const response:ISignal = new Signal(int);
		
		const timer:Timer = new Timer(100);
		
		//create a signal from the Timer event
		const signal:NativeSignal = new NativeSignal(timer, TimerEvent.TIMER, TimerEvent);
		
		var numTicks:int = 0;
		
		signal.add(function(evt:TimerEvent):void
		{
			if (numTicks++ == 5)
			{
				response.dispatch(index);
				signal.remove(arguments.callee);
				timer.stop();
			}
		});
		
		timer.start();
		
		return response;
	}
}

You might wonder if you can use arguments.callee within nested closures – and the answer is yes. Just be aware that each closure has its own definition of the arguments.callee, and it overrides the value from any outer closures.

ISignal.removeAll()

ISignal also expose the convenience method: removeAll(). This can help us when we need to remove listeners in response to another method call.

public class SomethingSignalsRemoveAll implements IDoesSomethingWithSignals, IDisposable
{
	private var timerSignal:ISignal;
	private var timer:Timer;
	
	public function doSomething(index:int):ISignal
	{
		//create a Signal to return
		const response:ISignal = new Signal(int);

		timer = new Timer(500);

		//create a signal from the Timer event
		timerSignal = new NativeSignal(timer, TimerEvent.TIMER, TimerEvent);

		timerSignal.add(function():void
		{
			response.dispatch(index);
		});

		timer.start();

		return response;
	}

	public function dispose():void
	{
		timer.stop();
		timerSignal.removeAll();
	}
}

Be careful using removeAll() – if your class aggregates the signal as above, and it never leaves the containing type, fine. However, there may be occasions when you pass a signal around between various classes (as we do with the response signal above). In these classes, using removeAll() could present unwanted results if one developer inadvertently removes listeners that another class attached.

Conclusions

Whichever way you use closures, you need to remember to clean up after yourself, less you end up leaking memory in the Flash player. Asynchronous programming is here to stay (take node.js and Reactive eXtensions for .NET as examples) and we’re lucky that Actionscript – built on ECMA – supports it natively. As long as you’re aware of the consequences of attaching inline handlers, you can use closures and the async model in general to design a different approach to solving common asynchronous problems. While it takes a little getting used to, I wholeheartedly recommend giving it a shot – you might just like it.

Advertisements




Book Review: Too Big to Fail

12 08 2011

Too Big to Fail on Amazon.com

An ex-colleague recently told me to safely ignore Andrew Ross Sorkin’s Too Big To Fail – “it’s little more than propaganda”, he said.

Undeterred, I ploughed through the tome, finding it well-written and informative. While it may have defended certain individuals, it by no means came across as biased; though perhaps I’m just naive.

Where The Big Short is a fascinating yet brief look at a few key players in the crisis who bet against the market, Too Big to Fail is an exhaustive look at the events that occurred during the credit crisis in 2008. It follows an impressive cast of individuals, from the US Treasury, through the Federal Reserve, and just about every major investment bank in the US.

I confess that getting though the book took some effort. Not because there wasn’t ample drama and conflict, but chiefly because there was just so many characters to familiarise with.

Much of the book centres around the fall of Lehman Brothers and the attempts of all and sundry to save it. The book makes much of both Dick Fuld, the ex-CEO of Lehman who, by all accounts, tried dearly to save the firm, and Hank Paulson, the US Secretary of the Treasury under Bush, who struggled relentlessly to prevent an economic meltdown (perhaps that’s the said propaganda?).

Sorkin has evidentially put a lot of work into researching the events of the time, and the book reads surprisingly well; often throwing in well-placed reminders regarding character relationships touched on in the past. I particularly like the occasional inconsequential commentary by those present (eg. he looks fit for his age) or throwaway body-language queues that lead nowhere, immersing the reader in the situation.

While the book focuses primarily on Lehman, it also covers most of the other major events during the crisis. In particular, the buyout of Bear Stearns by JP Morgan for $2 a share with support of the US government (later revised to $10), AIG being propped up by the government shortly letting Lehman fall (by not providing government assistance to any of the buyers) and the eventual takeover of Merrill Lynch by Bank of America.

The question of whether or not the US government were to blame for the depth of the crisis by not saving Lehman remains to be seen. Pick up a copy and make up your own mind. At the very least you’ll see how they do things on the other side of Wall Street.





UI mediation sucks. Mediate behaviours, not views.

7 08 2011

Code for this post can be found on Github.

In this post, we’re going to look at how the variance utility for Robotlegs allows mediation against interfaces rather than concrete classes. Apart from the gains in decoupling, we can mediate purely against behaviours, rather than specific implementation. And, as we’re talking interfaces, a UI component can implement as many interfaces (behaviours) as it likes!

Libraries used in this post:

Why use mediation at all?

Mediation is a design pattern that performs the job of managing communication between parts to decouple logic. In terms of modern MVC frameworks, mediators are typically employed to monitor UI pieces from the outside in, so that the UI has no references to the framework whatsoever. The common alternative is the Presentation Model pattern (PM) that typically involves injecting in one or more presentation models to the UI component. As such, the UI component is thus coupled to the particular PMs it uses. That said, when mediating against classes (rather than interfaces, which we’ll get to), we couple the mediator to the UI, which is suboptimal.

Why Robotlegs?

Robotlegs (RL) is a lightweight (50KB) and prescriptive library for MVCS applications. Out of the box it provides us with Mediation, IOC container and Dependency Injection via the familiar [Inject] metadata (thanks to SwiftSuspenders).

Regular (invariant) mediation

Take some UI component: (SomeComponent.mxml)

<s:VGroup>
    <fx:Script>
        //the mediator will tell me when something happens
        public function asyncReturned():void
        {
            //something happened!
        }

        private function onClick(evt:MouseEvent):void
        {
            //tell whoever's listening to do something
            dispatchEvent(new ControlEvent(ControlEvent.START));
        }
    </fx:Script>

    <s:Button label="Start" click="onClick(event)" />
</s:VGroup>

A mediator for this component might look like (SomeComponentMediator.as):

public class SomeComponentMediator extends Mediator
{
    [Inject]
    public var view:SomeComponent;

    [Inject]
    public var service:ISomeService;

    private var viewHandler:Function;
    private var serviceHandler:Function;

    //called when UI component is added to stage and mediator assigned
    override public function onRegister():void
    {
        //handle control events responding
        viewHandler = function(evt:ControlEvent):void
        {
            serviceHandler = function(evt:ServiceEvent):void
            {
                //some where later on tell the view it is done...
                view.asyncReturned();
            }
            service.addEventListener(ServiceEvent.COMPLETE, serviceHandler);

            service.doSomething();
        }

        //attach the listener
        view.addEventListener(ControlEvent.DO_ASYNC, viewHandler);
    }

    //called when UI component is removed from stage, prior to mediator being destroyed
    override public function onRemove():void
    {
       service.removeEventListener(ServiceEvent.COMPLETE, serviceHandler);
       view.removeEventListener(ControlEvent.DO_ASYNC, viewHandler);
    }
}

Via the ADDED_TO_STAGE event, Robotlegs wires up an instance of a mediator for each UI component it finds. All that it requires is that you map in the mediator:

IMediatorMap.mapMediator(SomeComponent, SomeComponentMediator);

Don’t like extending base classes or want your own implementation of mediation? No problems just implement IMediator instead.

So why covariance?

Because there are some problems here with mediating directly to views:

  • A UI component can only have one mediator;
  • The mediator is tightly coupled to the UI control.

So, what if we wanted to map to an interface instead? We could include the Robotlegs Variance Utility (as a library to our project), and tweak our mediator mapping call to:

IVariantMediatorMap.mapMediator(ISomeComponent, SomeComponentMediator);

The above example becomes:

<s:VGroup implements="ISomeBehaviour">
	<fx:Script>
		//the mediator will tell me when async returns
		public function asyncReturned():void
		{
			//something happened!
		}

		private function onClick(evt:MouseEvent):void
		{
		     //tell whoever's listening to do something
		     dispatchEvent(new ControlEvent(ControlEvent.START));
		}
        </fx:Script>

    <s:Button label="Start" click="onClick(event)" />
</s:VGroup>

Using this interface:

[Event(name="startAsync",type="ControlEvent")]
public interface ISomeBehaviour
{
	function asyncReturned();
}

And the mediator becomes:

public class SomeComponentMediator extends Mediator
{
    [Inject]
    public var view:ISomeBehaviour;

    //... (as before)

}

And voila – we’ve solved both problems in one fell swoop! A UI control can implement as many interfaces as it needs, and our mediates now mediate against a behaviour rather than a concrete UI piece.

So now what?

There’s still room for improvement. Flash has no way to enforce that the class – SomeComponent – will actually dispatch the ControlEvent. If we’re writing these interfaces – these behaviours – we want a contract that explicitly states which events should be fired. Better yet, we’d like the option to state if these events are a functional level or a type level.

Enter Signals, stage right

Signals provide an alternative to events. They are designed to be used within APIs and class libraries, rather than replacing events altogether (Flash events are well suited to UI hierarchies). Where events fire and are handled at a type (class) level, signals live at the variable level. Not only can we pass them to and return them from methods, we can also enforce their presence in types that implement our interfaces. Check out an earlier post on Signals.

By including the lightweight Signals SWC, we have access to the ISignal contract and some common implementations.

Our interface from before now becomes:

public interface ISomeBehaviour
{
    function asyncReturned();

    function get start():ISignal;
}

Our view becomes:

<s:VGroup implements="ISomeBehaviour">
    <fx:Declarations>
        <signals:Signal id="startSignal" />
    </fx:Declarations>

    <fx:Script>
        //the mediator will tell me when something happens
        public function asyncReturned():void
        {
            //something happened!
        }

        //provide access to the type-level signal
        public function get start():ISignal
        {
            return startSignal;
        }
    </fx:Script>

    <!-- Here we actually send the message to the mediator -->
    <s:Button label="Start" click="start.dispatch()" />
</s:VGroup>

We actually now have a property start, exposed from the view that implements the interface, that we can attach and remove handlers to in our mediator.

And so our mediator finally becomes:

public class SomeComponentMediator extends Mediator
{
    [Inject]
    public var view:ISomeComponent;

    [Inject]
    public var service:ISomeService;

    private var serviceSignal:ISignal;

    override public function onRegister():void
    {
        //handle control events responding
        view.start.add(function():void
        {
            serviceSignal = service.doSomething();

            serviceSignal.add(function():void
            {
                //when the service returns, notify the view
                view.asyncReturned();
            });
        });
    }

    override public function onRemove():void
    {
        serviceSignal.removeAll();
        view.start.removeAll(); //clean up any listeners
    }
}

So what now?

Grab the code on Github and have a play around. For ease of use, I’ve included the dependencies along with the source.