Getting Started with the Google Closure Library

Let’s start using the google closure library shall we? First we need to install it…

First, install the closure library:

First lets install the closure library, this will allow us to use some of the tools the library includes. This method uses svn to install to whichever directory you call it from. If you don’t have SVN and you’re using a mac go here and install it. Once you have it installed, navigate to the directory of your choosing and checkout the latest closure library from google:

cd ~/Desktop
svn checkout http://closure-library.googlecode.com/svn/trunk/ closure-library

This will install the closure library on your Desktop, or choose a more specific directory and call svn from there.

Create a file on your desktop named hello.js:

// calls google dom script
goog.require('goog.dom');

// runs after the page load
function sayHi() {
  var newHeader = goog.dom.createDom('h1', {'style': 'background-color:#EEE'},
    'Hello world!');
  goog.dom.appendChild(document.body, newHeader);
}

Now create the html file which will call the closure library and the rest is history:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="closure-library/closure/goog/base.js"></script>
        <script src="hello.js"></script>
    </head>
    <body onload="sayHi()">
        <div id="wrap">
            
        </div>
    </body>
</html>

This calls in a script called base.js, which sets the google closure library up to calculate some dependencies and load in the right javascript files. If you load the page in a browser and inspect the file you will see that base.js has calculated some dependencies and included more scripts to make your “sayHi()” function possible. However, that’s one hell of a lot of GET requests for such a simple site. Let’s compile this.

Luckily, the closure library does this as well. The process is simple:

Write your scripts, include base.js and test until you’re ready to compile your javascript.
When you’re ready, download the closure-compiler .jar file and place it in a directory labeled “closure-compiler” next to the “closure-library” directory.
Then execute a simple command in your terminal (I’m on a mac) and let the closure library do the work for you!

Once we have downloaded the closure-compiler .jar file, let’s place it in a directory named “closure-compiler” next to our “closure-library” on our Desktop.

Let’s run the command:

closure-library/closure/bin/calcdeps.py -i hello.js 
  -p closure-library -o compiled 
  -c closure-compiler/compiler.jar > hello-compiled.js

You should get a return file named “hello-compiled.js” and if you look inside all the javascript you need has been reduced to compiled javascript.

Next let’s change out html file to include this compiled version:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="hello-compiled_v3.js"></script>
    </head>
    <body onload="sayHi()">
        <div id="wrap">
            
        </div>
    </body>
</html>

That’s it! All the commands we’re issued from ~/Desktop in terminal on a Mac. “hello.js” and “hello.html” were both saved to the desktop as well as the two directories “closure-library” and “closure-compiler”.

First, install the closure library:

Leave a Reply