Google Releases its JavaScript Closure Tools

Google ClosureNew JavaScript libraries and frameworks appear all the time, but it’s not every day that Google release the client-side code that powers Search, GMail, Google Maps, Google Docs, and more. The company has open-sourced their Closure Tools and they are now available to download from Google Code Labs.

Three systems are provided for eager client-side developers:

1. The Google Closure Compiler

“Compiler” is a confusing term — this is a Java-powered JavaScript optimizer that reduces file sizes by removing dead code, renaming variables, and removing whitespace and comments.

You can either:

  1. download the Closure Compiler, or
  2. use the online Closure Compiler tool.

In my brief tests, a 28Kb JavaScript file was reduced to 15Kb (46% reduction) using “Simple” compression to remove white-space and comments. The reduction factor was almost identical to Yahoo’s YUI Compressor.

“Advanced” compression with variable and function renaming reduced the file size to a little under 10Kb (64% reduction). The code continued to work correctly, although a couple JavaScript warnings were generated about uninitialized variables which were not evident in the uncompressed version.

The Closure Compiler is certainly worth trying if you want to speed up your web page’s download speeds. However, be careful to fully test the resulting JavaScript code.

2. The Google Closure Library

The Closure library is an alternative to jQuery or the YUI Library. The usual features are available, e.g. helper functions, Ajax, DOM manipulation, event handlers, CSS control, animation, effects, etc.

The code, comments, and documentation are generally good, although I could not find information about browser support. Some of the examples are a little basic but I suspect they will be improved over time.

Kevin Yank’s recent article features comments from Dmitry Baranovskiy who has expressed concerns about the quality of the code. They are valid criticisms and I doubt the Closure will win over many jQuery aficionados, but choice is always a good thing and the library is will improve now it’s in the public domain.

3. Google Closure Templates

Closure Templates is a templating system for client-side JavaScript and server-side Java. It’s a system that allows you to add small language-neutral components that create a full user interface.

Documentation is sparse and there are few examples. Server-side Java developers may adopt the system, but I’m not convinced it will appeal to ASP.NET or PHP developers.

Will you try Google’s Closure Tools? Or has the choice of tools become so bewildering you’ll stick with what you know?

See also: Google Closure: How not to write JavaScript

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Jasconius

    Their compiler is very good. It reduced my company’s JS core by about 47% beyond standard compression.

  • kira8080

    Lol…”closure”.
    .
    Is there a single JS developper on earth that has never searched once in her life for “javascript closure” in a search engine ? Well in the future, every single one of them doing so will be aware of the existence of this library. I guess that kind of trick was to be expected coming from Google XD

  • Mal Curtis

    @kira8080 except that currently Googling ‘javascript closure‘ returns this post before the Google Closure page. Even better a Google of ‘Google Closure‘ returns SitePoint first with our somewhat scathing post regarding some of the issues in Closure.

  • kira8080

    And how many backlinks do you think this article will have in a few months compared to the actual google closure page ? But oh well. It was just a not especially clever thought I had over a beer. I’m no SEO expert or anything….

  • http://www.lunadesign.org awasson

    Lol…”closure”.

    @Kira8080: It’s not JavaScript closure it’s “JavaScript closures”.

    As far as Google’s Closure tools go, It makes sense to me to try them out before passing judgment.