10 Ways to (re) Structure JavaScript

Structuring JavaScript can be a job in itself if you don’t look out. I was attending the virtual jQuery Summit 2011, and one of the talks were called ‘Structuring Your DOM-based Application‘ by Garann Means. Her talk really took me back to the days of fighting un-structured JavaScript.

I was working on a code base that had been maintained by a handful of different developers, each with different skills, ideas and disciplin. Web development, and especially JavaScript requires a lot of disciplin in order to keep the code clean and structured, and that just wasn’t the case at that time.

While I was watching Garann’s talk, I constantly thought of all the problems we had and what we eventually did to solve our issues and take control of our JavaScript.

This is is my 10 ideas on ways to (re) structure JavaScript, get it under control, get rid of legacy code and improve the quality of a code base.

1. Move all JavaScript code into js files

While this should be obvious for all of us, it’s just something I constantly see people don’t do. Instead of having these nice js files, JavaScript is thrown into view files.

First of all, this means that the same code is delivered to the client everytime a page is requested. Depending on the amount of JavaScript tucked into the view, this can easily add up to hundreds of kilobytes which slows down your sites load time. With JS files, you can easily cache those files on the client, save bandwidth and increase the speed of your site.

Secondly, it makes the JavaScript much more difficult to maintain. You basically can’t find what you’re looking for, it’s hard to have shared and general purpose functions that you can use from several views and you declare everything in the global scope.

2. Use closures, to avoid working in the global scope

JavaScript’s biggest problem is its dependence on global variables, particularly implied global variables. If a variable is not explicitly declared (usually with the var statement), then JavaScript assumes that the variable was global. This can mask misspelled names and other problems.

Douglas Crockford, http://www.jslint.com/lint.html – (Global Variables paragraph)

To solve this problem, we need to wrap all of our code in closures.

A closure changes the context your code is executed within, to be inside the closure and not in the global scope. This means that all your functions and variables inside your closure is not available for others, outside the closure unless you explicitly expose them.

A closure is often referred to as an Immediately Invoked Function Expression (IFFE), and it is pretty much a function that acts as a wrapper around your code:

(function () {
  // your code here
})();

Read more about closures and IIFE’s here.

3. Improve jQuery selectors

jQuery selectors are very powerful. It’s dead easy to write selectors that gets a bunch of elements in the DOM, and they can easily get pretty advanced.

This can have an impact on the performance of your code. Running in the browser, the efficiency of your code has a direct impact on the user’s experience.

Since getElementsByClassName is not implemented by all browsers, the ones that don’t have it will suffer when you query the DOM by class class name.

That means you can speed up your jQuery selectors by specifying the tag name before the class name:

BAD: $(".price-label")

GOOD: $("span.price-label")

You can also improve performance by limiting the context in which you select. You do that by specifying a second parameter to the selector which could be a container element that you’re working inside:

var productDetailsDiv = $("div.product-details");
var priceLabel = $("span.price-label", productDetailsDiv);

4. Cache elements, instead of selecting from the DOM

Using jQuery to select elements from the DOM is expensive. Some selectors are more expensive than others, but if you’re going to use the same element multiple times in a functions, you’re better off storing it in a local variable instead of selecting it every time.

When you select an element like this: $(".price-label") it’s like having a huge swimming pool (the DOM), and telling your little brother (jQuery) to jump in and find all USD coins in there. And if you do the same on the next line of code, he has to jump in again, swim around the pool looking for USD coins.

And if the pool is junked up with loads of coins in other currencies, he has to look at each end everyone of them to determine whether or not it is a USD coin.

Some browser has a native function called getElementsByClassName, as opposed to getElementsByTagName. That does speed up the above example a little, but it is still much more effective to cache the element in a local variable.

It’s just a matter of saving an element to a local variable, and the use that in the rest of you code:

var productDetailsDiv = $("div.product-details");
var priceLabel = $("span.price-label", productDetailsDiv);

5. Get rid of HTML in JavaScript

Just like JavaScript should not be added to your HTML pages, HTML should not be generated inside JavaScript by concatenating strings.

Client side template libraries are getting more and more popular, so utilize the <script type=”text/template”></script> and embed your client side view templates there.

Or even better. Pre-compile your client side views into JavaScript using something like HoganJS, place the code in a separate file and embed that. Not only will the footprint be smaller, but you also get caching and you speed things up since they’re already compiled!

6. Upgrade jQuery

This should be a no-brainer. But code-bases get stuck on old versions for a variety of reasons. Maybe you rely on a plugin that doesn’t work with the latest version, or you use lots of deprecated stuff that would take ages to rewrite.

Plugins that are stuck on older version, and are not compatible with future versions must die! You should not hold yourself hostage due to a plugin – get rid of it, fix the error, rewrite the plugin yourself and host it on Github. Never get stuck!

Same for deprecated code. It’s a huge warning signal and you need to react!

In general, stay up to date on the project. New concepts, bug fixes and performance improvements are added all the times. Subscribe to their blog, read the release notes everytime they release a new version to get familiar with the new stuff.

7. Teach your colleagues

It is widely misunderstood, but a lot of developers tend to think of JavaScript as a language you don’t have to learn, in order to write and maintain it. I don’t know of any other language where this is the case, but loads of developers just think of JavaScript as “not real code” that “just lives in the browser”, and more or less “doesn’t matter”.

This is one of the many reasons why JavaScript gets out of control. Too many incompetent developers are writing it, and it’s a tough job to get it under control if you’re the only true JavaScript developer where you work.

First of all, tell your colleagues to watch JavaScript – The Good Parts by Douglas Crockford. This touches on what’s great and what’s bad in JavaScript, and any developer that don’t really know the language will realize that they’re doing a lot of stuff wrong.

If you have to write JavaScript – man up and learn the language.

8. Combine, compress and cache your JavaScript.

In order to increase the performance of any website, minimizing the amount of files the browser needs to download, and minimizing the size of each file is vital.

First of all, install YSlow in your browser and start examining what you have to improve.

If you haven’t optimized for fewer HTTP request, you’ll notice that’s the top thing YSlow tells you to do. Find inspiration and guidance on how to minify and optimize JavaScript and CSS files. It’s easy.

Next up is caching. First thing on this list, suggests that you should move JavaScript into js files. And this is why: Having js files, that is embedded on a page makes it really easy to cache on the client. Most webservers already sends out proper HTTP headers to allow static files, such as JavaScript to be cached on the client.

What you have to make sure, is that you’re able to bust the cache. Either use expiration headers, or add a version indicator to the URL of the file. Next time you deploy, increase that number to make it a new URL.

9. Use a Content Delivery Network – CDN

If you have lots of traffic, from all over the world. You can benefit from hosting your JavaScript files on a Content Delivery Network. With all the new cloud hosting companies out there, this has become exceptionally cheap.

For jQuery and other common libraries, you can also use the CDN hosted files provided by jQuery, Google or Microsoft.

10. Write JavaScript Unit Tests

Some people would probably say this should not be the last thing to do. But I think you need all the low-hanging fruits, that you can accomplish before you start dramatically changing the way you go about writing JavaScript. And unit testing JavaScript is going to do that.

There are several good unit testing libraries for JavaScript. The more popular are QUnit and Jasmine.

Conclusion

There’s a lot of things you can do to re-structure and get control of JavaScript. One thing is for sure. If you do nothing, things will get messy.

This was my take on what can be done, things I’ve done in the past with great success.

What do you think is missing, what have you done that greatly improved the quality of your JavaScript code-base?