I’ve been meaning to do this for a while, but only got the chance to sit down and give it a bash this morning. It was pretty rushed, so I’ll probably redo these when I get a chance.

NOTE: If you don’t know PureMVC you should watch these first: PureMVC.TV

Update: The vids were pretty crap, so I removed them. Besides, they’re a bit dated now anyway (the framework’s API has tightened up quite a bit since this post). Have a look:

http://wiki.github.com/robotlegs/robotlegs-framework

Well, you might enjoy RobotLegs AS3: yet another lightweight micro-architecture for Rich Internet Applications.

It’s got the bits that I like about PureMVC (Mediators, Commands and Proxies) without any of the bits that I’m not so fond of (Service Locator, Singletons, casting casting casting!).

I’ve put the source up on GitHub, so feel free to Fork it and make it better:

http://github.com/robotlegs/robotlegs-framework

Discussion Group:

http://groups.google.com/group/robotlegs

Here’s a little demo:
(Please note: the API and usage has cleaned up a lot since this demo was built)

You can also view the demo here (with view source).

The demo app is perhaps not so great, but it demonstrates many of the framework’s features. AND, there isn’t a single cast in there! No actor casting, no payload casting, not any casting, not even for fun!

I have much to say about this little framework, but it’s the wrong side of 5am and I’ve had a crazy long day. In the meantime, you can find some background info here and here if you’re interested.

Update: RobotLegs Lives!

A couple of weeks ago I played around with Mate and Swiz. I already knew a little about Dependency Injection (in theory anyway), but playing with those two frameworks really drove the point home: applications are potentially MUCH easier to write, and much more flexible, when you take advantage of Dependency Injection.

If you’ve used PureMVC you might be familiar with writing code like this:

var myProxy:MyProxy = facade.retrieveProxy(MyProxy.NAME) as MyProxy;
myProxy.doSomethingAwesome();

This is sometimes referred to as the Model or Service Locator pattern. Firstly, it’s a little tedious to write. But more importantly, it puts the responsibility on your class to “fetch” the things it needs – not a good thing (especially from a testing point of view). From the “outside” you can’t see what your class is dependant on: you have to review the actual code in your class to see what it wants to pull in from the outside world.

It’s also a bit sneaky: to get something out, you have to know how it was put in – splitting and spreading knowledge across your codebase. Not pleasant.

Alternatively, you could use a Singleton to hang all your objects on. That would not be cool: link, link, link.

Enter Dependency Injection

Another solution is to declare certain properties on your class as dependencies to be “given” to you on (or just after) construction. A Dependency Injection framework will take care of managing these dependencies and providing you with what you need. Your class can then focus on doing it’s job instead of worrying about how to get the objects it needs.

I Like The Mediator Pattern

And I like the concepts in PureMVC: Specifically the Mediator, Command and Proxy patterns. I like clean view components with absolutely no framework or application code in them – as made possible by the Mediator pattern. I like Commands and I like binding them to system events. I like Proxies, who only communicate outwards, by dispatching events, and who’s APIs must be accessed directly by Commands and/or Mediator instances.

But I don’t like the use of Singletons or Multitons, the Service/Model locator pattern, the spreading of knowledge throughout the system by the Mediator and Proxy registration and retrieval mechanism (you have to know how something was put in to get it out again), and the custom Notification scheme and it’s associated methods: listNotificationInterests and handleNotification (with that nasty switch!).

So, I like PureMVC, I just think it could be improved for certain use cases. Now, obviously, improvement is subjective. Designing a framework is largely a balancing act: every decision has a pro and a con, and the framework architect must weigh up the pros and cons to steer the project in a chosen direction. That direction is determined by the architects vision of the most important use cases for the framework. I think that PureMVC has been brilliantly designed when stacked against it’s objectives. It’s been very carefully thought through, has an amazing author and community, sports great documentation, examples and utilities, and does it’s job well.

YALMAFRIA (Yet Another Lightweight Micro-Architecture For Rich Internet Applications)

Mate and Swiz can both do Dependency Injection. What I found interesting about the Dependency Injection in Mate is that it’s event based – this allows you to look at the event target to determine the instance that is currently being injected into. Using that (and a thing called an Object Builder in Mate) I was able to configure my application to automatically create Mediators for view components as they arrived on stage, and set references to the view components on the newly created Mediators.

It worked, but it seemed a little klunky, and still required a fair amount of code to map a Mediator Class to a view component Class (and any other dependencies). Regardless, it got me amped – using Dependency Injection and automatic Mediator registration I could remove most of the boring (and brittle) code from my projects.

I decided not to use Swiz or Mate in the end. Both offer nice solutions to some of the challenges of building RIA applications, but neither would make building my current application any quicker or easier.

Besides: I didn’t like the idea of using the display list as a system event channel, as in the case of Mate, or the concept of a central (Singleton) event dispatcher, as in the case of Swiz. And I didn’t want to put ANY application or framework code into my view components, as both seem to encourage.

Also, I wanted a framework that I could use for both Flex AND plain AS3 projects. I believe that this is possible with Swiz, but certainly not with Mate.

So, I looked for an AS3 Dependency Injection library to build a(nother) micro-architectural framework on top of..

Back to Dependency Injection

I tried Spring ActionScript (previously known as Prana) first. Immediately, two things bugged me about it: the use of external xml files to configure dependencies, and the side-effect of that requirement:

When compiling a SWF the compiler ignores Class definitions that are not directly referenced by the application. A small problem, easily solved, but an extra step none the less to ensure all necessary Classes are compiled. Loading your dependencies externally is groovy, fo sho, but I really don’t need that right now.

I believe you’d enjoy Spring ActionScript if you’re from Java land (hello there, have you played with Clojure yet? it got me all jazzed for a spell.. even though I didn’t build anything useful with it).

Anyhoo.. check this out if you are interested in Spring ActionScript and Autowiring: link

Or this, if you want to see how to do a similar thing with Swiz: link

Inspired by Guice

Next I checked out SmartyPants-IOC. I liked the vibe and proceeded to build my little framework with it.

RobotLegs AS3

I decided to call my framework RobotLegs. It’s very simple really. It contains two factories (and some Interfaces):

A Mediator Factory – for automatically creating and wiring up Mediators as view components arrive on Stage.

And a Command Factory – for binding commands to events.

Everything else is handled by Dependency Injection thanks to SmartyPants. Conceptually, the framework is much the same as PureMVC, but uses DI in place of a registry, and built-in Flash Events instead of Notifications.

I was able to migrate my current project over to Robot Legs (from PureMVC) in about a day. Not bad considering there were dozens of Commands, over 20 Mediators and around 10 Proxies to convert. It was a bit of a mission creating all the custom Event Classes to replace my Notifications though.

But it was certainly worth it. My application code has tidied up nicely. Many of my Mediators, Proxies and Commands have halved in size, due to the removal of lookup code and notification body casting.

RobotLegs?

The cool thing about Mediators that automatically wrap themselves around view components as they appear is that it greatly simplifies dealing with composite, lazily instantiated view components. I don’t need to worry about how a view component comes into being, I just set up a rule that ensures when that view components arrives I have a Mediator to link it back into the application. This is great for items inside Tab Navigators, Accordians, View Stacks etc.

It does present a little problem however: context. When you manually create and register a Mediator, you have the opportunity to give it some context, such as setting a property on it. Mediators that get automatically created make this a bit tricky. We could, of course, set that property on the view component, to be picked up by the Mediator on registration, but that’s not cool – view components should be self-contained, stand-alone widgets.

My current solution is to allow Mediators to request properties from parent Mediators. This is made possible by the Mediator Factory, with it’s dictionary of currently registered Mediators and view components, and a method declared by the Mediator Interface called “provideProperty”.

I plan on releasing Robot Legs once it has settled down a bit – using it in my current project has pointed out a great many things that I had overlooked initially. It won’t be everyone’s cup of tea – nothing is

UPDATE: RobotLegs 0.1, with demo Flex app, has been released. More info here:

http://shaun.boyblack.co.za/blog/2009/04/16/robotlegs-an-as3-mvcs-framework-for-flash-and-flex-applications-inspired-by-puremvc/

By mid Jan I had nailed a decent chunk of core system functionality, including:

• Listing public Games
• Entering a Game
• Pulling Game Submission Pairs
• Rating Pairs
• Submission Scoring
• Viewing Submission Details
• Viewing Fullsize Submissions
• Logging In
• Uploading Submissions
• Customizing/Editing Submissions
• Writing Comments on Submissions

And Then…

About two weeks ago I came to the painful realization that the client-side architectural framework I was using was adding unnecessary complexity to the project and generally slowing me down. I started looking at other options but each had drawbacks that I was not willing to put up with.

In the end though, it was not really the Document-Based nature of the project that was giving me hassles. I wanted a system that could automatically attach Mediators to view components as they appeared, without all the hassles of manual Mediator instantiation, naming, registration and removal.

So, against all “better” judgement, I borrowed ideas from PureMVC, Mate and Swiz, and rolled-my-own. And it was fun!

Conceptually it’s very much like PureMVC, except:

• It uses Dependency Injection instead of the Service/Model Locator Pattern
• It uses Flash Events instead of a custom Notification scheme
• Mediators can be automatically created for view components

There is actually very little to the framework: A Mediator Factory (for automatically creating Mediators when view components arrive on stage) and a Command Factory (for wiring Commands to Events) – everything else is taken care of by Dependency Injection.

I’m using the SmartyPants IOC library to handle injection. I sent a mail to the author of said library to explain my framework idea and the problem it is aiming to address. In his response he mentioned that my problem might be one commonly referred to as “robot legs“. Rad! While not entirely accurate, I dig that phrase, and hereby name my framework “RobotLegs”!

I’m in the process of migrating Pijin over to RobotLegs, and so far everything is going very smoothly. I’ll post a more detailed description of RobotLegs once I’ve spent a decent amount of time “eating” it.

UPDATE: RobotLegs 0.1, with demo Flex app, has been released. More info here:

http://shaun.boyblack.co.za/blog/2009/04/16/robotlegs-an-as3-mvcs-framework-for-flash-and-flex-applications-inspired-by-puremvc/

Lately, however, I’ve been building an application for which PureMVC has turned out to be a pretty poor fit. The term that some people have used to describe this kind of application is “Document-Based”.

A benefit of MVC is the ability to easily create multiple Views of the same Model. Document-based is roughly the opposite of that: the ability to create identical Views of different data. Think OS X Finder (or Windows Explorer if you must!): multiple windows that look and function the same but show different parts of your filesystem.

I spend a lot of my time trying to learn as much as possible about programming. This means subscribing to a huge number of feeds and bookmarking obsessively! Looking for solutions to my current problem I re-discovered Mate. I hadn’t looked too deeply into it before as I needed an ActionScript Framework that wasn’t bound to the Flex Framework (ruling out pretty much every framework except for PureMVC). This time however, I didn’t mind binding(!) myself to Flex.

Central to Mate is the concept of an Event Map. UI components dispatch events that bubble up the display list and get caught by one or more Event Maps: loosely coupled goodness. Mate also employs Dependency Injection instead of the Service/Model Locator pattern used by Cairngorm and PureMVC. And no Singletons! Suitably impressed.

I highly recommend you check out Mate, and if I were you I’d do it in this order:

• Mate Presentation by Laura Arguello: fairly long, and a bit slow, but quite fun and covers some really important concepts – not just for Mate, but application architecture in general
• Hello Mate by Neil Webb
• Mate Overview
• Mate Document-Based Example by Theo Hultberg/Iconara: lots of great info

Ok, time for me to calculate how painful it’s going to be to switch my application over to Mate.

UPDATE: I posted my thoughts (as best as I could gather them) on the PureMVC forum here:

http://forums.puremvc.org/index.php?topic=1000.0

UPDATE: I decided not to switch to Mate for my current project. I wrote a little MVC framework (much like PureMVC), that uses Dependency Injection, and switched to that instead. More here:

http://shaun.boyblack.co.za/blog/2009/02/24/pijinnet-v3-progress-update-24-feb-2009/
http://shaun.boyblack.co.za/blog/2009/03/13/as3-dependency-injection-and-autowire/

MAJOR UPDATE: RobotLegs 0.1, with demo Flex app, has been released. More info here:

http://shaun.boyblack.co.za/blog/2009/04/16/robotlegs-an-as3-mvcs-framework-for-flash-and-flex-applications-inspired-by-puremvc/

July 2008:
Started working on Pijin on a more full time basis – reduced Hello Computer work to 2 days a week.
Serious evaluation of technologies, tools and approaches.

August 2008:
Decided on Tools and Technologies:

• Eclipse with plugins: PDT, Aptana, Subclipse, and Flex Builder (likely to switch to FDT later)
• PHP 5.2+ with Zend Framework (AMF integration with CodeIgniter was too messy),
• PureMVC MultiCore for AS3 framework,
• Flex 3 for front-end prototype,
• AS3 for FP10 for deploy,
• SabreSMF for Remoting (likely to switch to Zend_Amf later)

Played with the Zend Framework
Decided on packaging and naming conventions
Basic server setup
Tested WebOrb, but decided on SabreAMF instead (WebOrb was too bloated, though I like the admin tool)
Started Pijin Core AS3 Library
Started Pijin Flex3 PureMVC MultiCore Project
Started Pijin PHP Library (Zend Framework naming conventions – allows use of Zend_Loader)
Started Pijin PHP Remoting Services
Wrote the Pijin AMFGateway bootstrap and CallbackServer for SabreAMF
Wrote the Pijin AS3 RemoteService
Started implementing Remoting security features for Services

September 2008:
Started simple Flex prototype interface
Integrated my CMS tool for quickly and easily setting up the Pijin V3 db Schema
Wrote/adapted Pair Retrieval algorithm from Pijin.net V2
Wrote/adapted Pair Rating algorithm from V2 – now with “weighting”
Defined Item Schema
Figured out how Styles will work
Upgraded to SabreAMF 1.2

In fact, it’s the whole reason I’ve been learning all this web application development stuff. It’s the reason I stopped freelancing as BoyBlack over a year ago, and took on a fulltime job at Hello Computer – so that I could get paid to implement all the research I’ve been doing, in a realistic fashion, one manageable project at a time. It’s also the reason why I recently negotiated to reduce my working hours to two days a week – so that I can start building the next version of my application.

But now that I’m ready to sit down and build this thing I’m faced with a couple of tough decisions:

• IDE: FDT or Flex Builder?
• PHP Framework: CodeIgniter or Zend Framework?
• Remoting: AMFPHP or WebOrb? Or just go JSON

At least I’m settled on using PureMVC as my Flash Framework (whether I decide to use Flex or not is another matter entirely!), and jQuery as my JavaScript library.

The IDE

On Windows, FlashDevelop is by far my favourite ActionScript Editor. But I recently switched over to OS X and decided to explore Eclipse. I dig the whole integrated vibe: using PDT for my PHP development, the Aptana plugin for my JavaScript coding, and Subclipse for SVN integration.

I tried out FDT – which has some really awesome features, but which I feel is slightly over-priced for a tool that doesn’t support Flex development very well (no WYSIWYG editor, and lame MXML support). Don’t get me wrong, it’s a great piece of software for ActionScript development, but my gut tells me that for that kind of investment it’s probably wiser to go with the official Adobe IDE: Flex Builder.

At the same time, Flex Builder feels quite primitive and is mildly frustrating for someone used to the magical features, time saving templates, and bad-ass code hinting offered by FlashDevelop and FDT.

On that note, please vote for the Template issue over at the Flex Bug And Issue Management System.

The PHP Framework

I’m a bit of a fan of CodeIgniter. Installation and configuration is quick and easy, the framework is light-weight, and the documentation is great. I’ve built a couple of small websites with it, and combined it with ExtJS to produce a simple CMS for Hello Computer to help speed up development time and provide clients with a user-friendly website management tool. I’ve had no hassles with it, except..

Integrating CodeIgniter with AMF Remoting seems to be a pain. The documents and tutorials I have found on the subject show it to be possible but rather messy. I have a gut feeling that integration with the Zend Framework might be easier. Even if there isn’t an out-of-the-box solution right now, I believe that one is more likely to come from the Zend Framework community than the CodeIgniter community.

Remoting

For Flash websites that aren’t very data intensive, I like to send data to Flash using JSON. PHP 5.2 supports JSON natively, so it’s really easy to spit data out in this format. Unfortunately, the system I’m currently building deals with lots of data – it’s quite “chatty”, so to speak, so the data transport layer needs to be fast and lightweight. Remoting allows for binary communication between a Flash client and a server, substantially reducing bandwidth for large datasets.

My two main options here are AMFPHP and WebOrb PHP. Unfortunately, there hasn’t been much news on the AMFPHP front lately. WebORB development, however, seems to be quite active.

But, I’ve also noticed that Wade Arnold (the new AMFPHP lead) has been tagging some of his posts with the Zend_Amf keyword. Perhaps there are plans for a Zend Framework AMF module?

–EDIT: this is indeed the case. See Wade’s comment below.

Suggestions

This post is mostly just a personal marker on my project’s timeline, but if you read through it, and have any experience with the options above, I’d love to hear your thoughts. Thanks!

PureMVC Tutorial – Flex, PureMVC, Jabber and XIFF 3: Introduction:

http://www.actionscriptdeveloper.co.uk/puremvc-tutorial-flex-puremvc-jabber-and-xiff-3-introduction/

http://puremvc.org/content/view/68/1/

http://trac.puremvc.org/PureMVC_Haxe

www.earthcote.co.za

UPDATE: SWFAddress and FireFox 3 on Mac OS X Bug – I’m aware of the nasty white-flash bug with the site, but don’t have access to the source at the moment to fix it.