Engineering JavaScript

Engineering JavaScript
Dr Jim Purbrick
Async 10th March 2011

Who Am I?
Technical Director at Linden Lab
Setup Linden Lab Brighton
Software Engineer
Musician
Freelancer
Entrepreneur

That’s No Moon...
35,000 CPU Cores

Weekly Releases

No Downtime

1.5 MLOC

100 Engineers

10 Years Image: jurvetson

C++, Python, Perl, PHP, C#...

21st Century JavaScript

Image: Google
Image: W3C

Module
myOrg = (function(myOrg) {

var myApp = myOrg.myApp = myOrg.myApp || {};

function myPrivateFunction() {
// Do my thing.
}

myApp.myPublicFunction = function() {
return myPrivateFunction();
}

return myOrg;

}(myOrg || {}));

Class
var myApp = myOrg.myApp = myOrg.myApp || {},
myClass = myOrg.myApp.myClass = myOrg.myApp.myClass || {};

myClass.create = function() {

var that = {};

myPrivateMethod() {
}

that.myPublicMethod = function() {
myPrivateMethod();
};

return that;
};

return myOrg;

}(myOrg || {}));

Inheritance

mySub = myOrg.myApp.mySub = myOrg.myApp.mySub || {};

mySub.create = function() {

var that = myApp.myClass.create(),
myClassMyPublicMethod = that.myPublicMethod;

// Do something.
return myClassMyPublicMethod();
};

return that;
};

return myOrg;

}(myOrg || {}));

Dependency Injection

mySub = myOrg.myApp.mySub = myOrg.myApp.mySub || {};

mySub.create = function(params) {

var that = params.constructor(),
myClassMyPublicMethod = that.myPublicMethod,
$ = params.jQuery;

return myClassMyPublicMethod();
};

return that;
};

return myOrg;

}(myOrg || {}));

Production
<script type="text/javascript">
$(window).load(function() {

var params, mySubInstance;

params = {
constructor: myOrg.myClass.create,
jQuery: jQuery
};

mySubInstance = myOrg.myApp.mySub.create(params);

// Do something with mySubClassInstance.

};
</script>

Test
JsHamcrest.Integration.QUnit();
JsMockito.Integration.QUnit();

test('mySubClass calls super class constructor', function () {

var params, mySubInstance;

params = {
constructor: mockFunction(),
jQuery: mockFunction()
};

mySubInstance = myOrg.myApp.mySub.create(params);

verify(params.constructor, once())();
});

More?
1. http://www.adequatelygood.com/2010/3/
JavaScript-Module-Pattern-In-Depth
2. http://www.crockford.com/
3. http://oreilly.com/catalog/9780596517748
4. http://docs.jquery.com/Qunit
5. http://jsmockito.org/

Thank You!

http://jimpurbrick.com
http://18dex.com

Engineering JavaScript