On Heisenberg.js

Today, I released Heisenberg.js, a project base for building modern JavaScript applications.

Features

From the site itself, here are the key features:

• Not a framework, but a base project to help you structure your JavaScript code and files.
• Makes use of the Mediator Pattern, so you can trigger events around your application.
• Templating built in - Handlebars is included but feel free to change engines.
• Follows the Object Literal Pattern with one global namespace, usually 'myApp' or 'chatApp'. In this case, it's 'breakingBad'.
• Included: jQuery, Underscore.js and Handlebars.
• A fully commented source to show you why it's doing what it's doing and how to build upon it's foundation.
• The JavaScript version of the HTML5 Boilerplate

The thing that I hope makes this project succeed is that it's almost the same code you've been writing in jQuery or JavaScript. It's just that I'm hoping to provide a way for people to kick off their next project with a little more structure than maybe they've had before. It potentially introduces some new paradigms that you may not be familiar with; the idea of The Mediator Pattern. This is where instead of directly referencing another Object/Module in your application, you send a "message" (you trigger an event) to a central Object which then fires that event across your whole application. Any Modules that are listening out for that event can then perform an action based off of it. Data can be sent with these events as well. The idea being that you then end up with lots of smaller, decoupled Modules as opposed to one big file and all functionality being mixed together.

The second thing that you may or may not be using is templating. How many times have you, maybe in the success of an AJAX call, built up a string of HTML and injected it into the DOM? I certainly have. Templating allows you to keep all HTML out of your JavaScript logic and tucked away in neat "partials", ready to be called into action. Heisenberg.js comes with Handlebars as standard but is completely template engine agnostic, so feel free to use any of the others.

Whether you use this project in it's intended manner is obviously completely up to you. It's basically jQuery but organised into files and Modules. My advice would be to build upon this solid base but feel free to experiment within this architecture and find what works best for you.

Future plans

It's hosted on GitHub, and has already got a few suggestions for improvements/additions, which I'll be gladly integrating in the near future.

The goal

To be as widely used as HTML5 Boilerplate. I think with JavaScript, there's still quite a large middle ground between jQuery in a scripts.js file and full blown Backbone.js applications. I hope this helps a lot people organise their code and form their own opinions on architecture and coding style.

Watch this space.