I love HTML5 Boilerplate and use it a lot as a basis for web projects. Sometimes however, I find it still does a little bit too much for my needs and I end up removing a lot before I can get started.

Most importantly for me though, it still currently doesn’t support building with Google Closure Compiler which I tend to use both for it’s advanced code optimisations and for coding better Object-Oriented JavaScript (not to mention generating JavaScript documentation from the very same comments I write for the compiler).

So What’s Springboard Then?

Springboard is an ultra minimal JavaScript / CSS and HTML project template (or springboard).

It features a very useful ANT build file which, among other things, can:

• Refactor template files to match your project’s namespace so you’re ready to code in seconds
• Combine JavaScript and CSS libraries to reduce HTTP requests
• Compile JavaScript using the Google Closure Compiler (simple or advanced)
• Minify CSS using the YUI Compressor
• Generate JavaScript documentation using the JSDoc Toolkit
• Sanitize HTML and inject variables at compile time

Also included is a simple JavaScript Model-View-Controller (MVC) template (based on Alex Netkachov’s) which can optionally be used as a basis for your project.

Hopefully No fluff – just the very basics you need to get a project or experiment started.

Check out Springboard on github

Quick Setup

To get started, first clone the repository:

cd /your/workspace
git clone git@github.com:soulwire/Springboard.git YourProjectName

Run the setup task and enter your project’s namespace when prompted:

cd YourProjectName
ant setup
Enter the full project namespace for this project: com.domain.project

This will refactor the project template to match your namespace. You’ll then be given the option to delete the GIT metadata and disconnect from the Springboard repository…

You can build your project with the default ANT task, build

ant build

And when you’re ready, generate documentation using the jsdoc task

ant jsdoc

You should also have a look at the build.properties file as here you can add your credentials and tweak the various build settings to your taste.

A Quick Note About Blocks

Springbard uses HTML comment blocks to figure out how it should build the project. There are different types of blocks you can use:

• CSS:LIB » Third party CSS files (combined and minified)
• CSS:SRC » Your project’s styles (combined and minified)
• JS:LIB » JavaScript dependancies (combined but otherwise left untouched)
• JS:SRC » JavaScript source files (combined and compiled)

Any linked JavaScript or CSS resources outside of these tags will simply be cloned into the build directory and left untouched for flexibility.

Springboard will look at all of your pages when it builds and combine all files in all blocks of the same type. There is then a generic document ready handler, which initialises scripts for a page based on the id tag of it’s body. This is best illustrated in this example.

A Quick Note About Externs

If you’ve used the Closure Compiler before, you’ll be familiar with Externs. Externs tell the compiler not to refactor certain methods and properties, because doing so may break your code if they reference a third party library or code not being compiled. Springboard currently ships with an externs file supporting JQuery 1.5, just to get you going. You can easily generate more for your favorite libraries using this great tool by Laurentiu Macovei or others like it.

What Springboard Doesn’t Do

The primary intention of Springboard is to provide a simple but powerful project template and build file, which integrates with the Closure Compiler as well as doing the basics which you would expect; such as file concatenation and CSS minification. It’s intended to be extremely light and minimal, allowing you to take the project kernel forward in whichever way you need; whether it’s a large site build or a quick JavaScript experiment. I would imagine that future updates will strip it back and optimise it even further, as opposed to adding features.

So to be clear, it is in no way intended as a replacement for the amazing projects out there such as HTML5 Boilerplate; simply an option if you need less rather than more in certain situations.

Now fork off and start making nice things…

Related posts:

1. What The Fuck Is My Mashup?
2. Hello Dynamic Sprite
3. Perlin Noise Flow Field

If you are building a multilingual application (or any application that requires dynamic, runtime loaded assets), swapping and managing assets can easily become tedious and messy.

Recently, for projects requiring special characters (such as Chinese, Arabic, Japanese and Hindi) and where dynamic or input text is not required, we have been creating library SWFs for each language and using static textfields to populate content. This saves file size, as unnecessary characters are not embedded, and it eases the process of including different character sets (and even fonts) for each language. It also means that we can include text in the same runtime loaded library as general display assets.

Introducing DynamicSprite

Using this process, a language specific library SWF is loaded at startup, or at runtime when the users selects a language, and once complete all dynamic assets are updated accordingly. This can get very messy for two reasons. Firstly, it means that each individual asset has to be destroyed and tidied up to release memory before it is replaced. Secondly, if you have a complex application architecture, you will end up dispatching a ton of events and implementing countless methods within every view or component, in order to rollout the update to each desired DisplayObject.

This is where DynamicSprite comes in handy. Using DynamicSprite you can effortlessly update any amount of DisplayObjects from any amount of library SWFs at runtime, whilst keeping the SWF loading logic centralised in your proxy or loader class. No events, no asset update APIs in your views and no cleaning up after yourself.

Bored? Skip straight to the examples and download

How It Works

The concept is very simple. Each instance of DynamicSprite is registered globally at a class level, you need only call a static update method once and all DynamicSprite instances will update themselves automatically. Each instance of DynamicSprite is given a class definition, which can be set or changed at runtime if desired. When a new library is loaded, it will look inside the SWFs applicationDomain and if it finds a matching asset, update itself and destroy any existing instances of that asset it might own. You can also create DynamicSprite instances at runtime anytime after an asset library has been loaded – they will check previously loaded libraries for their class definition when created. This works with any display asset, Sprites, MovieClips, Bitmaps (etc) – BitmapDatas are also detected and destroyed during the cleanup process.

Furthermore, you can load any amount of libraries per language, at different times if necessary – DynamicSprites will only update themselves when applicable, making it easy to manage your language specific libraries and even individual libraries per language if you choose to (each type of library has it’s own ID).

A DynamicSprite instance will also dispatch an event (named DynamicSprite.INSTANCE_UPDATED) when it has changed it’s asset. You can listen for this event if you need to respond to new asset dimensions. You can also listen for two events on the class itself (through a static, encapsulated EventDispatcher) which are dispatched when a library is added or updated but before all instances have changed (DynamicSprite.LIBRARY_UPDATE_START) and when all instances have finished updating themselves (if necessary) from the added / updated library SWF (DynamicSprite.LIBRARY_UPDATE_COMPLETE).

Example Implementation 

Here is a simple example of how to use DynamicSprite. Although this example only loads one SWF (the code for the multi SWF example is included in the download), it demonstrates how DynamicSprite can also be useful for single language applications where you still choose to load your assets at runtime.

public function SimpleExample()
{
	// Create a DynamicSprite instance and provide a class definition for it's asset
	var example : DynamicSprite = new DynamicSprite("assets.example.HelloWorld");
	addChild(example);

	// Load a library SWF
	var loader : Loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
	loader.load(new URLRequest("assets_en.swf"));
}

private function onLoadComplete(event : Event) : void
{
	// Call the static update method once to update all DynamicSprites
	DynamicSprite.update("example", LoaderInfo(event.target).content);
}

Another advantage of DynamicSprite is that you need not worry about synchronising loading with the update process. Any existing DynamicSprite instance will be updated if required when a library is loaded, however you can also create new instances after a required library has been loaded (useful for highly dynamic content) and any loaded libraries will be searched for matching assets upon creation. This snippet demonstrates this feature.

public function SimpleExample()
{
	// Load a library SWF
	var loader : Loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
	loader.load(new URLRequest("assets_en.swf"));
}

private function onLoadComplete(event : Event) : void
{
	// Register this library
	DynamicSprite.update("example", LoaderInfo(event.target).content);

	// Creating a DynamicSprite after a library is loaded still works fine
	var example : DynamicSprite = new DynamicSprite("assets.example.HelloWorld");
	addChild(example);
}

Download DynamicSprite

You can download the DynamicSprite class and the demo below. Also check my code repository for updates. If you find any bugs or have any suggestions please leave them in the comments.

Related posts:

1. Double Sided 3D Plane in FP10
2. Flipping you the Boid
3. AS3 Webcam Motion Tracking