5. 5
Lesson 1. Mocking is a MUST
stateManager = {
frameSent: function () {}
};
network = proxyquire('./network', {
'./stateManager': stateManager
});
With AngularJS we use standard ngMock.
We use jasmine in front and backend (but not only).
For the browser applications we use Proxyquireify (requires browserify)
6. 6
Lesson 2. DOM changes not always
update innerHtml
// Risky Tag Names that should be handled manually
var tags = ['input', 'textarea', 'select', 'option'],
// Risky Attributes to backup
attributes = ['value', 'selected', 'checked', 'disabled'],
// Risky Attributes that has no value
noValueAttributes = ['selected', 'checked', 'disabled'];
7. 7
Lesson 3. Compression and diffing
without web workers
/**
* Queue a work to the end of the javascript runtime excecution queue
*/
queueWork: function(context, fnNameOrReference, params, callback){
// add context to top of params, so that apply passes params correctly to bind
params.unshift(context);
// bind callback to context and add callback to end of parameter list
params.push(callback.bind(context));
// we use apply on bind because the params in array, bind needs each params as argument,
wheres
// apply can take a paramter array, so we do apply on bind.
if (typeof fnNameOrReference == 'string') {
setTimeout(Function.bind.apply(context[fnNameOrReference],params),0);
} else {
setTimeout(Function.bind.apply(fnNameOrReference,params),0);
}
},
8. 8
Lesson 4. Track events with different
speed
To throttle the rate a function gets executed we use debouncing
var interval = config.get('recordMouseMovement').duration;
setInterval((function (buffer, activeMouseCordinates, lastRecordedMouseCordinates)
{
return recordMousePosition;
})(buffer, activeMouseCordinates, lastRecordedMouseCordinates), interval)
self.api.deBouncedFilter = debounce(self.api.filter, 400);
9. 9
Lesson 5. Parse html in a new iFrame was
a huge bottleneck
var domParser = new DOMParser();
domParser.parseFromString(html, 'text/html');
Can be shown in qumramapi/app/mongodb.js, (node-service-template branch) we are using bluebird to promisify mongodb native library.
Qumramui/gulp_tasks can be shown to show how we leverage promises for better structured readable code.