Design Patterns and JavaScript Minification

Apr 5, 2010
Episode 19
Nick takes a look at a few design patterns and Jim shows you how to shrink down your JavaScript files.
Spotlight

Thanks to those who make Doctype possible!

Design Patterns

If you’ve seen a common design problem solved on many different websites, there’s probably a design pattern for it, which is just the optimal solution to a common problem. The design patterns in this episode are from the Yahoo! Design Pattern Library.

Search Pagination

The most familiar type of pagination is search pagination and if you have search functionality in your website, it’s essential to get this one right. Similar to a typical search engine result page, you should have a row of page numbers with previous and next links on either side. When on the first page, the previous link should not be visible, and when on the last page, the next link should not be visible.

The most important part of this is the numbering. The row of numbers should contain a maximum of 10 page links and when on pages 1-6, the page links should always start at 1. However, when on page 7 and onward, the page links should start at the current page minus 5. For example, when on page 7, the first number will be 2 and the last number will be 11.

Item Pagination

Item pagination eliminates the row of numbers and is best used for when the items of interest can be found on the first few pages. The difference here, is that the controls are always visible. When on the first page, the previous link is disabled instead of invisible, and the same is true for the next link when on the last page. This prevents distraction to the user that would occur when using search pagination.

The most familiar type of tabs are used for navigation. This is best utilized when there are 3 - 10 category titles that aren’t likely to change very often.

When using tabs, make sure that the selected tab is more prominent than the others. Unselected tabs should appear to be further back in space, to maintain the metaphor. Additionally, the selected tab should be connected to the surface area of the section that it’s highlighting. In other words, it should have the same color as its associated section, and should not be separated by a border.

Module Tabs

Module tabs are different from navigation tabs in that they don’t allow the user to navigation from one web page to another. Rather, they allow the user to browse through small panels of content, without refreshing the entire page.

Module tabs are great when you need to present a lot of information in a small amount of space. Let’s say you’re creating a web page for a new product, and you want to present several of its features. Each individual feature doesn’t really merit its own web page, but at the same time, you don’t want the page to get too long. A box with several panels and some tabs might be the perfect solution.

Resources

JavaScript Minification

Performance is often a top priority when delivering websites to our users. This means we want to minimize the time between requesting the page, and displaying the information they want.

In Episode 9, we looked at several ways of improving performance, including using external scripts and gzipping your data, today we are going to talk about minification, or making our scripts as small as possible, and still work.

There are several factors that affect how quickly scripts are loaded, but the biggest ones are download time, and parsing time. To minimize the download time for our scripts, we want to remove any characters that are not absolutely necessary for our script to run. This includes extra whitespace, and comments.

By doing this we also make it harder for others to read, which could be a benefit. We are going to look at just a few of the tools available to us for minifying our scripts

PACKER

One of the most popular solutions is Dean Edwards’ Packer. This is an online utility where you simply paste your code and click the button. It will return to you your code with extra whitespace and comments.

This does a pretty good job at cutting the size of your scripts, but there is an option called Base62 encode that will in most cases make your script sizes even smaller. You can see this option outputs some very obfuscated code. Be careful, for very small pieces of code, the overhead created by Base62 can actually make your script larger.

Packer can also shrink variables, by renaming the parameters and local variable of your functions that are not visible to the outside world and changing them to 1, 2, or 3 character variable names.

YUI Compressor

Yahoo!’s YUI Compressor has been the goto tool for command line minification. It produces sizes that are generally smaller than packer’s default settings, but larger than the packer with base62 encoding.

To use it, you must have Java installed on your computer. Then you can download the compressor, and place the [XXX].jar file in your scripts directory. Then open a terminal window and type

java -jar yuicompressor.jar -o min.js file1.js file2.js

This says you want to run a JavÓa program contained in the jar file yuicompressor.jar. You then can pass options then the files to compress. By default it will print the compressed code to the screen, but you can use the -o option to specify an output file. YUI is really nice because it can minify your CSS as well.

Google Closure Compiler

Recently Google has also released a minifier called Closure Compiler. It works a lot like YUI’s compressor. It is a java program that you download. You then call it like this

java -jar compiler.jar --js=file1.js --js=file2.js > min.js

You can pass it multiple —js arguments and they will be concatenated together. It will output to the screen, but you can route that into a file by using the greater than sign and the name of your outfile.

Closure will generally produce even smaller files than YUI, and it actually reads and understands your code so that it can make optimizations. For instance if you used the expression x = 123 + 456, it would replace it with x=579. It will even shortent to scientific notation if it makes sense.

To get the most out of minifiers, you want to avoid using eval statements, because when they are present, the compiler has to assume that any local variable could be used by name, so it can’t shorten them.

All of these tools create smaller file sizes which is great. Most times it will even reduce the parse time due to the engine not needing to parse extra space and comments.

Remember you should be gzipping and setting the cache headers on your files so they only need to be downloaded once. Doing that will have a bigger effect than any minification tool.

Resources