Introduction

The JavaScript web development community has a significant amount of application development frameworks, specifically around creating scalable applications using MVC/MVP/MVVM/MVPM/MVPV/MVSC, etc. Flash & Flex have the same, although not as many, nor as many library dependencies.

Backbone in particular has some longevity amongst the many frameworks available and has been used in some high profile applications (notably Pivotal Tracker). Since I’ve recently been fixing a web application project with a varied history, I’m diving head first into Backbone, and taking a break from diving into Angular.

In this article, I’ll go over what Backbone is, how its features compare to frameworks Flash & Flex Developers are used to, and some implementation details that will help you compare how JavaScript MVC apps compare to Flash and Flex ones.

Also, while I’ll have a lot of future articles on web development, rather than reading 20 billion novels, if you’re just looking to get immersed in as much web dev as possible to get a 30,000ft view of where things stand, this is a better post to read even if dated. I’m still learning the web stack, so I’ll update this post with any inaccuracies pointed out. Just comment or send me an email/tweet.

What Is Backbone?

Backbone is basically an MVC framework for writing JavaScript web applications. If you’ve ever messed with Cairngorm, PureMVC, Robotlegs, Swiz, or Parsley, you’ll instantly see a lot you recognize. Like a lot of JavaScript MVC frameworks, it is a collection of JavaScript libraries.

Also, it like others has the intentional ability to easily integrate with other toolsets and libraries. Examples include UI component frameworks like jQuery or Sencha Touch, HTML template engines like Handlebars, and it assumes you’ll either hand code your CSS or use something like SASS/LESS if you need to make your CSS more manageable on larger projects.

While Cairngorm and PureMVC were self contained, Robotlegs depended on SwiftSuspenders for the Dependency Injection functionality… however it is known that you just used Robotlegs without really caring, nor knowing buried in the robotlegs.swc file, there was a Swift Suspenders dependency.

Dependency management is tons harder in JavaScript, but I’ll briefly cover that plus more on Underscore in a bit. The same holds true for Backbone. It utilizes a library called Underscore to basically fix JavaScript to a certain standard of usability, add many OOP and Array features functional server-side devs love, and to abstract away the browser incompatibilities for the 1st and 2nd.

It also utilizes Douglas Crockford’s json.js, the man behind the book “JavaScript: The Good Parts” and a promoter of using closure based OOP vs. Object.prototype. His json library does the same, allowing the JSON format to work seamlessly in JavaScript regardless of browser; for older browsers it parses, for newer ones it uses the built in parser. You should be using json2 since it doesn’t mess with the prototype (omg, purism). You’ll notice, too, just about every article on JavaScript nowadays assumes this part is “handled”; you’ll see a magic “JSON” in the code. It’s implied it comes form this library, is native, or both. In a development environment, you just include all the libraries mentioned at the bottom if your index.html body tag (so all the GUI and CSS dependencies load first) in script tags.

Why Backbone?

If you’re a Flex Developer, you already know why: it’s an MVC framework. Sold. Feel free to skip this section or just skim 4 & 5.

I was thinking of deleting this section, but then read Smashing Magazine’s Journey Through The JavaScript MVC Jungle, and decided more details were needed for those who are questioning why they even need an MVC framework.

For those that don’t, MVC frameworks help separate out your visual, data, application, and business logic in distinct areas in your code. This allows you to have multiple developers work on the code, the code to more easily scale for larger applications, and to make it more testable. Putting logic in your DOM, aka your JavaScript mashed into your HTML and CSS on a “page”, makes things unmaintable, hard to find bugs, and unreadable. …for larger applications. Just like Flash, there is fine line that’s blurred as all get out. Whether you use an MVC framework or not depends on:

1. your business
2. your team
3. size of your application
4. multi-device
5. server-side vs. client side
6. website vs. app

Your Business

For those who have non-negotiable deadlines, any OOP, design patterns, and frameworks usually get in the way. Paying off technical debt never happens much, so spit and duct tape applications are fine. On the other hand if your business is creating code that will have to live for years and/or is a product for consumers or other businesses, using OOP, design patterns, and a framework is a good idea. Usually. Sometimes you need to just launch and get funding. Also, there is always the risk that a “Prototype” suddenly becomes “The Product”. Starting out with even a few parts in a framework will prevent a lot of pain down the line.

Your Team

If you’re a 1 woman show, and management has done the estimates to show that all design, development, testing, and bug fixing can be done just by you, great; architect as you see fit.

However, if you’re on a team environment because your project is of the size that can in fact utilize multiple designers and developers to create value in tandem, an MVC framework can allow your team to work with each other, in different files, being productive using modern source control systems. Additionally, Backbone like many frameworks has enough industry traction that documentation & answers to common questions/problems are all online. This makes hiring & training both new & existing team resources much cheaper and faster. The code has SOME semblance of structure, even if the original developer(s) didn’t follow Backbone conventions to a T.

Application Size/Scope

If you’re application is just a few screens/pages/widgets, use jQuery, shove you’re services and data into a dozen files and call it a day. You could still even write it where your service and application logic layer was testable to get unit tests, all without the need of a framework. I’ve seen a lot of Flash Developers take to this route just fine over the past year for both desktop and mobile. Some even threw everything on the sever and just did HTML/CSS on the client.

If, however, you’re creating a large application with many screens, a lot of client side logic/data caching, and maybe even iterating on a design, then separating things out cleanly via Backbone, or some other framework, is the way to go. Again, this assumes you’re not using the server for much beyond services. This’ll ensure when you create new functionality, you know where it goes. When revisiting already created functionality, you know where to look for what.

Multi Device

One thing that isn’t mentioned much is MVC frameworks can help with mutli-device strategies. People attribute that to HTML5 and make the assumption you’re coding things in a DRY manner and they can be easily reused. Taking your application logic, data/validation, and services OUT of the presentation layer (what the user see’s) allows you to test & scale each in isolation.

What usually doesn’t change is you need all/most/some of the same exact code on a phone as you do the tablet and desktop. While the GUI can change, whether a different HTML and CSS template used for different screen sizes, your core application & business logic does not. Backbone especially with it’s use of the PassiveView pattern makes it (mostly) easy to change the underlying html or templates you’re using. Even if that code isn’t DRY because of a hard deadline or a challenging design, all your models and services stay the same helping to somewhat mitigate the problem. There are a variety of responsive design techniques you can use to not really change anything.

Server-Side vs. Client Side

This one is easy. If you’re development shop primarily does their websites and/or applications server-side, there are a lot of wonderful frameworks out there that are already “Backbone on the Server” as it were. Additionally, they have the library support just like JavaScript does to fill in the gaps. These include Ruby on Rails, Django for Python, Java’s Play Framework or GWT, and good ole’ .NET.

In these instances, 90% of the code and design is done on the server, and a tincy bit of client side code or design is done. In these cases, you don’t need Backbone because you’re already doing MVC on the server and treating the entire client as the View. The criticism by some is that, even with delivery or raw HTML/CSS/JS that’s minified and gzipped by the server, you still utilize a lot more bandwidth and http requests on the client. This is not what you want to be doing with mobile. There are a variety of frameworks and design strategies to mitigate this, though.

If you don’t do server-side development, then you need something. There is a reason Rails, Django, Play, .NET, GTW, etc. all utilize some form of MVC.

Website vs. Application

Finally, what exactly are you building? To me, even though I’m still learning JavaScript/HTML/CSS stack, the delineation is pretty clear to me. Why anyone can argue, and be correct, that the same Backbone application with large amount of JavaScript and a complicated build process could be made using simple HTML/CSS, and a tincy bit of jQuery… I just use the first 5 items to make the decision.

If you have a bunch of web designers on your team, they’re more apt to inherit something and be successful maintaing it if it’s in a context they’re used to. Conversely, if you have a lot of software client developers, they’ll be more apt to maintain something done primarily in code.

If they’re server-side devs, they’ll typically have larger expectations of a technology stack even compared to client side developers… hence rather developing on the server instead.

Bottom line, if you’re just building a website with some progressively enhanced interactivity, you don’t need a framework. If you’re doing a lot of service calls, have “state” on the client, and have a lot of user interaction & things they need to input, you’re probably building an application and probably should use a framework.

Events

Many frameworks have a messaging system that’s independent of the stack it’s on. This is also sometimes called the “event bus”. Cairngorm has CairngormEventDispatcher on top of Flash Player Events. PureMVC has Notifications. Robotlegs injects a special base class with a unique EventDispatcher instance. Backbone, much like ActionScript 2’s EventDispatcher or ASBroadcaster in ActionScript 1, uses the Decorator pattern to add event listening and broadcasting to any JavaScript object. It relies on the Underscore library to do this. Underscore does in fact use the _ as it’s class name. Yes, there are basic ECMA level event dispatching capabilities in JavaScript, but they don’t have good cross browser support, and are harder to modify. AS1:

var obj = {};
var listener = {};
ASBroadcaster.initialize(obj);
obj.addEventListener(listener);
listener.alert = function()
{
	trace("Alert!");	
};
obj.broadcastMessage("alert", "Sup.");

AS2:

import mx.events.EventDispatcher;
import mx.utils.Delegate;
var obj = {};
var listener = {};
EventDispatcher.initialize(obj);
obj.addEventListener("alert", Delegate.create(listener, onAlert));
listener.onAlert = function(event)
{
	trace("Alert!");	
};
obj.dispatchEvent({type:"alert", target: obj});

AS3:

import flash.events.EventDispatcher;
import flash.events.Event;

var dispatcher:EventDispatcher = new EventDispatcher();
var listener:Object = {};
listener.alert = function(event:Event):void
{
	trace("Alert!");	
};
listener.addEventListener("alert", listener.alert);
dispatcher.dispatchEvent(new Event("alert"));

Backbone via Underscore:

var object = {};

_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "an event");

Notice this uses a callback as an anonymous function. If you’d prefer a proper function attached to a class or a closure or some other object, you can do that too.

In ActionScript 3, if your events grow, you start utilizing packages to organize Event classes to their domain of interest.

In Backbone, they want you to utilize namespaces (a colon to separate noun:verb) to delineate them.

myCollection.trigger("selection:changed", myIndex);
socketWatcher.trigger("user:join", userModel);

While JavaScript doesn’t support constants, many IDE’s can infer them through code hinting / intellisense like IntelliJ/Webstorm, Sublime, and Aptana. Although magic strings don’t go away in JavaScript, this is how you can mitigate the growth, make them easier to test, and prevent misspelling bugs.

You can also trigger many events in 1 call by adding a space.

book.on("change:title change:author", someCallbackFunction);

Since JavaScript has the same stupid scope challenges that ActionScript 1/pre-Delegate, you can optionally provide a scope (called a context) as the 3rd parameter.

model.on('change', this.render, this)

Unlike ActionScript, the Underscore event system allows you to hear about all events via “all” which is basically a reserved word/event name.

var logger = {};
logger.on("all", function(eventName)
{
	console.log("Event: " + eventName);
});

Notice here I’m using console which is basically JavaScript’s trace. This breaks IE. Don’t do it. Use log4javascript unless you’re a WebKit Only Kid.

To remove events, in Flash you just use removeEventListener:

myListener.removeEventListener("alert", onAlert);

Using Underscore, they have a lot more options here.

// Removes just the `onChange` callback.
object.off("change", onChange);

// Removes all "change" callbacks.
object.off("change");

// Removes the `onChange` callback for all events.
object.off(null, onChange);

// Removes all callbacks for `context` for all events.
object.off(null, null, context);

// Removes all callbacks on `object`.
object.off();

Finally, dispatchEvent is to trigger. ActionScript:

object.dispatchEvent(new Event("myEvent"));

Underscore:

object.trigger("myEvent", arg1, arg2, etc);

You can pass as many arguments as you want, and they’ll get passed in.

Take a hint from a guy who survived AS1 and AS2: pass an object as the first and only parameters; it’ll make your API more flexible and is an easier convention to follow vs. being forced to use event order from 2 disparate places in code.

Let’s review.

ActionScript: EventDispatcher
Backbone: Underscore.js

ActionScript: addEventListener
Backbone: on

ActionScript: removeEventListener
Backbone: off

ActionScript: dispatchEvent
Backbone: trigger

ActionScript: MyClass extends EventDispatcher
Backbone: _.extend(MyClass, Backbone.Events);

Backbone.Model

A Backbone Model is basically a PureMVC Proxy. That is, a Model that handles both access control to your data, change events via the Observer pattern, and it wraps a service layer to some web service that the Model’s data maps to on the back-end.

In Cairngorm it’d be basically the same thing. In Robotlegs it’d be a Model that has a Service injected into it. In Swiz, Parsley, and even in Robotlegs, the Model doesn’t usually contain validation, nor a service(s) with error handling. Sencha’s ExtJS and Touch do this as well with their Models, and it’s a common theme you’ll see with a lot of JavaScript frameworks. Doesn’t make it right, just something you’ll have to wrap your head around. Think a Rails ActiveRecord on the client with the ability to be mapped to various services; like localStorage vs. an actual Ajax call to some web service.

Additionally, it’s implied they are a single entity. Usually the whole point of Models or ValueObjects in ActionScript was to create a combination of data from both what the middle tier provided, but also things the client needed as well. There wasn’t always such a tight coupling between a database table and the Model you’re viewing. This is how Backbone Model’s are viewed.

Assuming you’re creating a framework-less Model in ActionScript, you’d go:

package
{
	import flash.events.EventDispatcher;

	class Person extends EventDispatcher
	{
		private var _firstName:String = "Jesse"

		public function get firstName():String
		{
			reutrn _firstName;
		}

		public function set firstName(value:String):void
		{
			if(value !== _firstName)
			{
				_firstName = value;
				dispatchEvent(new Event("firstNameChanged"));
			}
		}

		function Person()
		{
			super();
		}
	}
}

If you’re using Flex:

package
{
	import flash.events.EventDispatcher;

	class Person extends EventDispatcher
	{
		[Bindable]
		public var firstName:String = "Jesse";

		function Person()
		{
			super();
		}
	}
}

Or PureMVC:

package
{
	import flash.events.EventDispatcher;

	class PersonProxy extends Proxy
	{

		public static const NAME:String = "Person";

		private var _firstName:String = "Jesse";

		public function get firstName():String
		{
			return _firstName;
		}

		public function set firstName(value:String):void
		{
			if(value !== _firstName)
			{
				_firstName = value;
				sendNotification("firstNameChanged", _firstName);
			}
		}

		function Person()
		{
			super(NAME);
		}
	}
}

In Backbone it’d be:

Person = Backbone.Model.extend({

	firstName: "Jesse"
});

Notice how you’re “extending” a Backbone.Model. Classes & inheritance in JavaScript are a rabbit hole (all the things ActionScript 1 fixed in ECMA are still not fixed in JavaScript… not even in Chrome nightly builds), so for now let’s just pretend it’s what you think it is.

For working with Backbone Model’s, you use the get and set function convention. Sencha’s ExtJS and Touch do this as well. Meaning, you do not set things like this:

// Wrong
var person = new Person;
person.firstName = "Cow";

Instead, you set it:

// Correct
var person = new Person;
person.set("firstName", "Cow");
// or object syntax
person.set({"firstName": "Cow"});

The set method will trigger a “change” event automatically dispatched (triggered) from your Model. If you pass a

{silent: true}

as the 2nd parameter, it won’t trigger the event.

These events are automatically name spaced to the properties that changed. For example, in Flex, the convention was “propertyName” + “Changed”, like so:

[Bindable(event="firstNameChanged")]
public var firstName:String = "Jesse";

In Backbone, while the change will fire for anything, if you’re just interested in a specific property, you can do the same thing:

person.on("change:firstName", function(model, firstName)
{
	log("Person's change firstName, model: ", model, ", firstName: ", firstName);
});

You do NOT have to define these yourself like you do in Flash/Flex, it’s done & triggered for you automatically based on the property names on your model.

Like Sencha’s ExtJS, the Models have a validate method that can be applied on a per property basis. If the validate method is there, it’s run. If it doesn’t validate your change, the property isn’t set, and the change event isn’t triggered, and an error event is triggered instead. You can either listen for these, or pass an error callback into the set method itself.

A Model has a lot of other methods only server-side people care about. The only ones you’ll care about are fetch, parse, toJSON, and isValid.

Now for the scary things:

• Model’s have a fetch function that creates a jQuery XMLHttpRequest instance to populate your model from some url. Basically a lighter weight HTTPService (or nice wrapper for URLRequest).
• A built in parse method which defaults to smartly reading JSON responses. In Flash/Flex, we’re used to either using a Factory class, or a ValueObject that knows how to “build itself”.
• A save method that does the same, asking jQuery to serialize and save your updated Model.

One last thing to note that is mentioned in the 2nd bullet. ALL parsing is basically done in the Model. It’s assumed your middle tier is giving you JSON (bad assumption for larger companies who are infatuated with XML. Yes, I know it’s 2012, they don’t). You have the option to override the parse function and parse it however you want, like in the case of using XML.

This, as opposed to using Factories inside of your Service class, or using self-building ValueObjects. Then placing the results in your Model… vs. your Model class doing everything.

Individually these are strange, but ok. Together, they’re whack. A mash of functionality, at least in Flex projects, I’m used to separating out… even without unit tests. You don’t have to use these functions they provide for you, but it’s very clear they did a lot of work making it easy as pie to use Backbone with someone like Ruby on Rails without the client doing a lot of work.

Either way, the jQuery ajax calls wrap HTTP requests really well, so it’s not like you can’t introspect what’s going on. Callbacks work and Safari/Chrome/Firefox have better-than-Flash/Flex networking debugging tools as well.

Backbone Collections

Some brief notes about Backbone Collections. Like Sencha’s Ext JS, Model’s have an implied one to one relationship with some back-end service that populates your Model class. Collections are basically a bunch of Models. So if you get a “list of Contacts”, in Backbone it’d be a “Collection of Models”.

Backbone uses Underscore to add 50 billion useful array methods to it so working and filtering your Model lists is easier. The “nice” feature of Collections is you can set the Model that it contains, and all our add methods will automatically convert the JSON you pass to it. :: shrugs :: I’d rather have unit tests verify these access points, or even… you know… strong typing. Still, there’s tons of value if you’re using formalized JSON; I’ll show you in a second.

Collections have a lot of the same methods as a Model for interacting with the server, parsing, etc. This is where setting the Model of the Collection handles the parsing/populating for you.

Backbone.sync = function(method, model) {
  alert(method + ": " + model.url);
};

var Accounts = new Backbone.Collection;
Accounts.url = '/accounts';

Accounts.fetch();

The fetch method is a Model & Collection method for “go get data from the server at my url”. It’s like HTTPService’s send method or URLRequest’s load. It creates a jQuery XMLHTTPRequest internally. For those interested, I believe it’s using the multiple concurrency option (as opposed to first/last which you could configure for Flex HTTPService).

Notice if the Accounts model property is “Account”, then whatever comes back from the server will automatically be parsed to an Account Model. The url is the web service URL.

Also rad is the sync method. There’s a cool infrastructure here that you can read more about on Backbone’s site. Suffice to say they’ve abstracted serialization of your Models, whether you’re saving to a database or LocaleStorage (the string key value store you get in browsers that has more space the Flash’s SharedObject). This makes caching, mocking, and testing a lot easier.

One thing I found curious is your Model’s have a validate function but Collections do not. My guess is it’s trivial to use a forEach with a validate call, so they saw no need to add. Most Flash/Flex developers don’t really write these as much as they should. You usually either let the server guys code tell your data is bad, you use unit tests, or hope strong-typing finds problems when creating ValueObjects from UI controls. Sencha follows this validate mentality as well.

Router

Web applications are unique in that they have an address. Some even have an address that represents a state they can exist in. There is often a symbiotic relationship between the URL and the application. A different URL can put the application in a different state. Conversely, the application state is reflected in the URL.

The format, however, varies. The short of it is, everyone likes slashes, but # are used for backwards compatibility for those browsers that don’t support the History API (basically IE 9 and below). Backbone’s Router abstracts this for you.

If you’ve ever utilized Gaia to build a Flash website, you’ll know exactly what to use Backbone Router for. Sort of. Instead of mapping your web site’s pages, you’re mapping both page URL’s as well as URL query parameters to run functions. Yes, you could have those functions change a page, or just draw a new one. Gaia handled all of this internally including branching, hijacking, and URL modification. Backbone Router does a lot of the same but is a little lower level so you to do a little more work.

There are basically 2 features you can utilize. The first is when you go to a different section or state in your application, you can update the URL in the web browser.

The second is when the URL changes. Whether the user modifies the URL in the url bar, they press the back or forward button, or even if the user comes to the URL via a book mark or copy pasta. All can trigger a callback function for each type of URL so your application can get itself into the proper state, get the data it needs, or whatever else to correctly represent the URL.

Notice the routes hash below:

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

You extend the Router class, and then define the routes in the URL, and what callback function to call. While straightforward, you can use all kinds of string matching for more dynamic URL’s. Internally, those routes will call addCallback to initialize it. When you want to update the URL, just call navigate.

Using the Backbone.history class, you can monitor change events, support the back button in your app, etc.

View

A Backbone.View isn’t a View that a Flash or Flex Developer would call a View. It’s actually a Controller class on top of a Passive View that allows your GUI to have a less coupled integration into Backbone. All your HTML and CSS, whether made by hand or using a templating library like Mustache or Handlebars, has no code in it.

All the code that updates via the Models is done in the View.

All the code that listens for user gestures is done in the View.

So it’s the Controller in the Passive View pattern. Make sense?

I’ve seen 2 people utilize Robotlegs Mediators like this. One was a colleague who’d create MXML with zero ActionScript in it. Just like you do in HTML, he’d assign click handlers to MXML component id’s (or Sprite/MovieClip names) all in the Mediator. When his Model Actors would send out change events, he’d use the injected Models to update the View’s data usually with intimate knowledge of the view’s structure since it didn’t have any getter/setters, nor binding, to help with the drawing.

PureMVC could be done in the same way. There was a sect of people in the early Cairngorm days who used a ViewModel in a similar fashion.

A Backbone View was specifically created to handle HTML and CSS, and as such, has a LOT more references than just the passive view reference. Those are:

• el
• id
• className
• tagName
• attributes

Here’s a tiny Robotlegs Mediator:

package
{
public class AvatarViewMediator extends Mediator
{
	[Inject]
	public var view:AvatarView;

	[Inject]
	public var model:PersonModel;

	public override function onRegister():void
	{
		addContextListener("onPersonModelChanged", updateImage);
		addViewListener("onImageClicked", onImageClicked);
		updateImage();
	}

	private function updateImage(event:Event=null):void
	{
		view.image = model.userImageURL;
	}

	private function onImageClicked(event:MouseEvent):void
	{
		dispatch(new Event("onAvatarImageClicked"));
	}
}
}

When the ActionScript GUI class is created, it’s Mediator is created. It immediately updates the Avatar GUI with the latest user image. If the Model ever changes thereafter, the image is immediately updated. Finally if the user clicks on the image, it’ll dispatch an event on the frameworks event bus to let someone else handle it; maybe a Command, maybe another Mediator… etc.

Here’s the equivalent in JavaScript:

// make a global event bus like Robotlegs, or PureMVC's Notifications
eventBus = _.extend({}, Backbone.Events);
Backbone.Model.prototype.eventBus = Backbone.Collection.prototype.eventBus = Backbone.View.prototype.eventBus = eventBus;

var personModel = new PersonModel;

var AvatarView = Backbone.View.extend({
	id: "avatar-div",

	initialize: function()
	{
		this.model.on("change", this.render, this);
	},

	events:
	{
		"click .avatarImage":	"onImageClick"
	},

	render: function()
	{
		var imageURL = this.model.get("imageURL");
		$(this.el).html(this.template('
<img src="<%= imageURL %>" alt="" />'));
		return this;
	},

	onImageClick: function()
	{
		this.eventBus.trigger("onAvatarImageClicked");
	}
});

var aView = new AvatarView({model: personModel});

Using Underscore, we listen for change events from our Model. Also notice View’s are assumed to have 1 Model. If you’ve seen any reasonably sized Robotlegs/PureMVC app, you know this isn’t often the case, heh. It’s assumed this is not null when the View is created.

The click handler listens for a click event from our HTML div. Our render function, run when the View is shown and when our Model updates, draws itself.

Notice the id is just a string; I actually use the el, or “HTML element” to set its html. The template method is an Underscore method to do cool stuff; suffice to say it refreshes the div with a newly updated Image tag with our correct URL from the model. The purists will decry this, saying that HTML should never be put into View’s and instead you should use a template library like I mentioned above.

Ignore the return this in the render function. That’s for chaining support, a method for getting functional programmers off, making code unreadable, and helping the browser swallow exceptions.

And now for the hack. You’ll notice if I want a global event system like Robotlegs, you just create your own eventBus, and shove the mofo on Backbone’s prototype. Here’s a longer explanation if you care about why. That allows you to then send the application level event in the onImageClick callback.

One thing for those of you who remember ActionScript 2: notice the 3rd parameter of of the model.on. This ensures the callback is executed in the correct scope. It’s basically ensuring you don’t have to use Delegate.create. These are pretty hard to debug, too, since you’ll sometimes get “method is undefined” methods which aren’t true; it’s actually a null pointer exception since this refers to the function vs. the class. Just be sure to always set it.

Dependency Injection

Notice that all the dependencies, in this case the PersonModel, is already created and passed into the View’s constructor. In larger applications, this isn’t always the case, or gets unwieldy. There are various Dependency Injection frameworks out there to help with this, such as Wire.

Robotlegs handled this via Dependency Injection as well as through Command startup conventions. Basically, as your application grew, you’d offload a lot of the startup to wiring up your dependencies, or instantiating them yourself if they required something more than a “new Thing”. Things such as “MainContext” would become “StartupCommand” which then broke off into “InitializeModels”, “InitializeMediators”, which even later broke off into “InitializeProductModels”, etc. You had a refactoring path.

You’ll eventually want to do the same with Backbone as your applications grow, especially if your Collections get kind of large. The browsers have a lot better libraries & functionality to serialize & read your data back compared to Flash Player in the browser, so it’s not always a huge deal to save your data to disk. They also destroy easier too.

Here’s how you configure a Singleton OmnitureModel in Robotlegs:

// ApplicationContext.as
injector.mapSingleton(OmnitureModel);

Here’s how you do it using Wire:

// ApplicationContext.js
omniModel: {
   create: {
      module: "models/OmnitureModel'
   }
}

Wire also supports a modicum of binding expressions so if you need some extra data initialized in your created class, whether constructor arguments or not, you can do so. This is invaluable for Backbone View’s who often need at least 1 Model reference when they boot up.

Although I’m still learning DI in JavaScript, I found Wire helpful in configuring Backbone Models to work with local data sources instead hardcoded service URL’s. You just create a locale application context js file (like a new Robotlegs Context file) to configure the application to use locale data sources instead. So far I’ve been only able to get this to work in a few browsers as you’ll see below.

Local File Access

Flash was nice in that it had a localTrusted security sandbox later with a unique per system file for mms.cfg configuration to allow secure sandboxes. Browsers aren’t like this.

Firefox requires some config changed to allow this.

Safari and Chrome still want you to launch it in a certain mode.

I still haven’t figured out IE.

I’ve been using Charles for mapping to local directories on my machine. This is used to fool the browser into working, even for production URL’s, so should work in IE when I have more coffee.

John Paul suggested I use Underscore’s wrap function as another alternative which I haven’t tried yet.

Modules / Packages / Dependencies

As your application grows, you’ll quickly outgrow initializing everything in your index.html; ie you’ll start to get a lot of classes. While Backbone comes with Underscore to give you basic inheritance beyond Object.prototype, you still have no package solution like ActionScript 2/3/Java/Ruby/Python/PHP/Corona/C#… (hell, everyone but JavaScript) give you.

Additionally, you don’t have a dependency management solution; you have to manually control who’s loaded, and when. That is simply not feasible in a reasonably sized JavaScript application, even with 1 developer vs. 4.

This is where RequireJS comes in.

Considering Require has to account for how you create “classes” in a language that provides basically (lol, basic… yeah… heh… sigh… :: takes a shot ::) 3 ways to do so (Object.new, Object.prototype, and closures), various libraries that have their own dependencies, as well as how all libraries handle putting themselves on the global objects (ie window, document, etc.) differently… Require has a lot of work to do on just cleaning up the language.

ActionScript 1 solved part of this via the #initclip / #endinitclip pragmas. You’d put those at the top of your class with a number, like #initclip 3, and you could then control the load order of classes.

ActionScript 2 solved the packages part by building packages that compiled down to object dot notation, and abstracted both that as well as the #initclip stuff away from developers.

ActionScript 3 gave you namespaces with traits to speed up prototype chain lookup speed.

JavaScript has none of that.

Require tries to do all of that. And then some, such as optimization. Just read the why and you’ll get it. Backbone apps work just fine with Require, and I encourage you to do so to ensure your application can reasonably scale on a multi-person team right out of the gate.

Here’s how you use Robotlegs in a class within a package (set of nested folders):

// MainContext.as
package com.jxl.minecraftrecipes.rl
{
	import com.jxl.minecraftrecipes.rl.mediators.FavoritesRecipeViewMediator;
	import com.jxl.minecraftrecipes.rl.mediators.RecipeViewMediator;

	import flash.display.DisplayObjectContainer;

	import org.robotlegs.mvcs.Context;

	import views.FavoritesRecipeView;
	import views.RecipeView;

	public class MainContext extends Context
	{
		public function MainContext(contextView:DisplayObjectContainer=null, autoStartup:Boolean=true)
		{
			super(contextView, autoStartup);
		}

		public override function startup():void
		{
			this.injector.mapSingleton(FavoritesModel);

			mediatorMap.mapView(RecipeView, RecipeViewMediator);
			mediatorMap.mapView(FavoritesRecipeView, FavoritesRecipeViewMediator);

			super.startup();
		}
	}
}

Here’s how you do the something similiar in Require:

// config.js
(function() {
   require.config({
      baseUrl: "./js",
      optimize: "none",
      paths: {
         "../../libs",
         handlebars: "../../libs/handlebars/hbs"
      },
      packages: [
         {
            name: "underscore",
            location: "../../libs/underscore_132",
            main: "underscore",
         },
         {
            name: "backbone",
            location: "../../libs/underscore_132",
            main: "underscore",
         }
   });
}).call(this);

Basically configure the root directory (“js”), set some paths so you can use them either as additional source paths, or short cut names (like I did with handlebars), and finally determine your packages: where they are and what their names are. Keep in mind Require has a strict coding convention for what packages are.

Optimization

When you compile a Flex or ActionScript application, here’s basically what happens:

1. all MXML is converted to ActionScript
2. all ActionScript is converted to ABC byte code (small, procedural)
3. ABC is converted to MIR (a language JUST above machine code; easier to target different chipsets & optimizations in MIR)
4. some MIR is converted to native code, some is compiled natively via JIT, and some just chills out
5. all of that is compressed via gzip with additional optimizations to shrink it to a small file size (remember, it was made this way when modems ruled t3h interwebz and bandwidth was tincy and faulty)
6. images are compressed, whether using PNG or JPEG
7. audio files are compressed (ADPCM, MP3, Speex, etc)
8. fonts are converted to 1 of the 3 font engines, sometimes decreasing file size as only certain glyphs are converted to specific vector graphics)
9. any other file is embedded and gzipped
10. all this is put into a single SWF file, usually on frame 2, with a class on frame 1 to show a preloader and “new” frame 2.

Why is this good? You get an ultra compressed, self-contained, single HTTP request file with all dependencies delivered to the client in a streaming fashion. And it works. This is why we Flash Devs never got JavaScript’s eval, because our code is actually compiled. JavaScript in the browser has none of that.

• All files are un-optimized text. Seems trivial, but for large applications, this can add up. For smart phones and tablets, while sometimes fast, this costs people money.
• Since there are multiple files, this is multiple HTTP requests. These take both time to create/destroy, and elongate how long it takes for your application to start and/or transition to a new section. This is really bad on some mobile devices, not just desktop. It’s REALLY fun to use these apps on slow VPN.
• If a class isn’t loaded let and you try to use it, things break.
• Browsers love to swallow null pointer exceptions making the above really challenging to debug.
• While you could theoretically remember to load certain files in certain orders, God help you if you ever have to, heck, WANT to refactor. On a multi-person team, even with Git, you’re eff’d.

Require has a variety of optimization tools that basically combine all your files into a single JS file, strip out all whitespace, convert all your variables to 1 letter variables, amongst other things. Basically makes your code unreadable, too; obfuscation isn’t the goal here, though. There are many others too like JSMIN and Yahoo’s YUI, many of which you can use in a browser.

Conclusions

As you can see, Backbone has a lot of the core features you need to build applications in JavaScript. It has Models that follow the typical Observer pattern of holding your data and broadcasting messages for those who care to know about changes. It has View’s (which act as Robotlegs Mediators or the Controller on top of PassiveView HTML) allowing you to handle the traditional race condition of “my data is ready, but my view is not” vs “my view is ready but my data is not” by both accessing Models directly and listening for messages via Underscore’s messaging system which you can make a global event bus if you wish. Finally, it’s Router allows you to marry your application as a state machine against the browsers’ URL bar to support both deep linking, back/forward navigation, and history.

Riding on top of Underscore, it ensures you have all the basic necessities you need for making JavaScript easier to use. Although, I still think if you’re going to utilize JavaScript swapping out dynamic HTML for Views, then you really need a good templating engine such as Handlebars or Mustache.

The current pain point I’m still working on and haven’t figured out yet is unit testing Backbone models. On reasonable sized Flex projects that have issues, my first order of business is to break out the parsing logic and the service logic into separate classes so I can create them as units to be easily tested. This copious refactoring continues until “a Model” consists of a variety fo classes. Backbone puts all of them together into 1 class and with browsers having really strict local file access rules + the fact services are actually inside of it via jQuery Ajax calls, it has made it challenging to fake their service calls to fixtures/mocks… and test only 1 thing. Anyway, I’m still learning.

Hope this helps!

I’m in a hurry.

I don’t want a history lesson.

Get comfortable, this is long.

Preface

I had the pleasure of attending a 5 day fast track for Sencha’s Ext JS 4 in New York last week with my partners from Web App Solution. Of the 13 people that attended, 7 were Flex Developers working on Enterprise Applications. Yakov and Victor from Farata Systems were there and Universal Mind had John Yanarella representing.

While the technical future of Flex is extremely bright and exciting, the business and marketing future of it is over. Adobe, with the community’s help, has ensured that it is in the best hands with the Apache foundation. With a multitude of capable, brilliant, and diverse contributors to the open source project, there are definitely a lot of great things on the horizon for the next Flex SDK.

Adobe has also ensured, intentionally and unintentionally, it has a limited future which will ensure Flex is no longer invested in any technical capacity from small, medium, and large businesses unless absolutely essential, or under the radar. The mobile revolution has happened, and while Flash had the opportunity to play a pivotal role, Macromedia, and later Adobe have failed to take the initiative and successfully execute on it.

While there is still a significant business & technical advantage from a design, development, and workflow perspective in the Adobe AIR stack for developing & deploying on Android and iOS, Adobe has made it a clear that they perceive it is an opportunity they are not interested in pursuing on the developer front. This is a huge topic mostly discussed from a technical perspective in the community, and only a select few blog articles got it right from a business one… and even then, those missed it from a technical perspective.

Bottom line, Flex Developers are between a rock and a hard place in the industry right now.

The type of work they do for desktop web applications is different from what Flash Developers do, mainly in team size, project scope, and client base. It’s not as simple as “just use jQuery, and move on”. While the tools & runtime we use are technically sound, even clients who have a technical understanding of the marketplace & toolset will not invest in a perceived abandoned platform. Server-side offerings do not offer the rich client experiences we’re used to creating. The plethora of frameworks in the web market, both open source and proprietary, do not offer the same tooling, performance, and expedient workflow we have on the Flash Platform.

… except Ext JS. Sort of.

As stated by John Yanarella at the training last week:

“Out of all of the web based frameworks out there, Sencha’s Ext JS is the best safety net there is for Flex Developers.”

It has the necessary component framework, a growing company with enough resources & funding at a specific size behind it, with a competent web & mobile technical story that has the potential for critical mass within an Enterprise context.

Thus, given my company’s need to offer my clients an HTML5 alternative to Flex, Ext JS seems to fit the bill. Considering time is at a premium nowadays, the fast track training Sencha offers seemed like a great opportunity. And I love New York so any excuse to go there is great.

Given the whirlwind that was the past 3 months, as well as reflecting upon what I learned from the training, I thought it prudent to write down my thoughts here. There are a lot of Flex Developers who are looking for direction, so I’m hoping this is one for them to follow.

Background

As a Flex Developer faced with a forced career change driven by forces beyond my control based on the infamous events of November 9th, 2011, I had 2 choices. Do what I always did back in my 20’s and dive headlong into the unknown, or let the pioneers get the arrows in their backs as it were. Now that I run a business and am a father of 2 children, I don’t have the free time I used to back being single and W2. Flash & Flex, even on death march projects, allowed me to get up in the morning fueled by the passion of using my favorite technology, and attack problems full bore.

Surveying the landscape, things were pretty grim… even for someone positive like me.

While the iOS stack had a clear advantage with both a growing developer base, mature tooling & framework, and customers who actually paid for content, none of my large clients actually had initiatives around iOS work. Enterprise applications, known for their copious amounts of input needs from the user, do not translate well to the small screen size and lack of keyboards on smart phones and tablets.

As such, while the uptick in service based software shops servicing the needs of clients who need iOS applications has increased, the scope of said projects is not as large and often is more consumer based. The latter is troubling as it’s hard enough utilizing ActionScript 1 in a deadline driven environment that Design Agencies employ; dodging technical debt for as long as possible in Objective C, even with superior tooling is not appealing when longer and more profitable projects exist with the opportunity to have competent peers beside me vs. being a lone wolf. Learning a lower-level toolset for shorter engagements that pay less makes it a non-starter.

Android, while being easier to deploy to as well as more easily iterating with your customer base, is notorious for it’s fragmentation, both programming and design. It’s hard enough for designers to lessen the overall experience via responsive web design to compensate for a variety of screen sizes. You now have developers who cannot turn as fast as designers can and thus have to spend more time on a platform that doesn’t generate nearly as much, if any, revenue from consumers compared to iOS. This doesn’t even broach the business topic of how do you lessen the maintenance cost on your customer when they have to hire both an iOS and Android developer, or some awesomely expensive hybrid who can do both, to handle both platforms. The other bizarre thing about Android is that it is taking the PC approach to competing on price with iOS and continually increasing market share, yet doesn’t seem to be generating the service revenue compared to iOS (ie people who own Androids don’t buy apps as much as those on iOS). Same problem as iOS: Invest in a lower-level technology with massive fragmentation for shorter projects that pay less money… again, non-starter.

The multi-development & deployment problem was what the web was supposed to solve. While native development does give you significant user experience & tooling advantages,   it seems wrong to invest my career for applications that my current client base do not target. Every single large client I’ve had treats mobile as either a fun skunkworks project, experiment with no perceived ROI, or as a necessity with the minimal amount of money devoted to it, sometimes taken from another project’s budget ad hominem.

Both don’t bode well for a future career from a consulting perspective in mobile.

While consumers bringing their smartphones, tablets, and technology of choice to work has had a huge impact on large companies, most Enterprise customers still target the desktop web as the main avenue of both B2C & B2B based revenue. While many have made huge and wonderful strides in providing value for their mobile websites, it’s clear many either provide a lot less functionality than their desktop counterparts, or strain at even that.

With large media companies it’s a little different. Studies have shown that tablets are better at allowing consumers to consume content whereas desktops/laptops are better for producing content. While “duh”, having studies like this made and corroborating themselves verifies what we already know. They have a vested interest in increasing consumers ability to purchase and access that content in a controlled manner.

The problem here is that the budgets for those projects doesn’t increase with the needed targets.

For example, while working on HBOGO.com, the initial release of the iPhone app did not allow you to watch videos. The Flex app we did at the time was the only way to view videos. Overtime, it was prudent to support both iPhone and iPad versions. A lot of companies, however, don’t magically get 2 budgets, 1 for the web and 1 for the iPad just because the iPad is so cool. While the GUI’s needed for iPhone and iPad are simpler, you still want to create the same user experience for the customer, especially if they are using all 3 to access their content. The Iron Triangle verifies that something must give, and thus, the scope/functionality/user experience often does.

Investing in a mobile technology where consumers pay less, and larger businesses devote less capital to the same projects doesn’t bode well for investing the smaller portion. If I were back in 2002 still doing design agency work, I’d totally be an iOS developer right now. As a consultant who does more than build software, and who doesn’t see his clients changing their plans, I see no prudent reason to go the iOS/Android device route. …… beyond them being really fun (another story).

Appcelerator, Corona SDK, Sencha Touch, and PhoneGap, technologies which allow you to deploy to multiple mobile platforms with mostly the same code base and skillset, can be lumped in the same bag as native with the above perspective.

Why invest in technologies that offer less money and my clientelle isn’t using?

On the flip side, the HTML5 moniker has taken on a life of it’s own. While not necessarily  representing the full JavaScript, HTML, CSS, and associated libraries & frameworks stack, a lot of clients big and small have been sold the bill of goods that it solves the same multi-platform, multi-device problem that the Flex/Appcelerator/Corona/Touch/PhoneGap attempt to solve: single code base, single developer toolset, and multiple targets within their same organization.

I won’t get into the phenomenon that is HTML5. All you need to know of the context of this post is that a lot clients either suddenly think HTML, CSS, and JavaScript can provide the same experiences we can do in Flex for the same price using the same teams… or they know it’s false, but either their Board of Directors or Business Customers force them to use the tech anyway for political reasons that have nothing to do with engineering ones.

The Challenges of the New Platform

The issue, however, is that it’s not that straightforward. There are 5 main issues that the HTML/JS/CSS stack (which I’ll here after refer to as the HTML stack), have when coming from the Flex platform in a consulting context (there are more, but these are the ones that matter with regards to the context of this post). They are:

1. DOM as a dynamic display technology
2. JavaScript lacking mature language constructs
3. There are larger problems for multiple Browser Vendors to solve
4. the industry’s libraries & frameworks are young from an Enterprise context (yet not!?)
5. The Video Codec Issues
6. Tooling

The Document Object Model

The HTML DOM wasn’t made to do the type of applications we do in Flash, more specifically Flex. Flash Player was developed specifically around cross platform visual fidelity with a web bent. More importantly, though, it was built around redraw. This perspective of “frames per second”, and continual improvements around the underlying timing of redraw, building upon what a platform does well, and then abandoning a “new” 5 year old display technology to support a GPU future.

Browser vendors are doing some pretty amazing things with the DOM, from hardware accelerating the display, continuous redraw optimizations, all the while doing their best to follow ever evolving standards amongst our changing technological landscape. …based on a tech designed and created to show text. That’s awesome.

Sadly, the redraw performance isn’t awesome. While a lot of Flash and Flex developers never really got the purpose and value of invalidation in Flash Player, even with a technology created for displaying and animating composited graphics, as your application scales, it’s easy to create a system that redraws too much. Invalidation helps mitigate (usually solve) that problem for 90% of the use cases in applications. In a nutshell, it means you can set properties on your visual components as much as you want to in a single thread and ensure it only actually redraws the screen 1 time.

For browser DOM’s, this is exemplified even with the drastic CSS improvements. The philosophy is to never redraw the DOM if you have to, and if you do, do so on the smallest section possible. Browser toolkits such as Ext JS,  Dojo, and some others do this very well. While they have the advantage of browser CSS to help mitigate some of the redraw performance drags, compensating for both past, current, and future browser incompatibility in an easy to use & scalable API shows just how brilliant some of those browser developers really are. Based on what I’ve continued to read, this seems to be getting better although not as fast, nor as widely deployed, as Flash Player did which means the problem isn’t going away soon and thus the need for x-browser, x-platform invalidation continues to be important. Thus, Ext JS’ commitment to efficiently redraw the DOM is appealing.

One thing John brought up at the Ext JS Fast Track training last week was the lack of positive sales around hybrid solutions: using Flash Player and the HTML stack together. If you need to play video or animate/show a lot of composited objects, combining the 2 technologies together.

Hulu and YouTube proved it can work with video and movie subscriptions. Grooveshark proved it can work with music (and video, heh). Google Finance and Analytics proved it can be done with charting.  Balsamiq proved it can be done with desktop designer tooling.

Bottom line, things are pretty bad but getting better slowly, and there are mitigation paths that can utilize Flash Player in the interim. Canvas is finally getting hardware acceleration across platforms also making it another another tool to help.

This doesn’t seem to be getting much play, but considering we’re all supposed to magically know a multitude of platforms, languages, and yet have multi-talented sub-contractors that meet that criteria and deliver the projects in the same time frame clearly means that option is also on the magical table.

JavaScript in the Enterprise

Surprisingly for me, JavaScript the language has dominated the discussion the past 3 months in where I’ve lurked in social media circles amongst the Flash & Flex Developers. For those of us who grew up in the industry and our careers with Flash, it came quite as a shock for the industry to fall back in love with JavaScript.

While it made sense for server-side developers to reduce their code size as more logic goes to the client and their servers get faster and cheaper, we’re still a little confused as why the industry isn’t salivating for a statically typed Harmony (resurrected, non-elven remains of ECMA 4).

Most of us Flash turned Flex developers grew up using ActionScript 1. For those who don’t know, this is near exactly the same as JavaScript/ECMA 3. The difference is instead of doing an innerHTML on a div tag, you just call methods/properties on a Sprite. As our projects grew in scope and # of developers, the language started to show its scalability problems. You’d run into more and more null pointers from misspellings, even with better tooling to help provide code hinting. You’d also get errors, but no clue where they came from since there was no common way of handling errors in ActionScript 1.

Furthermore, if you didn’t provide source, the developer was screwed because there was no way to easily introspect API’s unless you read the documentation or source; things like Aptana didn’t exist back then. This also implied, however, that even though there were things that weren’t public, developers would still call them anyway if they didn’t understand your name spacing convention (such as using an underscore (_) prefix for private variables and method names). While Lua and other languages have tricks using closures to emulate access modifiers, this never caught on in the early Flash world. The path for RIA’s at the time was larger projects with larger teams, and thus they adopted a more Java esque method of language development while still trying to match ECMA 4 as best they could.

Finally, loose typing/variants also made it harder (in theory… which has been proven wrong by Google’s V8) for Macromedia/Adobe compiler engineers to make the language run faster than JavaScript.

Thus, the natural evolution was for a strongly-typed language with proper packages and namespaces (or access modifiers like public/private) to help us address the larger applications we were developing. It did. It was, and is, awesome.

…for some. About the same time as I started getting more consulting, I also started noticing a larger awareness to the different types of businesses using Flash and Flex. In the Design Agency world, the majority of the work was 2 months to 2 days, and in between. The teams were often 1 developer; if there were more devs, they both weren’t on the project the whole 2 man months. They hardly ever payed their technical debt (unless you were a consultant with them). You started to see a strange love/hate relationship for a lot of these devs. In some cases ActionScript 3 helped these developers, who were on a deadline and often never paid their technical debt, manage said technical debt with AS3’s improved strong-typing and runtime exceptions with the ability to use loosely typed constructs when needed or in unknown territory.

On the flip side in the Flex world for larger companies that gave a flip about design, and more about feature count, the language constructs were barely enough. Constantly we’d get barraged from developers in more low-level languages like Java, C#, and C++ about why is AS3 is missing this or that (true Singletons, true Abstract classes, threads, blah blah blah), and how do you emulate such features.

It was very clear there was a split was growing. I could elaborate on all the niceties, but suffice to say, the Flash Devs didn’t need all the language features & strict complexity rules whereas the Flex Devs couldn’t get enough. Again, a simplification on the nuances of  a thriving, diverse, and changing community, but accurate.

Most of the Flash devs have had little trouble beyond the first 2 hellish weeks of getting immersed back in the DOM, CSS, and JavaScript variant world… only with better tooling and libraries + choices than they had 7 years ago when they 1st abandoned it for more creative pastures.

The Flex devs, however, haven’t seemed to budge en-masse. We have people telling us we don’t need those things in a language, yet when we ask them to show us a large Enterprise Application that utilizes JavaScript, they either are using an intermediary language to compile to it (Java in Google GWT or Oracle ADF, C#/VB in .NET, or CoffeeScript), or just can’t deliver the goods. Same excuse us Flex developers gave the Slashdotters around “show me a cool app built with Flex”: “It’s behind the firewall”.

There’s also a lot of misunderstanding about simple things like OOP. Using Object.prototype for “emulated” classes is what I did for 4 years… I have no major qualms about going back. Ext JS in version 4 abandoned this practice as well. While I grew up with Object.prototype insanity and learned to love it, the debate vs. clsoure/function inheritance vs. Object.prototype rages still. If you care, Keith Peter’s has a good article on the nuances of it, or you can read what I did to learn ActionScript, Robin Debreuil’s book.  There are others, but the point here is we Flex Devs expect classes not just for encapsulation, but create organized code with a common workflow to share code amongst many developers. JavaScript wasn’t made for classes, but using Object.prototype or the closure method in a declarative manner works just fine (like ImpactJS or Ext JS does).

While I like Keith’s take and respect his opinion, not having classes and encapsulation won’t work in large teams, often setup to fail at the outset by politics, nor all being Keith Peter’s caliber (me included). The other option to “not working” of course (Goonies never say die), which I’ll cover later, is that it’ll just take longer and/or we’ll accomplish less. The rules of Mythical Man Month, Technical Debt, etc. still apply regardless of  language/platform. It’s worse in Consulting when coding software, extremely hard in it’s own right, is the least of your problems.

Compiling to JavaScript

In fact, some are so staunchly opposed to utilizing JavaScript as a serious language to build Enterprise Applications, that they’ve investigated alternatives to compile TO JavaScript using an intermediary language. This has long been the process for server-side platforms with a variety of templating engines out there that make it a hybrid process of injecting data into your HTML. The problem is, they either have a server-side bias, or aren’t ready for prime time in a large Enterprise Scale. Remember, you can’t just be good; you have to have money, a company of decent size behind the tech, funding, and have reached critical mass for your product.

While the reaction was very positive around the work Adobe was doing with FalconJS for those in attendance at the FlexSummit, it was very clear to me it was a science experiment with no hope in providing the needed migration path for Enterprises. The amount of work, resources, and time needed to bring it to Oracle ADF, Google GWT, or .NET caliber is clearly something Adobe didn’t seem willing to devote. That, combined with their clear direction of no longer focusing on developers.

Google Dart seemed like a light at the end of the tunnel. It, too, however, seems to be a science experiment of Google scale. It has all the hallmarks for a bright new project:

• Google is behind the engineering effort
• has a strongly-typed language that, like CoffeeScript, not only sets out to improve upon JavaScript’s problems, but provide mature language constructs you need in larger applications within the language itself (unlike CoffeeScript’s/Google Closure’s/TypedJS annotations
• has 2 compilers: 1 a Flex Developer would use (dartc) and 1 a Flash Developer would use (frog).
• is based on Eclipse (good and bad, let’s just pretend the good parts here)
• brought on Alex Russell of Dojo fame to take a fresh look at the DOM event API
• Cliff Hall of PureMVC fame (multi-language framework used a lot in Flex) made a first version port for Dart.

…yet doesn’t seem a priority since while a web based technology, it still hasn’t reached critical mass, nor does it show any signs of doing so yet. I’m more concerned about the amount of resources I’m seeing being devoted; maybe there are more, and like all things Google, they just don’t advertise it. I really wish I could just parachute drop a Porter & Bogusky contingent in Google someday…

So far, the only contender is CoffeeScript. Here is a video and slide presentation to check out on if you have time. However, Ext JS uses declarative JSON + JavaScript. I have not seen any signs to see if Sencha is interested in porting Ext JS to Dart. Just say it… “Ext Dart” (pronounced “X Dart”); sounds like a dope dubstep ninja weapon, right? You’d certainly get better jokes from non-tech savvy people at parties when someone hears you’re a “Flash Developer”.

The other problem is that you need everyone in your organization coding the same language. In product companies, it is TOTALLY fine to have a technology du jour with Ruby running your builds, PHP running your render farm, and Java running your back-end, but for development purposes on 1 particular platform, you standardize on a language and usually have company ordained standards on it. This is for maintenance costs, and hiring standards, and a variety of other reasons that aren’t just around cost.

If anyone has CoffeeScript running atop Ext JS, let me know how you got your build process setup.

Browser Issues

Notice I’m specifically talking not just about incompatibilities between browsers, but missing features. For example, just 3 days ago Google added weak collection keys into V8 (their JavaScript engine for Chrome). Developing data models with string based keys can be extremely hard for complex model logic. Having a Dictionary (or Object) that can use something other than a String as a key is extremely useful… until you have to remember to kill the key when the object is destroyed. Enter weak keys and queue the “woo hoo!”.

One of the great things about Google’s approach with Chrome is not only is it the fastest updating piece of software that matters in history (faster than Flash Player), but they iterate quickly on features. While we’d wait 18 months for AS2 and then 24+ months for AS3, and in between get language updates… JavaScript is getting that piece by piece. It’s a wonderful thing, but also brings up a larger issue.

What do you today?

You have to do SOMETHING. Given each browser implements different features different ways, and JavaScript’s functional + prototype nature, you can easily (*ahem*) abstract away these problems into a useable API that hides the differences. Certain low level things like maps can be tricky, however, and come at the cost of performance, library maintenance costs, etc.

Fine, no big deal, you just move forward using an Object hash approach. We’ll just wait a couple of projects before maps + Dictionaries catch on in all browsers.

…but what about Web Worker (also known as threads for web developers)? It’s only supported in IE9 while Firefox/Safari/Chrome are good to go. While you can emulate via green threading, this is a FAR cry from emulating the lack of getter/setters in older versions of IE, or even emulating Canvas for Internet Explorer 8 via a VML wrapper. Those work. Green threading is not the same thing as a separate process that ensures it doesn’t lock up your GUI thread. The lack of full browser support will prevent some features from actually working and there aren’t any fall backs that can be utilized.

For some charting/plotting applications, these are essential features: no web worker, no application. Now in Flash, you’d just plan around upcoming features, both those you voted to be actual features, or those you knew were coming down the pipe. One tactic of design agencies, and Macromedia/Adobe in general was to have them launch a high profile app/site/widget to showcase these features upon launch.

If you are to inspect all upcoming features in browsers, not just JavaScript, but CSS, hardware & display related, etc. it really slows down when we expect certain experiences in our applications. While Macromedia/Adobe would drag their feature on certain things like right click and threads, the process was generally the same:

1. identify a problem you had on projects
2. bring it to your peers & Macromedia’s attention
3. rally support through email list/blog/twitter posts/talking to company reps at conferences
4. make writing & validating the use case easy
5. get community votes when desperate
6. await new feature(s) in upcoming Flash Player, beta test if lucky

While this process for Chrome seems EXTREMELY quicker, for the rest of the browser market as a whole, including smart phones and tablets, not so.

My college professor said, “There will always be work to be done.” Unless we use hybrid implementations, clients will just have to live with the slower pace of innovation if they want broad adoption. I guess I’ll live, I’m just curious where my excitement will come from if the toys remain the same, or only 1 browser implements a new feature I can’t easily abstract. That, and it seems a lot of innovative projects will either start to be browser specific feature branches, or just wait for broader adoption amongst modern browsers. It’s sad. And frustrating for both my clients and my team.

Wild West: Libraries and Frameworks

What’s fascinating to me about the JavaScript landscape is how much longer it has been around with a lot more people and yet the landscape with regards to frameworks and libraries is still in major flux on a few fronts.

In the Flash World, there were 2 frameworks that people would use, if ever: ARP and… just kidding, 1. While the tweening libraries got a little out of control, and the component frameworks became pretty niche, overall there was a library for everything, sometimes with an alternative if you didn’t like one particular implementation. A lot were ported from other languages, like Java and C/C++.

Frameworks didn’t really start to rear their head until Flash RIA applications started to become mainstream, and Flex was born. The Java developers coming over didn’t see any common MVC/MVP/MVVM frameworks that allowed them to manage copious amounts of code on the client side vs. middle tier. Cairngorm, PureMVC, Swiz, Parsely, and Robotlegs were born. Cairngorm is still around, but Swiz/Parsely get most of the play in the Flex world with PureMVC and Robotlegs hitting both Flash and Flex.

With exclusion of Cairngorm, all 3 have a lot in common. While everyone somehow manages to make their own implementation, learning one helps in learning another. Additionally, most never made it past a version 2, and even then most of the changes weren’t a dramatic workflow change.

JavaScript is nuts on the framework front. While the libraries themselves are great in that once you get over the burden of reviewing 5 of the same thing, the frameworks on the other hand are all over the map. Some are just query helpers with binding thrown in. Some are actually a certain group of existing libraries with a defined way of working with them, and thus named a framework… even though no code is actually associated with the framework itself. Worse is the versions can sometimes be drastically different. If few in #, this wouldn’t be a problem.

Worse, there are 100 times more people in the JavaScript community with their own opinions on what MVC means. What MVP means. What MVVM means. What the differences are between the 3. Their own descriptions for what the differences are between Passive View, Supervising Controller, and Presentation Model… and sometimes pretending (innocently) that the only thing that exists is MVC, period.

The other thing that is clear is that there are a variety of applications (not progressively enhanced websites) that are done with JavaScript, and thus each framework targets that particular version. For example, PureMVC and Robotlegs have Mediators which make it easier for the View (what you actually see) to change a lot during the project, yet still keep its ability to get it’s data without race conditions, and have it produce the necessary  user gestures through Events. Swiz on the other hand, had a Presentation Model injected into the View, and you had a nice API the View could call/get it’s data from. A lot of Swiz guys I talked to NEVER used the states features in Flex 4… nor saw the point. GUI changes didn’t affect PM API, they weren’t complex enough that you had to use mock interfaces for the PM’s to test View’s in isolation… so for this group, it worked well. In retrospect, this was a nice, natural evolution that happened.

I’m seeing the same thing in JavaScript, but it’s massively larger, and a lot of times you’re cherry picking either a specific feature of a specific library to be used with other ones, and you’re settling on a version. The last one is worrisome from a consulting perspective. When dealing with clients, Technical Architect/Directors want to ensure whatever framework you settle upon has good online documentation, you can hire people who know it, and it has a future. Using the same metrics I use to do so for frameworks in the Flash/Flex world is a little harder; just because its someones side science project doesn’t mean it’s not immensely useful, nor easy to learn.

The other challenge from a consulting perspective is leaving clients with work that they can support… or my firm would even want to get involved in. For example, there are copious reasons Ext JS 4 moved away from Object.prototype modifications. If you adopt a Ext JS 3 project from a client, you now adopt those problems even if you didn’t write it. With Flex projects, you eventually learned what problems there were from porting a Flex 2 app to 3, or what parts of mx were supported in Flex 4, and could find blog posts covering these challenges. With JavaScript, I’m finding a hard time finding commonality between the stacks that different companies are using.

I. Do. Not. Want… to be a non-Enterprise TA right now. Holy fish. Like, it’s 2008: “Yes, we’re using YUI version 2, it’s rad, has a large company backing it, and we can hire for it.” It’s 2012, and you’re either a jQuery, Sencha, or Dojo kid… oy vey.

So far, with the exception of Ext JS’s MVC implementation, it seems to have all of that solved in version 4 as best it can with the ability to have your own libraries added in with your own modified build process over theirs as well if you see fit to do so.

Video Codecs

No one has solved the codec problem yet. This is where HTML5 video just doesn’t work as advertised. I won’t go too much into this topic as for Enterprises, you’re usually more concerned about VOD, DRM, multicast and live streaming which Flash owns for desktop and HLS owns on iOS. More info about the WTF here and the OMG here.

I only bring it up because it’s just accepted in our world that video and compositing of it + assets is expected in our content, yet now… it’s not. Good designers can make it work, but the point here is from an integration perspective the cost of integrating that content.

Tooling

Lastly is tooling. While Aptana makes an attempt, it seems that Microsoft’s Visual Studio is the only IDE that seems to take web development seriously for those building large applications. Since me and a lot of people I know in Flex development use Mac’s, it seems our only alternative is JetBrain’s WebStorm. Granted, they have other flavors of their IntelliJ IDE,  but without commonly expected functionality like code hinting, intelli-sense, and re-factoring, it’s hard for use to take web development seriously.

There is a huge productivity cost that people seem to forget when you move from Eclipse/IntelliJ with those features to Notepad. When you have multiple developers, that time spent adds up, as does the lack of accuracy on your team’s velocity in solving issues.

In 2004, a lot of Java Developers tried out Flash. They then left. Adobe then created Flex. Some came. When Flex 2 came out, the runtime worked, the language worked, the components worked, but more importantly, the Eclipse IDE at the time… worked. The refactoring was, and still is not the best compared to IntelliJ and Visual Studio, but it’s enough for them to take it seriously. That’s when they came en masse, and peeps like Bruce Eckel were like, “Flex is good stuff”.

Going into an Enterprise and telling developers they are no longer allowed to work on Enterprise software with intelli-sense and code hinting isn’t going to work. Thankfully Ext JS is working with a few tools vendors, and some, like WebStorm, can be customized to improve the hints you get, including on your own code.

At the end of the day, we Flex Developers are concerned about the overall reduced project velocity & resolution prediction that comes with losing static typing (“What and where is the problem and when is it going to be resolved?”). For smaller projects with smaller teams, I guarantee you the point is moot. In doing both, if you CAN do both, dynamic languages are so much faster and fun to develop quickly, and flexibly in. For 18 month, multi-developer teams on code that’s alive for 5 years, it doesn’t.

Introduction

As a business owner, we have to meet the needs of those clients that have adopted the HTML Stack, or feel they need to and cannot be convinced otherwise. In the following article I’ll cover what Ext JS is from a Flex Developer’s perspective, why you should care, and some conclusions on how using it + Flex changes our business for the better.

As I mentioned before, the events of November 9th, 2011 shook the Flash & Flex world to the core, and I had 2 choices: figure out where to go, or let other key members of the community figure it out.

I chose the latter plan: play Skyrim and disappear for 3 months to let it all shake out. If things hadn’t been figured out by key members of the community, I’d just figure them out for myself. It’d also be around the same time as Groundhog Day: If the Flex community saw their shadow, and freaked out, I could come out and help them weather the longer winter.

It’s been 3 months and so far, it seems all the Flash Devs went jQuery/Backbone (or Angular) whilst the Flex Devs are debating between Dojo and Ext JS (pronounced “X Jay S” if you’re French Canadian) (yes, I tried YUI and left just as quickly). After talking with members of the community and doing some of my own research, it seems Ext JS is the right choice for the type of work I do. Like using Flash vs. Flex, it’s clear it may not be the right choice for you. If you’re a Flex Dev doing large, multi-developer projects, I’ll bet it IS the right choice. Read on.

What is Ext JS?

Ext JS is a component framework for building web applications atop JavaScript, HTML, and CSS. It’s made by a company called Sencha who also makes a mobile version called Sencha Touch.

It’s attractive to Flex Developers because:

1. It has components. Lots of components.
2. It has styling and theming features.
3. It has a Model architecture built around data store & server CRUD operations.
4. It has charting components that do not utilize Flash Player (for good and ill)
5. It has awesome item renderers for grids.
6. It has classes for JavaScript with inheritance.
7. Layouts with Containers
8. Standard Focus Manager
9. Core Library with DOM helpers as well as JavaScript language extensions
10. A big company, with investment, and tons of docs who’ve adopted a prescriptive MVC framework.

There’s a lot more, but that is what we Flex devs actually care about.

How’s it work?

Ext JS is a framework; a collection of classes, 3rd party technologies, and a prescribed methodology for building web applications. HTML is used to show the components. CSS is used to style and modify interactivity. JavaScript and declarative JSON is used tomake things appear and work.

JSON, traditionally used by Flash and Flex Developers for data transfer, is actually the main way you code Ext JS, similar to how MXML makes up most of your GUI in Flex. Since JSON itself can be written in a declarative way, this is usually the core of how you define a lot of your application; both GUI and data. This JSON + JavaScript is interpreted to create classes, components, and listen to event handlers. Internally, the Ext library will redraw the GUI as necessary, whether that’s modifying CSS styles on the DOM objects that visually represent them, or swapping out innerHTML wholesale.

You include a javascript library on your HTML page, code some boostrap JavaScript/JSON on the page, and voila, you have an Ext JS app. It can be as small as using 1 or 2 classes from the Ext JS library, to a full blown application that uses their components, their model classes, their MVC, their default module loader, their implied CSS abstraction layer, and their build system… up to you how much you want to use.

Prescription & 3rd Party Integration

Sencha has to walk a fine line with Ext. From an Enterprise stand point, they have to lay the ground work for a prescriptive way to utilize their technology. You need to make a framework easy to work with, have good documentation, and not be too flexible that developers can all go their own way. This allows larger organizations to hire/cross-train easier, have those developers actually be successful with minimal investment, and basically ensure any skillset “knows how to build an app”.

It’s a sales pitch, yes, but it does need to try to work like that. In reality it never does, hence consultants like me existing, but that’s not the point. You don’t want many different ways to skin a cat from an architecture perspective. It’s fine if you cuddle your brackets, use TextMate to code, and prefer Mercury over Git… it’s not fine if you prefer MVVM over MVC, want to be intimate with the DOM, and the other developers in another part of the company on a companion product don’t. Unlike Design Agencies, Enterprise companies do have to pay their Technical Debt. In fact, I’d argue they pay more than they should, compensating in a bizarre karma like way for Design Agencies who get away it. You want to mitigate this problem by making something easy to use, easy to hack, but prescriptive enough that if you don’t know any better, you won’t cause undue costs down the line in the way your team built something.

JavaScript, currently, is all about libraries, more so than Flex and Flash was for a variety of reasons. Namely abstracting browser differences, abstraction over new features with fallbacks, and the sheer number of developers from a variety of backgrounds. Each company is going to use different libraries merely based on the number of library choices out there. The same goes for internal projects. A lot of companies have their own internal libraries utilized on products for their business, whether B2C or B2B. You need to be able to integrate with these in your native language.

Sencha needs to support prescribed direction in how you build web applications with the ability to support 3rd party libraries.

There are a few things they’ve done to facilitate this. Here are a few that matter.

First, they’ve abandoned Object.prototype as of Ext JS 4. If you’re a Flash Developer, you’ll remember having your language suddenly act different because some developer or 3rd party library overwrote a core property/method in Flash, and suddenly your entire application worked differently… or it only did it sometimes because of later loaded class. Unless you knew what you were doing, these were nearly impossible to debug since the documentation stated a method did one thing, but clearly during testing did another. Even if you did know what you were doing, there aren’t many language, nor tooling facilities to help you debug this inheritance mixin whackness.

Considering JavaScript library inclusion amounts are significantly higher than say Flash or Flex, the risk of collisions are higher. On multi-person teams across an organization, with already strained communication this can be horrible to try to resolve.

Also, from a module perspective (those of you using PureMVC multi-core or many Robotlegs Contexts will get this), you need to sometimes run may applications in parallel on the same page. Not having to worry about stomping on someone’s method/properties is a nice feeling to have.

Second, they’ve commited to bootstrap.js their own bootstrap.js from a library/module perspective which supports both debug and production mode. With the build process, this allows you to develop with new classes on the fly, and in production mode actually have 1 file for you’re entire application. This is for speed & ease of development purposes.

We take this for granted in Flash/Flex where all our classes are included, and zlib compressed in a minified bytecode format into a single SWF file.

Remember, Day 1 of Flash Development had 1 SWF. As a binary format, everything you needed was right there for you, ready when you started. The HTML stack was different. Everything is a bunch of files all loaded at different times from different places. As a coder, you know this is a nightmare to figure out. From a networking perspective, initiating a lot of HTTP requests to the server and downloading them in parallel is also slower. So JavaScript has a habit of allowing you through build processes to put all of your classes into 1 massive file to help alleviate the race condition pain as well as improve performance, compression, etc. However, during development or when building modules/lazy loading, you still need the option to load on the fly.

Third, their MVC is prescriptive. I won’t get into too much detail because as a Swiz/Robotlegs aficionado and PassiveView h8tr, I already want to use my own or Angular… anything but theirs. That doesn’t matter, though, the point here is that they’ve provided the built in mechnisms, it works great with the framework, and they have documentation on it as such. This ensures organizations take them more seriously, have a chance to at least be forced into some known structure, and you as a consultant have a chance of understanding how they did things if you come onto an existing project (assuming they didn’t just use Ext JS for it’s query syntax and get all intimate with the DOM… which you can do if you wish).

That’s Great, Show Code

Here is some Hello World code:

As you can see right off the bat, closures are the word of the day. Ext JS is full of either closures (anonymous functions or variables that equal functions) and/or JSON. You’ll intermingle both a lot.

Components

Components are the main reason most Flex Developers dig Ext. Not only are there are a lot of components, but some of the ones they have are better than their Flex equivalents. And this, folks, is one of the reasons why software developers often tell you to try another language or platform, at least 1 per year. You’ll see what the competition has, and YOU’LL GET PISSED OFF!

Why didn’t Adobe build this level of components for Flex? Why does Django, Rails, Coccoa, and countless other frameworks have a Model with optional Facade on top to support offline storage with online CRUD syncing out of the box… and Flex does not? How come our DataGrid didn’t come with built-in paging?

Enough ranting, check them out yourself (scroll down, check out list on bottom left) while I cover a few here.

T3h Ãœber Grid

You’ll notice right off the bat their DataGrid is pretty bad ass. Three things I want to point out about it.

Notice they have paging built-in. This is, in part, to their Model/Proxy/Store setup. In Flex, you had to code this yourself (don’t get me started on Blaze DS/LiveCycle).

Notice their filtering actually has a GUI with a drop down menu to customize (and which YOU can customize) on how to filter the data. No server trip needed. Hot.

And finally… “row editing”. Yes, an entire row can be modified. You can also allow a row to be edited, but only allow certain columns in that row to be edited, as well as customize this renderer. Awesome, right?

Charts

Charts, like Grids, play a central role in a lot of financial & insurance software. You see the data in lists and you visualize it in charts. Ext JS 3 used Flash, but now they use SVG (and I think VML in some cases) and no canvas. This ensures it’ll work without a plugin. The downside is you can’t print yet. They’re working on it, and there are a lot of server-side plugins where you can easily wire up the chart data to a button to have the server assemble a PNG or PDF for you to print so solutions do exist.

You’ll notice, too, that they are interactive. You can customize a lot of their display + tooltips I believe to degree using templates (I’ll go over that later). They also have the standard animation built in as well. From a sales perspective, these charts  + the grids demo very well.

While we at WASI have our own Dashboard, it’s nice to know you can accomplish the same style of application and product using Ext’s components to create Dashboards.

Everything Else

Everything else is what you’d expect your team would need from Tabs to layouts to forms. The layouts are a little tricky if you’re not a CSS/DOM savant, but again, they abstract a lot of that from you (including that weird IE vs. the rest of the world padding measurement insanity).

There are a lot of little innuendo features too that make a big overall difference like all windows having the capability of being resized with a resizer, from all sides.

The components all have the standard DOM interaction events usually abstracted away so you just add an event handler for it, and you can create your own as well.

Yes, they have drag and drop.

Yes, they have a variety of ways to handle state, both in components and within your application itself.

Their drawing package uses SVG I think… not really sure why they aren’t using Canvas, but I’m sure they have their reasons.

Localization & Accessibility

They have localization and accessibility built in. I had some concerns during the fast track course because it seems the localization requires the application to be totally reloaded just to have text changes take effect. Meaning, there aren’t default framework bindings to a resource manager like you do in Java or Flex.

Either this was a bug or we couldn’t figure it out, but bottom line the components built into Ext JS do work with it, and you can see their text match the language; we just couldn’t get this to work at runtime, only compile time which is fine.

Event Model

Just a quick note on the event model. In Flash Player, we have the standard ECMA event model in terms of capture, target, and bubble phase. Since IE is backwards from the rest of the world and is in the minority camp, Ext JS flips it around and gives you their own Event class as well.

They key difference, however, is that interaction burdens are put on developer, much like Corona SDK does in Lua. If you want to handle an event, you need to return true to ensure it doesn’t bubble up and get run. I’ve seen other frameworks which just code gen the event.stopImmediatePropagation() and event.preventDefault(), but not here… and sometimes you need to return true from event handlers vs. calling the event methods. I haven’t figured out yet where the consistency is.

Anyway, a small thing, but good that they abstract the browser differences for you and provide a common event class + mechanism for you. The addEventListener and/or callback way of doing things will be extremely familiar. I believe they have an event bus, but it’s not like Robotleg’s Actor or PureMVC’s Notification system.

Styling & Theming

If you know CSS, you know how to style and theme a Ext JS application. Yes, that’s it. I unfortunately didn’t get to see, nor play with, a lot of the skinning in the Fast Track, just styling. I’m not sure how much of the image issues in various browser they abstract away since you’re using your own CSS styles.

Ext provides some template theme CSS files for you that you can modify, both built in classes as well as Ext JS ones. Combined with SASS/Compass, this really makes things a lot easier to handle. If you’re not familiar with SASS, there are just 4 things you need to know:

1. You write 1 CSS style, and it’ll generate the browser/vendor specific ones if any (1 line of SASS could be 3 lines of CSS)
2. You can utilize variables in your SASS code which helps dynamically create the appropriate CSS (like determining width/height on the fly, etc).
3. They actually treat it like css CLASSES… so all the inheritance feels like inheritance vs. some “I’m not really code, but I’ll pretend I know what OOP is”
4. SASS files get generated through Ruby’s Compass into CSS files for your project. You don’t write CSS; you write SASS and Ruby’ll regen the CSS for you.

Models, Proxies, and Stores 

Most Flash and Flex projects I’ve worked on have some form of Value Objects (classes that hold data that represent a server-side entity with additional data the client needs), Models or Proxy classes that allow the client retain data and state, and service classes that form the basis of the CRUD operations with the server.

In branching out into other languages/frameworks/platforms, it’s clear most have a large sub-system and abstraction layer upon this setup. Django has Model, Rails has ActiveRecord (or did… been awhile), Coccoa has CoreData (amongst other things), and Java has all sorts of things. Even with the large influx of Java, Flex never really got that kind of abstraction unless you went with the full Blaze DS / LiveCycle stack. It was abstracted away enough that you could build both non-Blaze/non-LC apps and not know the difference, but the point is that it was clear Adobe didn’t think that was a core part of most apps, or rather that particular part could be monetized in Enterprise only offerings.

Whatever the reasons, it’s a core need in a lot of applications nowadays. I need to persist data in RAM, on the client cache (whether SQL or cookies), and with the server. Using a Facade or Proxy to make this part not only easier, but allow client side validation, as well as being built into all components, is a huge win.

All you need to know is it’s like an ArrayCollection that can save both locally to disk as well as sync with the back end as well as work as a dataProvider to all your components. And yes, when the dataProvider updates, Ext JS will update your GUI controls. Yup.

Sencha has specific meanings in the Ext world between Model, Proxy, and Store so don’t necessarely think design pattern as each is completely different than the other.

JavaScript and Core Classes

While Ext JS primary value to Flex Developers is their component framework and browser insanity abstraction, they also have a plethora of helper/utility classes for JavaScript, CSS, and the DOM as well. You can actually just use Ext just with the DOM using their DomHelper, DomQuery, and your own JS stack if you wish as their helper classes alone are nice to have. Some of it is open source, not sure.

You’ll notice they actually have a layer over top of low-level functions of JavaScript like apply, they have their own version of Delegate (yeah, remember that bullshit? LIVE IT LOVE IT SUCKAZ AND THANK STEVE JOBS FOR IT), as well as a rudimentary binding syntax.

They support inheritance and package names for your components. Although I’ve never done Ext JS 3, it’s clear they are constantly improving because the syntax in 3 was nasty compared to 4.

Templates

I’m still learning about the world that is HTML Templates but suffice to say there are 2 main uses in Ext JS.

The first is custom components. Creating custom components in Ext JS is pretty straightforward; you just extend Component or Container, similar to Flex. However, they’re creating the DOM for you. What if you want to create your own HTML elements based on some strange PSD/AI design comp the company Crayon Pusher sent you? You can create your own HTML and have the data actually bound into it through a similar binding syntax we’re used to.

The second is item renderers. Any type of list, whether a small Container, or an actual component within a DataGrid itemRenderer can use a template. This allows quick creation of an itemRenderer without having to write a lot of code if you want to. Pretty sick.

MVC, MVP, MVVM, Your Mom

I’m not going to go into their MVC too much. Suffice to say, they like the Passive View and have no qualms with a Controller managing multiple Views (at least, that’s what the Fast Track implied, but they don’t have time in those types of courses to show you all avenues). Worse, their naming scheme assumes you have a flat file structure, so you don’t name something “MyModel”, just “My” because they’ll append a name to it anyway causing it to be MyModelModel. That, and I fail to see how a flat directory structure of model, view, controller will scale to an application of any reasonable size, even with Ext ability to use string namespace aliases to refer to your classes.

Keep in mind the instructor was only given 1 day to show 1 way to do MVC, and we didn’t get too much time to dive hard core into the internals. It was clear, though, none of us liked it, and already Flex 1 era framework ideas were churning to bring our ideas (and biases) to Ext JS.

What Sucks

1. Built on JavaScript, not CoffeeScript or Dart
2. They have horrible naming conventions for optimization purposes that no longer matter in todays world.
3. Tooling

The top of this post covers my major concerns about JavaScript for applications of this size. I’m not worried about performance, just team velocity compared to ActionScript. In my experiences with Lua and ActionScript 1, your velocity in the beginning tends to be faster, but you hit a plateau and the lack of strong-typing annihilates your teams velocity and ability to project accurately. Unit tests help, but are more of triage vs. a tool.

The naming conventions are bourne of an era no one should care about but they still do. We’re in a gray transition as browser makers bring the HTML Stack up to speed to build applications, so you can’t just full stop ignore all the lessons learned.

However, I’d argue, as would countless others, that code readability trumps performance concerns. This goes way beyond “premature optimization is the root of all evil”. On extremely large code bases, verbosity is a virtue. You want readable code that it is easy to understand, both for your team and for yourself.

Because of String lookup costs and the ability for JavaScript minifiers to only compress none-reserved words like “this”, countless techniques are used to obfuscate the code to compensate. That may have mattered back then, but it doesn’t matter now. Worse, though, is that the counter justification is that for larger code bases, you do in fact need to make every optimization you can which in turn I counter double fold:

1. Readable code trumps performant code.
2. If this is such a concern, why are we using this over Flex again?

More importantly, however, is for API development. API’s are given to people who you sometimes have no contact with, nor have any clue about their adeptness. Thus, you need to make it as easy and obvious as possible. For an Enterprise framework such as Ext JS, you’d think this would be top priority. It’s clear Ext JS has some highly experience web developers involved in developing the API. I respect their knowledge, but it’s time to change.

Examples include Ext.getCmp vs. Ext.getComponent, Ext.getEl vs. Ext.getElement, and baseCls vs. baseClass. It’s prevalent throughout the framework, and mixed in with good verbosity… which makes it worse.

Ext JS 4.5 clearly needs a name overhaul if they expect senior programmers to take it seriously. Considering it’s JavaScript with Ext JS’s alias support, you’d think this would be easier to do.

While Ext Designer completely blows away Adobe Catalyst, it still has some issues with regards to the code generated and code round trip/merging. While looking nice, the results are not always being correct. We had easily duplicatable issues where the code generated did not match what was in the IDE GUI. Still, an extremely useful tool for generating a lot of the needed visual component code.

Finally, the lack of out the box code IDE is a near deal killer, at least for strict TA’s we deal with at large organizations. I know Ted said they’re working on it. Without things like intellisense and code hinting, you’ll make it hard for people to take things seriously, as well as making it harder to learn for more traditional programmers who suddenly have none of their mature toolset available… like… Java Developers… who came to Flash… and left… and… then they created Flex Builder…

Critical Mass

It seems Sencha has all the hallmarks for success and reaching critical mass with Ext JS. This is the ONLY reason I and others have given them any attention. As previously mentioned, you need a mid-size company, with money, and a good product to have it adopted as a targetable platform for large organizations. Sencha seems to have all 3. That, and again their components are pretty cool.

As a consultant, their components, charts, Ext Designer, and website all demo nice as well making it easier to sell as an alternative to Flex.

Mobile Story

I won’t get into much here, but suffice it to say I’ve yet to see the mobile revolution impact our clients as much as it has impacted the Design Agency sphere. While both focused on consumers, for a lot of brands, smart phones and tablets are seen as a growth market, or the ONLY market, to reach certain demographics. All the statistics point to both the behavioral change of society using their devices to interact with the digital world vs. computers, yet those same statistics also who the desktop still being the leader in PRODUCING that content that the world consumes. Yet given that, the money doesn’t seem to be flowing in lock step.

As such, most initiatives have been “it’d be cool to blow some money on”, “we have to provide something for iOS, even if it’s crap”, and the most common “wait… this won’t make any money”. While I know there are a lot of device work going on out there, it’s just not in my consulting sphere, or if it is, it’s at a extremely low profitability area and thus not worth investing in.

For now, the same large interfaces that we make on desktops do not transfer at all to smart phones nor tablets. Just like how people started to taking their iPhone’s to work, and companies stopped installing company phones, and later with Macs so companies started offering Mac’s as well as PC’s… so too will this have to happen with tablets before large companies even have it on their radar as a focused set of initiatives.

Obviously this is dependent on industry type, but we’re just not seeing it in the financial/insurance area, only slightly in the media company area (which I might add are the only ones who seem to care about Android).

…but let’s pretend it DOES matter. Let’s say a Director wants to know your mobile portability story? What do you tell them?

With Flex it was pretty straightforward: 60% to 80% of your Service and Application Layer code could be ported, with no change, to have the same Flex desktop application work on iPhone, iPad, Playbook, and Android devices. The missing piece here, is the device’s web browser.

While I’m a huge/firm believe in a long term native future for devices, there are still many use cases when a consumer is in a hurry and hits a company’s website expecting it to work. Considering some Operators only allow some applications to be downloaded over Wifi vs. 3G, this makes the website more important since even 3G can act as Edge. If you’re a business traveller, regardless if you’re on AT&T or Verizon, you know exactly what I’m talking about.

2 key examples include Marriott.com and PapaJohns.com. I encourage you to play with both on your iPhone/Android’s web browser. You’ll notice they try to duplicate the native  look & feel paradigm. “It works like an app!”. Sometimes it works, sometimes it doesn’t. The responsiveness is the first thing you’ll notice that falls on it’s face. Apps just perform better, and consumers can tell. At least for now.

That’s not the point, though; notice how the functionality they need is forced to be simple because of the screen real estate being so small. There are a lot of use cases where even just a company mobile app is needed for its Desktop equivalent. Other times, you really do want to get as much information as possible from the user (a la Papa Johns). To me, Papa Johns is the perfect example of an application that an Enterprise would want on a phone, then they realize at the design/analyze phase/outset that most funtionality couldn’t be done, but shove in as much as they could anyway.

If you’re forced to comply, what do you do?

You use Sencha Touch.

Now the same story applies like it did in Flex with 1 key differnence: Using PhoneGap, you can now target everything. All devices including their web browser, all while sharing 60% to 80% of your Service and Application Layer code. In theory… I’ve heard a lot of negativity towards Sencha Touch v1, but apparently v2 is a lot better, haven’t investigated the code yet, just testing the components on devices.

Pretty cool, huh?

Conclusions

If you haven’t read João Saleiro’s article, and you’re a Flex Developer, I encourage you to do so. I’ve reached many of the same conclusions as he did. The comments also have a lot of good info as well. The most important being team velocity. Time is money. This isn’t important to just large companies, either.

There are a lot of things we can do better and faster in Flex for large scale applications. It doesn’t matter, however, for 2 reasons. First, while from a technical perspective Flex’ future is bright, from a marketing and business one it’s over. The next 5 years are the sunset. Like FORTRAN and Cobol, companies invested billions, and those applications that run parts of their business don’t magically disappear overnight. Second, even if we know it may be a better solution for some use cases (many objects like Visio, highly dynamic interactions w/many redraws, compositing images & video, etc), we’re ultimately beholden to what our clients want, even if we know what they need is different. Thus we have to do both: Flex and Ext JS.

Based on all of read and seen, next to Dojo, Ext JS is the best solution to utilize for HTML5 web application development if you are a Flex Developer dealing with large applications and teams. Their components, documentation, mobile story, company size, and growth show that they are close to reaching critical mass where it can be adopted by large companies as a viable product to use for things traditionally done by Flex. Additionally, a lot of what you already know carries over to Ext JS quite well. If you’re like me, you just need to freshen up on your DOM and CSS knowledge, and re-examine JavaScript with fresh eyes compared to the AJAX revolution bs of 7 years ago.

Furthermore, unlike other server-side solutions, Ext JS lends itself quite well to hybrid solutions with Flex being used for certain use cases and the HTML stack for others, all on the same project. You and/or your firm having the capability to provide both is immensely valuable. Utilizing Sencha Touch and PhoneGap, you now have multiple mobile options in your tool belt as well.

For the record, I still believe using Ext JS will take longer and have a harder to track velocity compared to using Flex. That said, I’m still diving into Ext JS with a positive attitude.

Good luck!

package
{
	
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.display.DisplayObject;
	import flash.geom.ColorTransform;
	import flash.geom.Matrix;
	
	import mx.core.UIComponent;
	
	[DefaultProperty("children")]
	public class FlashSymbolContainer extends UIComponent
	{
		
		private var _children:Array;
		private var childrenDirty:Boolean = false;
		
		public function get children():Array { return _children; }
		public function set children(value:Array):void
		{
			if(value != null)
			{
				_children = value;
				childrenDirty = true;
				invalidateProperties();
			}
		}
		public function FlashSymbolContainer()
		{
			super();
			
			width 	= 300;
			height 	= 200;
		}
		
		protected override function commitProperties():void
		{
			super.commitProperties();
			
			if(childrenDirty)
			{
				childrenDirty = false;
				redraw();
			}
		}
		
		private function redraw():void
		{
			if(_children == null)
				return;
			
			var len:int = _children.length;
			if(len == 0)
				return;
			
			for(var index:int = 0; index < len; index++)
			{
				var obj:DisplayObject = _children[index] as DisplayObject;
				if(obj == null)
				{
					throw new Error("Children must be of type DisplayObject.");
					return;
				}
				
				if(obj.parent)
					obj.parent.removeChild(obj);
				
				addChild(obj);
			}
		}
	}
}

The following covers why you would utilize the Robotlegs MVC architecture in a lightweight, Lua game for Corona. I’ll discuss the refactoring reasoning, the common problems you run across in game architecture, and their solutions with their pro’s and con’s discussed. Finally, I conclude on how Robotlegs helps solve these common issues, specifically in a Lua & Corona context.

I’ve started the port of Robotlegs to Lua to work in Corona if you’re interested in learning more.

Refactor First

In learning Lua & Corona, I quickly ran into 2 problems with the game I’m working on. The main code controller became way too large to manage. It wasn’t quite a God object (yes, the anti-pattern) because a lot of the View’s themselves handled some of the necessary messaging & logic. Regardless, time to refactor.

The first thing was to start using classes. Lua doesn’t have classes. There are a bunch of resources out there that explain how to do them in various incarnations. I went with a version that Darren Osadchuk, creator of the Corona bundle for TextMate.

The second thing was to start using packages. Lua doesn’t have packages. There are various ways of implementing them which are all confusing as hell. The easiest way is to just put your code in a folder and use that path in the require function, but you can’t utilize folders for Android in the latest build of Corona at the time of this writing.

These are the low hanging fruit of re-factoring, and has made a huge difference in code readability & maintainability.

Burdens of Encapsulation

The downside of OOP is that it’s encapsulated. While making something a black box with internally managed state & implied reusability is good on the surface, it pushes the burden of managing communication between those encapsulated objects to someone ones.

You have 3 options: globals, messaging dependencies, or mediation.

Global Variables: The Good

Most people agree global variables are bad… in larger software development. In smaller scoped software gaming, not so much. Let’s explore their benefits.

In a lot of languages, globals are part of the language design, irrespective of how the runtime and tools/IDE’s handle them. Some languages make them first class citizens with mechanisms and rules around how they’re often used. This makes them formalized, accepted, AND useful. This is important to understand.

If it’s formalized, it means the language designers deem their usage acceptable, AND expected.

If it’s accepted, it means others will use them, incorporate them into their projects, libraries, and training & writing materials. This also means it’s then promoted amongst the community, solutions and coding strategies/solutions are built around it. This doesn’t make it inherently “good”, just accepted in that particular community.

If it’s useful, the majority of people will use it if their job is using that language as opposed to hobbyists, or those who continue to explore the language and try different ways to solve similar problems with it off of their employer’s clock.

In Lua, globals are all 3. Formalized via _G, very similar to ActionScript 1’s _global, accepted in that people do in fact use them (unknowingly a lot I’d wager), and useful since the syntax to utilize globals is terse; a Lua hallmark. Notice both have the preceding underscore to ensure they don’t interfere with the developer’s potential to create a variable called G or global. While ActionScript 1 has some security implementations to prevent certain loaded SWF’s from writing/modifying existing definitions, they had the same mechinism with strorage, first via _level’s on a per SWF basis, and later a formalized _global. Lua takes it a step farther with a series of facilities to change “which” globals your using, etc. It’s also used in package naming strategies, OOP, etc.

As a globally accessible table, access to _G is fast. Fast is good in game development. You want to be part of the solution, not part of the problem.

Global Variables: The Bad

This differs from traditional software development. If you come from any formal software development, globals are considered extremely bad practice. There is a common strategy to use the Singleton design pattern to “get away with it”. Even those are considered bad practice when over used. In fact, Singletons are often created merely because the language doesn’t offer a formalized way of doing global variables (like ActionScript 3 vs. ActionScript 1).

Why? The 3 main reasons are application state coupling, access control, and preventing testability.

Application State Coupling

Application State Coupling refers to the state of your application being dependent on usually a series of global variables. I won’t get into the why’s, but MVC and it’s MVP derivatives (Passive View, Supervising Controller, Presentation Model) have solved most of the state problems. They keep visual state in the View’s (or anything that’s a GUI that you can see), and application logic & state in the Model layer somewhere. Your application is no longer coupled to a single variable being a specific value for your application to run, to exhibit a certain bug, etc. Each piece can (usually, hehe) be run independently, and if there is a problem, you know where to look, or at least where NOT to look.

An example is if your player is dying too quickly, you know the problem isn’t in the player code, or the controller code, but rather somewhere in the model where his life state is being access/set/updated. If you used a global, it’d probably be set in player itself, or perhaps by an enemy bullet that hit him, etc. No clue where to look.

Another side effect is adding new global variables. This leads to certain parts of your application expecting the globals to be a certain value at certain times. If they aren’t, things don’t work. Because they are many different places, it becomes extremely time consuming for you to debug and track down because you don’t necessarily know who is expecting what to be set to what, and why. This is more caused by access control, however…

Access Control

Access Control refers to who can access your data, and how. In Flash & Flex apps that are smaller, we’ll usually use the server as access control. Meaning, while we provide a GUI to allow people to create, edit, and delete users from a database for example, the actual PHP/Ruby/Python/Java on the server is the access control. No matter what we do in the Flex/Flash, we can be assured the server (usually… *sigh*) will ensure we don’t delete people we’re not allowed to, delete users en-masse, put illegal characters into their name, etc. Basically anything that would corrupt the data and screw the up the GUI.

In Flex/Flash apps, and nowadays in larger JavaScript web applications, you have a notion of “application logic” or “application state”. This is because this state is no longer on the server. It used to be with some web applications, usually in the session. When you go add something to your cart on Amazon.com, it’s not stored on the page that much beyond to show you a slight graphical change. Once you change pages, that JavaScript & HTML page state is now gone and replaced with a new one… but it remembers what you added. It does this because the state is saved on the server since the client needs to be stateless if the user refreshes the page to go to another one.

We don’t have that problem as much in Flash/Flex apps. We don’t go to pages insomuch as new “Views”. These views, or graphical representations of a GUI that have internal state, are still in the same SWF embedded in the same page in a browser that doesn’t go anywhere (same thing for an AIR app on the desktop or on a mobile device). Therefore, someone has to be responsible for holding the data in a variable or series of variables, and updating it when the server gives you new data.

These are usually classes called “Models”, and they’ll usually mirror their server-side equivalents in terms of CRUD operations: create, read, update, and delete. Where they differ is how much of the server-side provided data is parsed, error handling, data access control, and how that server-side data is set internally.

Suffice to say, good Model classes are encapsulated, ensure application logic is accessed by a public API that ensures security, doesn’t allow the internal data to be corrupted, and does all this within reason. An example is our Player’s health. If every enemy collision and bullet out there has access to the player’s health, we have no easy way to track down who may be potentially doing the math wrong on calculating the new hit-points and setting them to invalid values, or thinking the player is dead when she’s not, etc. If you have a PlayerModel, you can ensure your problem’s regarding hit-points and letting the world know about player death is in one place, and problems with said state (how much health does the player currently have) starts in that class and those who access him. Access control in this case refers to ensuring the PlayerModel only exposes methods to increment/decrement the Player’s hit-points vs. allowing them to be set to -16, or NaN/Nil, etc. You don’t even have to worry about this; you just don’t allow it to happen.

Thus, the burden on accessing and setting hit-points correctly is pushed to someone else; those who access PlayerModel. THIS is where you look for bugs, but again, you need to ensure only a set few have access to the data access layer (PlayerModel).

In short, Models centralize data access, ensure it’s correct, testable, and DRY and prevent incorrect access errors, (i.e. global.playerHitPoints = “dude, pimp!”).

Preventing Testability

This third problem isn’t necessarily around unit-testing and TDD (Test Driven Development), but more around just ripping the class out, putting in a simple main.lua, and seeing if it works. If it has dependencies, they get dragged with it… and you have to instantiate and setup those guys. Suddenly quickly confirming some class or method works or not becomes a time consuming process that’s painful. If you can’t test something in isolation, you’ll have huge problems down the road isolating problems in a timely fashion.

Globals by their very nature are’t testable because they’re variables, not encapsulated classes. While Lua has some neat mechanisms to encapsulate globals in certain contexts, somewhere, someone is setting a global to some value in their own way. If a class depends on this global, that global must be set the same way before you test the class that relies on the global. Since you may not know who set the global a certain way, that global may not be the same in your test environment vs. in the game proper.

Global Conclusions

While globals in Lua are fast, formalized, and accepted, you must be aware of the rules so you can break them with confidence. First, keep in mind if you want to get something done, premature optimization is the root of all evil. With that in mind, ask yourself the quick question: Does creating a data access control class/layer around your globals to ensure it’s DRY and secure add so much overhead that the speed makes your game un-playable?

I’ve found this not to be the case in my implementations in Lua and ActionScript. They run fine, are encapsulated, and succeed in good access control. Thus, while globals are accepted in Lua, implementing a good coding practice via a data access layer does not adversely affect my performance while increasing my productivity in DRY’er code that’s easier to test with good encapsulation.

Messaging Dependencies

We’ve seen how globals can work to allow multiple View’s to talk to each other directly or indirectly via variables they all reference, or even methods/tables. We’ve also see how this leads to bad things like harder to find bugs and spaghetti code (you change 1 thing that adversely affects something else seemingly unrelated) as well as making refactoring more challenging than it needs to be.

One way to allow encapsulated objects to communicate is through messaging systems, also know as notifications or events (we’ll just call them events because that’s what ActionScript and Corona use). When something happens inside the object, such as a user clicking something, or some internal property changes, it’ll emit an event. There are 3 types of events we’re concerned with: local, global, and event context.

A local event is an event issued from an object/table. In ActionScript, anything that extends EventDispatcher, including DisplayObjects (things you can see), can emit events. In Lua, only DisplayObjects can; you have to build your own for regular tables as Lua doesn’t have an event system. So, if I create a wrapper table in Lua, I can then register for events from that table, and later when it emits them, I’ll hear them. Those are local events; events dispatched from an object/table directly. Although event objects/tables have the target property on them so I know where they come from, USUALLY event responders are not that encapsulated, and make the assumption that the event is coming from a specific object/table.

A global event is one that’s received, but we have no clue where it came from. At this point, we’re inspecting the event object itself to find context. If it’s a collision, then who collided with who? If it’s a touch event, then what was touched, and how? Global messaging systems are used for higher-level events and concerns. While you usually won’t have global events for touches because your mainly concerned with handling the touch event locally, a pause event for example could of been issued from anywhere, and while you don’t care who issued it, you’re more than capable of handling it (stopping your game loop, pausing your player’s movement, etc).

To properly handle an event, we need context. Context is basically the data the event, or message, has stored internally so when the handler gets it, he knows how to handle it. If the event is a touch event, cool, start moving. If it’s a touch release event, cool, stop moving. If it’s a collision, is it a bullet? If so, take less damage than say a missile hitting. Is the bullet’s velocity higher? If so, take more damage than usual. This context is what allows the encapsulation to happen. You issue a message, provide context, and whoever gets it doesn’t necessarily HAVE to know where it came from; they’ll have enough information to know how to handle it.

For Corona DisplayObjects, this is easy. You just use dispatch an event. But for Model/data access objects, not so much. You don’t want the overhead of a DisplayObject to just to send messages, so you build your own. This implies another class/table with the capability of sending/receiving messages. This means your classes will have a dependency on this object. For example, if I want to test my Model class in a brand new main.lua, it’ll bring along/require the messaging class. This is a dependency. One of the threads (just like OOP, encapsulation, keeping things DRY, don’t optimize too early, etc) you want to keep in the back of your head is to keep the dependencies low. You don’t want a class to have too many dependencies. Like globals, dependencies can cause spaghetti code, hard to test & debug situations, and overall just hard to manage code.

Corona makes the event dispatching dependency invisible with DisplayObjects because it’s built in. Not so for regular tables. Somehow, you have to put this dependency in every class. You can either create a public setter for it, and pass in an instance, or just reference a class globally in a base class. Both are a dependency, the latter just requires a lot less work and code.

Downside? It’s a dependency. You also force this implementation on everyone who wishes to utilize your class. If you make the messaging system events, 2 things happen. First, people using Corona get it because it’s the exact same API and functionality (excluding bubbling) that developers are used to. Secondly, it’s interchangeable and works with Corona DisplayObjects. The best solution would be to do Dependency Injection/Inversion of Control… but I haven’t figured out how to do this in Lua yet, and I’m not sure Lua supports metadata annotations. Considering it’s dynamic, you CAN inject things like this at runtime, but someone, somewhere has to do so. Why do so when every object requiring messaging needs the same mechanism? Thus, the pragmatic thing is to build it in.

Also, more importantly, DOES this messaging system add more performance overhead than using simple globals? To make the question harder to answer, can you make tighter coupling of your code and still get things done?

It’s been my experience, if you make things easier to use with less coupling, you’re more productive in the last 10% of your project. While coupling makes things easy in the beginning, it’s a farce; it has more than an exponential cost at the end.

Besides, you can always increase coupling easily; it’s removing coupling later that’s hard. If you need to optimize, great, you can. If not, great, no more work to do; you can instead focus on features. Usually, though, you’ll know pretty quick if you do iterative builds if a messaging system is making a huge performance impact on your game on not. The only surprises you’ll get is you spend days on something without a build. Do a small test, see if there is a noticeable difference. Sometimes you’ll have n-problems you won’t find till your game gets to a specific size which are unfortunate. An example is a charting component that works great building up to 5000 data points, but suddenly DRASTICALLY slows down beyond that.

These problems aren’t the fault of the API. If you take a step back, the “30,000ft view”, usually it’s the implementation that’s at fault, not the code itself.

For example, a little history lesson. Back when ActionScript 1 development was increasing in scope, we went through 4 different messaging systems. The first was the built-in one for Mouse and Keyboard, etc. It was only partially available; there wasn’t a MovieClip one. So, we used ASBroadcaster; an undocumented one inside of Flash Player. It had a known bug with removing a listener during a dispatch, and other things. Then Bokel released a version on top of that fixed it. Then Adobe created EventDispatcher, mirroring the ECMA one. They then built this into the Flash Player for Flash Player 9’s new virtual machine.

There were others that came out after ActionScript 3 was born. PureMVC had notifications in it for an easier port to other platforms & languages. Robert Penner created Signals for a light-weight, object poolable, quick to develop in C#-esque messaging system.

As you can see, why the bottleneck for most larger Flash & Flex 1.x applications at the time was EventDispatcher, even when they built it into the runtime in C, developers opt-ed for a slower system built by themselves to solve different problems.

So why the continuous talk about performance questions in this section when I rail against premature optimization? Because messaging is the core of any app, or game. The choice you make is the largest impact on what you’re building, both from performance and from a development perspective. Yes, you can just use direct access to objects, or callbacks, but that’s not very encapsulated, nor DRY, and is a pain to re-factor later if you need. Messages via Events are more encapsulated, and less coupled, but have a performance impact. Additionally, only DisplayObjects use the internal C implementation; your own uses interpreted Lua with whatever JIT’ing/machine/voodoo conversion Corona does.

Traditionally, it’s easy to switch to events from callbacks, but not the other way around. While the performance impact isn’t that large to utilize a DisplayObject and use the built-in event messaging, based on some benchmarks, this isn’t a good idea to build upon.

Mediation

The third option is using the Mediator pattern. Once you have 2 encapsulated objects that need to talk to each other, you utilize a class that handles the communication. It takes the message from ViewA and sends that to ViewB. When ViewB wishes to talk to ViewA, it sends the message and the Mediator relays it.

All the MVC/MVP articles go over A LOT about the different things a View should/should not do, particularly with it’s needs for data and how to show it. Regardless of the implementation, it’s generally understood that someone such as a Mediator or a Presenter handels the responses from a View. If it’s a Presenter, it’s a dependency in the View, and the View calls methods on it. This allows the actual logic behind both responding to View user gestures (like when I touch a button on the phone) to not muddy up the View (muddy up means TONS of code that has nothing to do with displaying graphics, putting into groups, setting up Sprite Sheets, etc), and allows you to test the behavior in isolation.

Mediator’s are similar, although, the View has no idea he/she has a Mediator, and the Mediator has the View reference passed into it by someone else. Again, more encapsulation, yet SOMEONE has to have the burden of setting up this relationship. In ActionScript this is easy; Robotlegs just listens for the Event.ADDED_TO_STAGE/REMOVED_FROM_STAGE events and creates/destroys based on an internal hash/table. In Lua, you don’t have any DisplayObjects events, so you have to manually do it.

Either way, if you DON’T Mediate your View’s, you’ll eventually have a lot of code in there that has to “know” about other objects. This’ll be either a global reference, or a dependency… and we’ve already talked about why those things are bad to do. Additionally, tons of code in general is bad; having a View just focus on graphical things and emitting events people outside would care about while the logic can be put elsewhere makes it easier to manage. When you open a View class; you know pretty quickly what you’re looking at is just GUI specific code.

There’s another more important aspect of Mediation that is similar to messaging and that is system events that affect Application Logic.

For example, many things in a game care about a Player’s health.

• the Sprite that represents the player; it needs to show different graphics for how much health it has
• a health bar at the top right of the screen that fills up with green the more health the player has
• sounds that play when the player loses and gains health

If you use globals, you’d have all 3 handled by the actual Player sprite class. It’d update it’s internal health and update the global variables. Those who have references to the globals would be informed when that value changes. Additionally, you’ve now wired them together if you do this. If you change one, you’ll break the other.

Using a Mediator allows:

• the player and the health bar both the capability to react to the change in the hit points in an encapsulated way. If you change how the Player and HealthBar look/work, the actual logic on how yo do that is centralized to either them, or their Mediators… and usually Mediators are like 1 line of actual code to change.
• The application logic of how hit points are updated and changed to be done in 1 place. As your game grows and different enemies need to do different types of damage to your player, and sometimes react differently depending on how much health the player has, this is all done and updated in 1 place. It’s DRY, and easy to find where the logic bugs are.
• A side effect of this is… the Mediator pattern (lolz). You can have View’s the capability of talking to each other without having tight coupling.

The most important feature is solving the classic race condition of is the data ready for a View when he’s created, or is it null and he has to wait. Using Medaitors, you don’t have this problem. In the onRegister, you just set it if you have it on whatever Model(s) you need, else just wait for the Model(s) to be updated and inform the view.

…I wouldn’t say totally solved; handling “null” or “nil” is still a challenge for developers even in simple View’s. Those are good problems to have, though vs. race conditions.

If you enter the optimization phase of your game and want to remove events, use callbacks, and have hard-wired references, that’s fine if benchmarks truly identify that you need the performance gains. Usually, though, Mediator communication isn’t your bottle neck, it’s collisions, lack of object-pooling, and how messages are handled.

Quickie on Commands

Commands are just formalized Controller logic. In fact, in other frameworks, they’re simply Controller classes with methods. They’re called “Commands” because they do 1 thing… and can potentially undo it. If you’ve ever used an Adobe Product, a few of them like Dreamweaver, Fireworks, Flash, and Photoshop will have a Command list, also called “History Panel”. In Flash and Fireworks, you can even get the code for these Commands. The line blurs here once you lump them all together, but in my experience, good Controllers have 2 things in common:

1. They contain the only code in the application that updates the Models (update/delete in CRUD for internal data)
2. They contain all application logic… or at least share the burden with the Models.

For #1, this is important in tracking down bugs and keeping your code DRY. You always know who’s changing your Player’s hit points, who’s actually applying your level up rewards, etc. If you can test your Models in isolation, and they’re good… then you know who to blame. This is good because again, they tend to often start by being 1 line functions with the potential to grow to 30 to 60… not a bad way to start life, nor grow. Small, readable code.

For #2, whether you have a Controller class function, or a Command, SOMEONE in your application needs to “load the level data” from your level editor. SOMEONE needs to handle the fact that your player just drank a health potion, but he’s also wearing a Ring of Health Boost + 2, and this positively affects the effects of the health potions she drinks. SOMEONE needs to handle calling the loadSaveGame service, ensuring it worked, and updating all the Models with their relevant Memento data.

This orchestrator of pulling everyone together, to read multiple Models and “make decisions”, they’re the brains of your application. For performance reasons, a lot of Controller logic is often done directly in game views, even if it just references a Controller class for ensuring logic is somewhat DRY.

There’s a lot of loathing in the community by those with a more pragmatic bent, or just on smaller code bases with shorter deadlines. The overhead associated with them completely negates their perceived value when you can just call a centralized Controller logic function via… a function call vs. some event that magically spawns some other class that has 1 function with a bunch of injected dependencies. Just depends in you read that last sentence and go “Makes sense to me, don’t see what the issue with it is… ” or “w…t…f… why!?”.

Conclusions

Remember, the above is all complete bs. If you or your team have a way of building games that works for you, great. This is just helpful tool I’ve found in Flash & Flex application development, and it seems to help me in Corona games, specifically around the GUI/HUD portions. I still have globals in my collision routines for speed purposes, hehe.

Additionally, it’s a great teaching tool, too. Joel Hooks got some similar schlack like I did in using PureMVC when he was first starting out in Objective C for iPhone. Providing a comfortable & familiar framework of development really helped him learn and have context how the new language & platform work with certain concerns; it’s how he shipped his first app on the app store. Same with me in Corona… and game development.

Finally, this isn’t an all or nothing approach. You can just use it on the parts you need, or perhaps just to learn. I find its helped me learn a lot about Lua and Corona, as well as having the flexibly to change the API of my Player and Enemies without affecting how the GUI itself around the game works. In true spirit of total disclosure, I’ll report on any adverse overhead if I find it.

I started a port of the popular Robotlegs framework for building Flash & Flex ActionScript 3 applications to Lua for the Corona SDK.

Why

Longer post here.

The short version: Lua & Corona and hardcore game development are new to me. I’ve dabbled and had a few projects, both professional and personal, over the past decade, but nothing like the full-time opportunities/gigs I’m getting now that mobile has legitimized an already legitimized industry. Utilizing Robotlegs has made the GUI/HUD development for games super simple in a foreign and strange land. It’s also helped me learn more about Lua & Corona by breaking out of my comfort zone from within a comfort zone. Motivation is a fragile thing that must be cared for & nurtured. This helps me not get frustrated when I hit brick walls with the limited time I have in researching new technologies.

Keep in mind this is one the design goals, and thus helpful features of PureMVC being ported to other platforms.

…also, I figured it’d help others.

Where

You can get it on Github; it has an example in there too to show you one way to use it.

How

You just require the classes in, and extend the rest. Some gotchas if you’re an ActionScript 3 Developer:

1. I haven’t figured out Lua’s annotations and metadata strategies. As such, you have to manually inject dependencies.
2. This includes manually mediating your Views via context:createMediator/removeMediator(viewInstance).
3. Another gotcha is put a classType property on your Views till I figure out how to do reflection in Lua.

When

Keep in mind this isn’t an official port, nor is it finished. I’m still learning and it’s a proof of concept. I’m finding I’m only using it for game GUI and HUD stuff; and that’s like only 5% to 20% of the game code… so while it’s helpful for both learning & development, I’m sure there are strategies/ideas I’m not thinking about that you’re welcome to add/modify, etc.

Hope this helps you!

Download/Modify – Robotlegs for Corona on Github.