JavaScript development – libraries and OOP coding conventions

As I wrote earlier I’m currently porting our ActionScript framework to JavaScript, which basically means I’m diving into JavaScript from and ActionScript developers perspective. Of course I’m still at the beginning of becoming a good JavaScript developer, but I made some progress I’d like to share.

I’ll start right away recommending some core libraries:

  • Objs – Namespaces and class inheritance
  • PureMVC Objs – MVC framework (Objs port)
  • JS-Signals – Event / Messaging system
  • jQuery – Helps with core functionalities and cross browser issues

The existing ActionScript project is based on PureMVC so it was obvious to settle on the same horse, but it wasn’t easy to decide which PureMVC port! This is a fundamental decision because it also defines how to write OOP JavaScript.

Objs has a clean syntax (and documentation) and after developer M. Saunier Frédéric was kind enough to resolve my license problem I used his lightweight version with one little customization: I changed the constructor function name from initialize() to __construct() as it looks more appropriate to me and I already used some initialize() functions for different tasks.
Changed versions: customized puremvc-objs-2.0.js and customized objs-2.0.js.

ActionScript developers probably know Robert Penners AS-Signals but I never implemented it in one of my projects so now I use the concept with JS-Signals.

And of course I also use jQuery with it’s great developer community.

So this is how a “class” with applied coding conventions would look like:

/**
 * Created by derRaab(); - http://blog.derRaab.com
 */
( function () {
 
	/**
	 * Namespace vars for minification (only necessary if used multiple times, but you get the idea how to save strings)
	 */
	var nsCom = "com.",
		nsComDerraab = nsCom+ "derraab.",
		nsComDerraabExamples = nsComDerraab+ "examples.",
 
	/**
	 * Final class
	 */
	ExampleClass,
 
	/**
	 * Temporary class prototype (separated because that helps with IDE code completion)
	 */
	ExampleClassPrototype =
	{
		/**
		 * Without leading underscore part of public API.
		 *
		 * @type {Boolean}
		 * @private
		 */
		publicVar : false,
 
		/**
		 * With one leading underscore part of protected API,
		 * Use it only in this and it's subclasses.
		 *
		 * @type {String}
		 * @private
		 */
		_protectedVar : "",
 
		/**
		 * With two leading underscores use it only in this class!
		 * @type {Number}
		 * @private
		 */
		__privateVar : 0,
 
		/**
		 * <code>ExampleClass</code> constructor (called on instance creation!)
		 *
		 * @param {Number}	privateValue
		 * @param {String}	protectedValue
		 * @param {Boolean}	publicValue
		 */
		__construct: function( privateValue, protectedValue, publicValue )
		{
			// Call to superclass constructor (See Objs documentation)
			// ExampleClass.$super.__construct.apply( this, arguments );
 
			this.__privateVar	= privateValue;
			this._protectedVar	= protectedValue;
			this.publicVar		= publicValue;
 
			// Use static values
			this.__privateVar = ExampleClass.DEFAULT_NUMBER;
		},
 
		/**
		 * Without leading underscore part of public API.
		 */
		publicMethod: function()
		{
		},
 
		/**
		 * With one leading underscore part of protected API,
		 * Use it only in this and it's subclasses.
		 */
		_protectedMethod: function()
		{
		},
 
		/**
		 * With two leading underscores use it only in this class!
		 */
		__privateMethod: function()
		{
		}
	};
 
	/**
	 * Let Objs create our "real" class (see Objs documentation for more details
	 */
	ExampleClass = Objs( nsComDerraabExamples + "ExampleClass", ExampleClassPrototype );
 
	/**
	 * Now add some "static" values
	 */
	ExampleClass.DEFAULT_BOOLEAN = true;
	ExampleClass.DEFAULT_STRING = "georgeous";
	ExampleClass.DEFAULT_NUMBER = 1;
 
}());

This style is still evolving but I think this is kind of how I like to work.

I suggest you read my last post regarding JavaScript library development using ANT and YUICompressor which might help you with project setup and code compression.

And a word to JavaScript IDEs:

I bought WebStorm but it doesn’t integrate ANT. Luckily I earned a IntelliJ IDEA license earlier this year but I’m not absolutely happy with it. It uses a lot of system resources, needs to set up an Java project and so on. Any hints?

FFK10 – Flashforum conference notes

Every year I spend two days sitting in the audience of the Flashforum conference (FFK) listening to great speakers and getting impressed by their experiments and thoughts. It’s also a good way to renew some of the basic knowledge in Flash development and of course to meet some friends in the Flash scene.

So this are most of my notes:

Flash / Flex development:

  • Jessee Freemans Flash Augmented Reality Debug Tool provides an easy way to start with augmented reality development.
  • Use stunning Hype-Framework effects.
  • Dive into dynamic sound generation with André Michelles Audio-Sandbox.
  • Have a look at the PushButton-Engine for component based development.
  • Remember that Flex 4 includes a lot of performance features! It’s highly recommended to switch as soon as possible. For example the Embed-tag reduces PNG file size and lots of improvements are made within the Flex components.
  • Watch the Adobe TV video preview: Flex for mobile devices
  • See Christian Cantrell’s blogpost One Application , Five Screens (Including the iPad)
  • Great tip: ByteArray.org – Why cacheAsBitmap is bad
  • Adobe’s Mobile Development Guide for the Flash platform (applies also to desktop applications) contains performance tips like:

    • DisplayObject.width / height should be divisible by 2 as often as possible
    • Try to avoid Events and / or stop propagation as soon as possible
    • Set DisplayObject.mouseEnabled=false if possible
    • Stop MovieClip animations when removed from stage
    • Use TextField.opaqueBackground=true if possible
    • Use final statement (final class ClassName {})
    • Use BitmapData.get / setVector()

HTML / JavaScript basics:

  • Use “Sprites” with HTML / CSS (load only one bitmap graphic containing all the asset images for your page and show only the particular relevant parts) and preload next page assets using AJAX while your current page is idle.
  • Since usually only 2 simultaneous domain http requests are supported by browsers it’s a good practice to distribute contents from various ip addresses (use asset-servers for example).
  • Load only visible parts of your site using JavaScript viewport events.

Useful workflow utils:

Flash and Amazon SimpleDB

I did some research about using Amazons SimpleDB service within a Flash based application and found these basic facts:

  • http://sdb.amazonaws.com/crossdomain.xml is not available. This means no direct calls from Flash clients in browsers are possible!
  • Even if it would be possible some day, you would need to find a secure way to deliver your AWS key to the Flash client.
  • Using a web proxy is a solution that would cause a lot of traffic on your server.

So using Amazons SimpleDB for browser based Flash applications makes not much sense to me.
It might be more useful for Flash applications running on local machines like Flash projectors or Adobe AIR applications but there is still a security problem with hiding your AWS key.

Anyway, I found two ActionScript libraries that might be useful:
http://code.google.com/p/actionscript-simpledb-library/
http://developer.amazonwebservices.com/connect/entry.jspa?externalID=1365

And this thread in Amazons discussion forums:
http://developer.amazonwebservices.com/connect/thread.jspa?threadID=19698

Adobe technology platform RIA guide

This is simply the link list contained in the recently released Adobe technology platform ActionScript Reference PDF.

API References

Documentation

Developer Centers

Downloads

Miscellaneous Resources

Mailing Lists

Forums