Brief talk on Loadrunner as given at the Twitter Front-end Summit on 4/13.

1. Loadrunner
@danwrong

2. Script loader

3. Script loader

4. Dependency Manager

5. Thing(s) that need to
happen before other
things can happen

6. Vital Statistics
• http://github.com/danwrong/loadrunner
• 4.6KB minified
• MIT License
• Used by: Phoenix, TfW

7. Built-in features

8. Load arbitrary JavaScript

9. using('/javascripts/app.js', '/javascripts/underscore.js', function() {
_([1, 2, 3]).each(function(i) {
Application.load(i);
});
});
var utils = using('/javascripts/jquery.js', '/javascripts/underscore.js');
utils.then(function() {
// do some stuff
});
// somewhere else in your code
utils.then(function() {
// do other stuff
});

10. Define/import modules

11. // define with object
provide({
original: 'nuttah',
booyaka: "booyaka"
});

12. // define with a factory function (in modules/dancehall.js)
provide(function(exports) {
var beenieMan = 'badman';
function whoGotTheKeysToMaBeamer(person) {
if (person == beenieMan) {
return "De girls dem suga";
}
}
exports({
beenieMan: beenieMan,
whoGotTheKeysToMaBeamer: whoGotTheKeysToMaBeamer
});
});

13. using.path = '/modules';
using('dancehall', function(dancehall) {
console.log(dancehall.whoGotTheKeysToMaBeamer('badman'))
//=> "De girls dem suga"
});

14. provide(function(exports) {
using('soundsystem', function(soundsystem) {
var beenieMan = 'badman';
function whoGotTheKeysToMaBeamer(person) {
if (person == beenieMan) {
return soundsystem.play("De girls dem suga");
}
}
exports({
beenieMan: beenieMan,
whoGotTheKeysToMaBeamer: whoGotTheKeysToMaBeamer
});
});
});

15. Define/import AMD
Modules
http://wiki.commonjs.org/wiki/Modules/
AsynchronousDefinition

16. // in modules/amd/dancehall.js
define(['soundsystem'], function(soundsystem) {
var beenieMan = 'badman';
function whoGotTheKeysToMaBeamer(person) {
if (person == beenieMan) {
return soundsystem.play("De girls dem suga");
}
}
return {
beenieMan: beenieMan,
whoGotTheKeysToMaBeamer: whoGotTheKeysToMaBeamer
};
});

17. using.path = '/modules';
using('amd/dancehall', function(dancehall) {
console.log(dancehall.whoGotTheKeysToMaBeamer('badman'));
//=> "De girls dem suga"
});

18. Under the hood

19. loadrunner.Dependency

20. var dep = new loadrunner.Dependency;
dep.then(function(results){
console.log(results);
});
dep.then(function(results) {
console.log(results + 10);
});
dep.complete(15);
// logs 15 and 25;
dep.then(function(results) {
console.log(results - 5);
})
// logs 10 immediately
dep.completed === true;

21. using()

22. using('thing', '/javascripts/thing.js');
// is the same as:
new loadrunner.Combination([
new loadrunner.Module('thing'),
new loadrunner.Script('/javascripts/thing.js')
]);

23. using.matchers.add(/.js$/, function(path) {
return new Script(
path.replace(/^$/, using.path.replace(//$/, '') + '/')
);
});
using.matchers.add(/^[a-zA-Z0-9_-/]+$/, function(id) {
return new Module(id);
});

24. Building in to Loadrunner

25. function Template(path) {}
Template.prototype = new loadrunner.Dependency;
Template.prototype.start = function() {
// called when first callback is added
// start the template load
this.load(function(source) {
// call complete when its done
var template = this.compile(source)
this.complete(template);
})
};
using.matchers.add(/.mustache$/, function(path) {
return loadrunner.Template(path);
});
using('example.mustache', function(template) {
template.eval({ a: 1, b: 2 });
});

26. Loadbuilder is coming
• Based on Node.js, NPM module
• Builds and minifies dependency trees defined with
Loadrunner

27. Questions?