jquery & 10,000 global functions: working with legacy javascript
TRANSCRIPT
JQUERY & 10,000 GLOBAL FUNCTIONS
Working with Legacy JavaScript
Presentation Business Logic Datastore
Presentation Business Logic Data Access
Our Concern The Mapping Their Concern
Presentation Business Logic Data Access
WHAT DOES THIS HAVE TO
DO WITH JAVASCRIPT?
STRATEGY VS DRIFT
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0;"><title>GuyRoyse.com | Blog</title><link rel="icon" type="image/jpg" href="/images/alien-sunrise-icon.png"><link rel="stylesheet" href=“/site.css">
<script>
💩 </script>
</head>
<body>…
</body></html>
SOLUTION #1: WE NEED A FRAMEWORK!
SOLUTION #2: WE NEED A REWRITE!A new tiger team is selected. Everyone wants to be on this team because it’s a green-field project. They get to start over and create something truly beautiful. But only the best and brightest are chosen for the tiger team. Everyone else must continue to maintain the current system.
Now the two teams are in a race. The tiger team must build a new system that does everything that the old system does. Not only that, they have to keep up with the changes that are continuously being made to the old system. Management will not replace the old system until the new system can do everything that the old system does.
This race can go on for a very long time. I’ve seen it take 10 years. And by the time it’s done, the original members of the tiger team are long gone, and the current members are demanding that the new system be redesigned because it’s such a mess.
Martin, Robert C. (2008-08-01). Clean Code: A Handbook of Agile Software Craftsmanship (p. 5). Pearson Education (USA). Kindle Edition.
THE REAL SOLUTION
Untestable Code
Testable Code
Tested Code
TDD
Very Careful Refactor
Characterization Tests
Failing Test
WHAT’S A 27-LETTER WORD FOR “CORN”?
THE SIZZLE
I have code in the HTML or in an associated JavaScript file that does some sort of fancy UI thing in a dated way.
Problem
Solution Refactor to use modern CSS and test manually. There is very little point in putting automated tests around visual effects.
index.html<script>function addDropShadow(tag) {tag.style.backgroundColor = "black";
}
function removeDropShadow(tag) {tag.style.backgroundColor = "";
}</script>
<a onmouseenter="addDropShadow(this)" onmouseleave=“removeDropShadow(this)"href="somepage.jsp">Rollover Test</a>
index.html<style>.rollover:hover {background-color: black;
}</style>
<a class="rollover">Rollover Test</a>
CODE IN THE HTML
I have code in the HTML. It cannot be loaded into a test harness to test it.
Problem
Solution Move code a .js file and add a script tag if needed. Surround code in question with a test if possible or extract a method and test that. If there is code in event attributes in the HTML, used jQuery to bind to those events instead.
index.html<script>function doAwesomeThing() {thing.doAwesomeStuff("Awesome App is Awesome");
}</script><a onclick="doAwesomeThing()">Awesome Thing</a>
index.html<script src="awesome.js"></script><a id="awesomeThing">Awesome Thing</a>
awesome.js$('#awesomeThing').on('click', onAwesomeThingClicked);function onAwesomeThingClicked() {thing.doAwesomeStuff("Awesome App is Awesome");
}
awesome-spec.jsdescribe("awesome thing", function() {beforeEach(function() {spyOn(thing, 'doAwesomeStuff');
});it("does awesome stuff when clicked", function() {onAwesomeThingClicked();expect(thing.doAwesomeStuff).toHaveBeenCalledWith('Awesome App is Awesome');
});});
DOM INTERACTION
A lot of the code interacts with the DOM and I don’t have a DOM in my unit test.
Problem
Solution You can have a DOM in your unit tests. Mock out HTML elements using Jasmine jQuery. Use jQuery to trigger events and to validate that the DOM is modified in the expected way.
index.html<script src="awesome.js"></script><a id="awesomeThing">Awesome Thing</a><div id="toBeAwesome"/>
awesome.js$('#awesomeThing').on('click', onAwesomeThingClicked);
function onAwesomeThingClicked() {$('#toBeAwesome').html("Awesome App is Awesome");
}
awesome-spec.jsdescribe("awesome thing", function() {
beforeEach(function() {setFixtures('<div id="toBeAwesome"/>');
});
it("does awesome stuff when clicked", function() {onAwesomeThingClicked();expect($('#toBeAwesome')).toHaveHtml('Awesome App is Awesome');
});
});
10,000 GLOBAL FUNCTIONS
I have functions everywhere, man!Problem
Solution Put a test around the global function. Move the global function to a Module and replace the global function with a variable that points to the Module. Later, when no more code is accessing the global, remove the global variable.
app.jsfunction transmogrify() {};function transmute() {};function transform() {};
app.jsvar Mutators = {};Mutators.transmogrify = function() {};Mutators.transmute = function() {};Mutators.transform = function() {};
var transmogrify = Mutators.transmogrify();var transmute = Mutators.transmute();var transform = Mutators.transform();
app-spec.jsdescribe("Mutators.transform", function() {
it("has mapping to legacy function", function() {expect(transform).toBe(Mutators.transform);
});
it("does stuff", function() {expect(Mutators.transform()).toBe(true);
});
});
NO UNITS
There are no units to test.Problem
Solution Carefully extract a function and place tests around that function. Be careful not to create a 10,000 Global Functions problem.
app.js$(function() {var id = $('#id').val();$.get('data/' + id, function(data) {$('#name').val(data.name);$('#rank').val(data.rank);$('#serialNo').val(data.serial);
});});
app.js$(function() {fetchAndUpdateDom();
});
function fetchAndUpdateDom() {var id = $('#id').val();$.get('data/' + id, function(data) {updateDom(data);
});};
function updateDom(data) {$('#name').val(data.name);$('#rank').val(data.rank);$('#serialNo').val(data.serial);
}
JQUERY EVERYWHERE
I have jQuery calls inline everywhere in my code.Problem
Solution Using the Module pattern, migrate the jQuery that interacts with the DOM into Passive Views. Migrate the jQuery that makes AJAX calls into Adapters. Place tests around these Modules.
app.jsfunction fetchAndUpdateDom() {var id = $('#id').val();$.get('data/' + id, function(data) {$('#name').val(data.name);$('#rank').val(data.rank);$('#serialNo').val(data.serial);
});};
app.jsvar view = {id : function() { return $('#id').val(); },name : function(val) { $('#name').val(val); },rank : function(val) { $('#rank').val(val); },serialNo : function(val) { $('#serialNo').val(val); }
};
var data = {fetch : function(id, callback) {$.get('data/' + id, callback);
}};
function fetchAndUpdateDom() {data.fetch(view.id(), function(data) {view.name(data.name); view.rank(data.rank); view.serialNo(data.serialNo);
});}
REALLY UGLY FOR LOOPS
These nested for loops are hideous!Problem
Solution Use Underscore, lodash, or the built in array functions like forEach, find, reduce, and map.
app.jsvar values = [1,2,3,4,5], sum = 0, evens = [], doubles = [], i;
for(i = 0; i < values.length; i++) {sum += values[i]
}
for(i = 0; i < values.length; i++) {if (values[i] % 2 == 0) evens.push(values[i]);
}
for(i = 0; i < values.length; i++) {doubles.push(values[i] *2);
}
app.jsvar values = [1,2,3,4,5];
var sum = values.reduce(function(prev, value) {return prev + value;
}, 0);
var evens = values.filter(function(value) {return value % 2 === 0;
});
var doubles = values.map(function(value) {return value * 2;
});
REALLY LONG FUNCTIONS
This function is too long!Problem
Solution Place a test around the function and refactor it to a Revealing Module.
app.jsfunction doMaths(x, y) {var add = x + y;var sub = x - y;var multi = x * y;var div = x / y;return { add: add, sub: sub, multi: multi, div: div };
};
app.jsvar mather = (function() {var _x, _y;
function doMaths(x, y) {_x = x; _y = y;return { add: add(), sub: sub(), multi: multi(), div: div() };
}
function add() { return _x + _y; }function sub() { return _x - _y; }function multi() { return _x * _y; }function div() { return _x / _y; }
return { doMaths : doMaths };
})();
mather.doMaths(x, y);
ALMOST DUPLICATION
I have all these functions that do almost the same thing but I can’t break them down.
Problem
Solution Use a Lambda Factory to create the functions for you.
app.jsfunction getFirstNumberTimes(x) { return Number($('#first').val()) * x; }function getSecondNumberTimes(x) { return Number($('#second').val()) * x; }function getThirdNumberTimes(x) { return Number($('#third').val()) * x; }
app.jsfunction getFirstNumberTimes(x) { return getNumberTimes('#first', x); }function getSecondNumberTimes(x) { return getNumberTimes('#second', x); }function getThirdNumberTimes(x) { return getNumberTimes('#third', x); }
function getNumberTimes(id, x) {return Number($(id).val()) * x;
}
app.jsfunction getTimesFn(id) {return function(x) {var val = $(id).val();return Number(val) * x;
};}
var getFirstNumberTimes = getTimesFn('#first');var getSecondNumberTimes = getTimesFn('#second');var getThirdNumberTimes = getTimesFn('#third');
SIDE-EFFECTS
When testing an object, I get side effects.Problem
Solution This is really just the problem of using globals. JavaScript’s dynamic nature makes global objects easy to implement. Avoid this and create Factory Functions instead of global Modules.
app.jsvar statefullThing = (function() {var _name = "Alice";function getName() { return _name; }function setName(name) { _name = name; }
return { getName: getName, setName: setName };})();
app-spec.jsdescribe("statefulThing", function() {
var subject = statefullThing;
it("has a settable name", function() {subject.setName('Bob');expect(subject.getName()).toBe('Bob');
});
it("has expected default name", function() {expect(subject.getName()).toBe('Alice');
});
});
app.jsfunction statefuleThingFactory() {var _name = "Alice";function getName() { return _name; }function setName(name) { _name = name; }
return { getName: getName, setName: setName };};
var statefulThing = statefulThingFactory();
app-spec.jsdescribe("statefulThing", function() {
var subject;
beforeEach(function() {subject = statefulThingFactory();
});
it("has a settable name", function() {subject.setName('Bob');expect(subject.getName()).toBe('Bob');
});
it("has expected default name", function() {expect(subject.getName()).toBe('Alice');
});
});
PYRAMIDS OF DOOM
My AJAX calls are nested really deeply and I have some timing issues with them.
Problem
Solution Use Promises to remove the nesting and force the call order to what is needed.
app.js$.get('orders.json', function(orders) {var order = findOrder(orders);updateDom(order);$.get('items/' + order.id, function(items) {var item = findItem(items);updateDom(item);$.get('details/' + item.id, function(details) {udpateDom(details);
});});
});
app.jsget('orders.json').then(function(orders) {var order = findOrder(orders);updateDom(order);return get('items/' + order);
}).then(function(items) {var item = findItem(items);updateDom(item);return get('details/' + item.id);
}).then(function(details) {updateDom(details);
});
app.jsfunction get(url) {var deferred = Q.defer();$.get({url : url,success: function(data) {return deferred.resolve(data);
},error: function(xhr, status, error) {return deferred.reject(error);
}});return deferred.promise();
}
get('orders.json').then(function(orders) {var order = findOrder(orders);updateDom(order);return get('items/' + order);
}).then(function(items) {var item = findItem(items);updateDom(item);return get('details/' + item.id);
}).then(function(details) {updateDom(details);
});
NOT SURE IF I SHOULD ASK A QUESTION
OR JUST RUN FOR THE DOOR
