jQuery & 10,000 Global Functions: Working with Legacy JavaScript

JQUERY & 10,000
GLOBAL FUNCTIONS
Working with Legacy JavaScript

WHO IS THIS
GUY?
@guyroyse
guy@guyroyse.com
guyroyse.com

Presentation Business Logic Datastore

Presentation Business Logic Data Access

Our Concern The Mapping Their Concern

WHAT DOES THIS HAVE TO
DO WITH JAVASCRIPT?

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

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 ﬁle 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 eﬀects.

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 ﬁle 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.js
describe("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
modiﬁed 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.js
describe("awesome thing", 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.js
function transmogrify() {};
function transmute() {};
function transform() {};
app.js
var Mutators = {};
Mutators.transmogrify = function() {};
Mutators.transmute = function() {};
Mutators.transform = function() {};
var transmogrify = Mutators.transmogrify();
var transmute = Mutators.transmute();
var transform = Mutators.transform();
app-spec.js
describe("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() {
updateDom(data);
});
};
function updateDom(data) {
}

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.js
});
};
app.js
var 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);
}
};
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, ﬁnd, reduce, and map.

app.js
var values = [1,2,3,4,5], sum = 0, evens = [], doubles = [], i;
for(i = 0; i < values.length; i++) {
sum += values[i]
}
if (values[i] % 2 == 0) evens.push(values[i]);
}
doubles.push(values[i] *2);
}
app.js
var 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.js
function 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.js
var 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.js
function getFirstNumberTimes(x) { return Number($('#first').val()) * x; }
function getSecondNumberTimes(x) { return Number($('#second').val()) * x; }
function getThirdNumberTimes(x) { return Number($('#third').val()) * x; }
app.js
function 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.js
function 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 eﬀects.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.js
var statefullThing = (function() {
var _name = "Alice";
function getName() { return _name; }
function setName(name) { _name = name; }
return { getName: getName, setName: setName };
})();
app-spec.js
describe("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.js
function statefuleThingFactory() {
var _name = "Alice";
function getName() { return _name; }
function setName(name) { _name = name; }
return { getName: getName, setName: setName };
};
var statefulThing = statefulThingFactory();
app-spec.js
describe("statefulThing", function() {
var subject;
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.js
get('orders.json').then(function(orders) {
updateDom(order);
return get('items/' + order);
}).then(function(items) {
updateDom(item);
return get('details/' + item.id);
}).then(function(details) {
updateDom(details);
});

app.js
function 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) {
updateDom(order);
return get('items/' + order);
}).then(function(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

THANKS!
@guyroyse
guy@guyroyse.com
guyroyse.com

jQuery & 10,000 Global Functions: Working with Legacy JavaScript

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to jQuery & 10,000 Global Functions: Working with Legacy JavaScript (20)

More from Guy Royse (9)

Recently uploaded (20)

jQuery & 10,000 Global Functions: Working with Legacy JavaScript