Into the swing of Javascript

My last post was a long time ago. I’ve been busy. Unfortunately rather than being some interesting article occupying the top spot on my site it has been a short bemoan of missing Flash. I still miss ActionScript 3 from time to time, but I’ve really been enjoying Javascript development, both in the client and on the server. There have been a couple things that have made it more manageable to me. I want to share.

Multiple Files

One of the hardest parts of heavy Javascript starting out was fitting everything into a few files. Being used to a-class-per-file with ActionScript has made cramming a whole application into two or three files quite unorganized, no matter how commented the code. I know combining Javascript files isn’t a big deal, but what really made it work for me is when I integrated it into my IDE workflow (I use IntellJ which has the best Javascript intelligence I’ve found in any IDE—WebStorm would be the same, without as much bloat). I have a maven script that uses YUI Compressor (could use Ant easily as well) and it is set up to my Cmd+S key-binding so whenever I save a Javascript file it saves the file and recombines the rest into one file. A downside is that I have to be cognizant of what order (dependency-wise) the files go in and to be sure to add them to my maven script as I add new files. I’d like to look at Google’s Closure compiler which allows the use of a require() method to include scripts and figures out dependency for you when putting them together. This would be nice.

Realistic Classes

Getting a simple Class utility put together that makes creating classes more readable but still uses does it “the native way” under the hood has made class structures enjoyable. I use a modification of my simpli5 class utility (I don’t use the rest of simpli5 much however since we’re still not completely HTML5 yet). Consider the difference between the following:

function MyClass(state) {
    this.state = state;
MyClass.prototype.doSomething = function() {
    this.state = this.state + 42;
// versus
var MyClass = new Class({
    constructor: function(state) {
        this.state = state;
    doSomething: function() {
        this.state = this.state + 42;

I think it is much more readable.


I also use a form of package management, and I wrap all my files in function closures so I don’t clutter the global scope. But I hate always referencing Classes or package-level object and methods with their full package name, so I use imports…sorta.

(function() {
    // imports
    var Class = mypackage.Class,
        OtherNeededClassOrObject = mypackage.somepackage.ClassOrObject,
        subpackage = mypackage.subpackage,
        MySuperClass =subpackage.MySuperClass;

    subpackage.MyClass = new Class({
        extend: MySuperClass,
        constructor: function() {
  ; // super(); in Flash
    }, {

I’m quite happy with the setup I’ve established, using separate files, classes, and package management. It keeps it close to how Javascript works without any “magic” or hacks, and it makes my code much more readable and manageable to me. I’ve also borrowed a few ideas from backbone.js for a base Model class that will load data from my APIs. I didn’t need the rest of backbone for this project so just used their ideas, but in future projects I would consider it.

Happy coding!