1. Engineering JavaScript
Dr Jim Purbrick
Async 10th March 2011

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

3. 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#...

4. 21st Century JavaScript
Image: Google
Image: W3C

5. Module
myOrg = (function(myOrg) {
var myApp = myOrg.myApp = myOrg.myApp || {};
function myPrivateFunction() {
// Do my thing.
}
myApp.myPublicFunction = function() {
return myPrivateFunction();
}
return myOrg;
}(myOrg || {}));

6. myOrg = (function(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 || {}));

7. Inheritance
myOrg = (function(myOrg) {
var myApp = myOrg.myApp = myOrg.myApp || {},
mySub = myOrg.myApp.mySub = myOrg.myApp.mySub || {};
mySub.create = function() {
var that = myApp.myClass.create(),
myClassMyPublicMethod = that.myPublicMethod;
that.myPublicMethod = function() {
// Do something.
return myClassMyPublicMethod();
};
return that;
};
return myOrg;
}(myOrg || {}));

8. Dependency Injection
myOrg = (function(myOrg) {
var myApp = myOrg.myApp = myOrg.myApp || {},
mySub = myOrg.myApp.mySub = myOrg.myApp.mySub || {};
mySub.create = function(params) {
var that = params.constructor(),
myClassMyPublicMethod = that.myPublicMethod,
$ = params.jQuery;
that.myPublicMethod = function() {
return myClassMyPublicMethod();
};
return that;
};
return myOrg;
}(myOrg || {}));

9. 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>

10. 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())();
});

11. 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/

12. Thank You!
http://jimpurbrick.com
http://18dex.com