Tyson Cadenhead helps you discover ways to eliminate redundant code by using a utility framework.
Introduction
One of the main tenets of good software design is to eliminate replicated code. Whether you are writing the same tired loop over and over again or you need a quick way to render a template, a utility framework is the answer.
What Is a Utility Framework?
While JavaScript is a robust language, not every basic task is simple or straightforward. A utility framework is just a collection of helpers to make performing arduous or common tasks easier. Additionally, a utility framework serves the function of abstracting away complexity in your main code base.
A helpful way to think about utility frameworks is that they make working with the JavaScript language easier in the same way that jQuery makes working with the DOM and XHR requests easier. You end up writing far less boilerplate code and focusing more on the things that make your application unique.
Let’s take a simple operation like looping over all of the contents of an object and returning the record that has whatever id we pass in. If we aren’t using a utility framework, we might do something like this:
function getUserById(obj, id) {
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
if (obj[i].id === id) {
return obj[i];
}
}
}
}
When you have a utility framework like Underscore or Lo-Dash, you can use the find method to perform a truth test and return the first item that passes. The result is significantly less code. It also much easier to read at a glance:
function getUserById(obj, id) {
return _.find(obj, function (user) {
return user.id === id;
});
}
Utility frameworks typically have a wide variety of methods that allow you do complex operations more easily. The methods in utility frameworks are usually written for cross-browser compatibility. That means that you don’t have to spend as much time worrying about the nuances of different implementations of JavaScript in different environments.
Underscore and Lo-Dash
Two of the most widely used utility frameworks are Underscore and Lo-Dash. Both Underscore and Lo-Dash are very capable, popular libraries. Today, we’re going to look at the pros and cons of each one so that you can make an informed decision next time you need to drop a utility framework into one of your applications.
Underscore
Underscore was written as a utility framework to be paired with Backbone, but it can just as easily be used in any other JavaScript framework. It provides a huge assortment of useful functions without extending built-in objects.
First Player To The Game
Underscore has been around for quite a while. It has achieved several years of battle testing in production environments everywhere and it still holds up really well.
Works On The Client Or The Server
Almost none of the Underscore methods depend on the window or document object, which means that it works great on the server-side.
Easy API
The Underscore API is very straightforward. Every method begins with an underscore, followed by the method name. For example, looping over the items in an object might look like this:
var people = {
'Neo': true,
'Trinity': true,
'Frank': false
};
_.each(people, function (person) {
// Do stuff with the person
});
As you can see, it is very clear what is happening just by looking at the code.
Lo-Dash
Lo-Dash was begun as a fork of the Underscore project. To this day, there is a Lo-Dash build that boasts being a drop-in replacement for Underscore.
Speed
In most cases, Lo-Dash is significantly faster than Underscore. While this may not be a big deal in small applications doing a minimal amount of looping over arrays and objects, it can become huge if your application is large or complex, especially on mobile devices. There are numerous speed tests to demonstrate how the two stack up, but I thought that this one on JSPerf was the most compelling.
Additional features
In addition to the base Underscore methods, Lo-Dash also adds some other useful tricks to their preverbal bag. While there isn’t time or space to list all of the enhancements, it is worth noting that Lo-Dash does go beyond simply being a one-to-one replacement of Underscore.
Underscore or Lo-Dash?
Both Underscore and Lo-Dash are very well written libraries that can greatly reduce the amount of repetitive boilerplate code required for your application. At appendTo, we use both on a regular basis. As a general rule of thumb, I will typically use Underscore if one of our third-party libraries depends on it. If there are no hard dependencies for either, Lo-Dash is a really solid choice because it is typically faster and there are a few extra features like _.deepExtend that tend to be really useful.
Whether you use Underscore, Lo-Dash or some other utility framework, the goal should be to abstract away repetition so that you can write code for the things that are central and valuable to your specific application.