Thursday, November 5th, 2009

Google releases Closure, the tools behind the JS geniuses

Category: JavaScript, Library

<p>I remember when the whole Ajax thing kicked in and JavaScript developers looked at Gmail, Gmaps, and the like and thought “I wonder what powers that?”

Well, the power comes from Closure a library and set of tools that the great JS hackers built over time as they created the applications at scale.

As soon as I joined Google I wanted to check out this code, and talked to a bunch of folks who were interested in open sourcing it. Well, these things take time, but now we are fortunate enough to have everything out there (interestingly, a lot of the code was open due to it being used in Google Doc).

What are the pieces?

A JavaScript optimizer

The Closure Compiler compiles JavaScript into
compact, high-performance code. The compiler removes dead code and
rewrites and minimizes what’s left so that it downloads and runs
quickly. It also also checks syntax, variable references, and
types, and warns about common JavaScript pitfalls. These checks and
optimizations help you write apps that are less buggy and easier to
maintain. You can use the compiler with Closure Inspector, a Firebug
extension that makes debugging the obfuscated code almost as easy as
debugging the human-readable source.

A comprehensive JavaScript
library

The Closure Library is a broad,
well-tested, modular, and cross-browser JavaScript library. You
can pull just what you need from a large set of reusable UI
widgets and controls, and from lower-level utilities for
DOM manipulation, server communication, animation, data structures, unit
testing, rich-text editing, and more.

The Closure Library is server-agnostic, and is intended for use
with the Closure Compiler.

An easy templating system for both Java & JavaScript

Closure Templates simplify the task of
dynamically generating HTML. They have a simple syntax that is
natural for programmers. In contrast to traditional templating
systems, in which you use one big template per page, you can
think of Closure Templates as small components that you compose to
form your user interface.

Closure Templates are implemented for both JavaScript and Java, so
that you can use the same templates on both the server and client
side. For the client side, Closure Templates are precompiled into
efficient JavaScript.

Check it out. It is a little like an inside out Dojo in some ways. There are years of lessons hidden in this code too (especially around good practices for scalable code, cross browser issues, and perf).

Congrats to the people that made this happen. What do you think of Closure?

Update

Erik has posted on the history of Closure and also talks about the future a bit:

I hope we can see more code being shared among the different open source JS libraries out there. We would love to be able to goog.require some Dojo code (especially their data model code) and I’m sure they would love to be able to dojo.require our data structures and i18n code.

Related Content:

Posted by Dion Almaer at 3:08 pm
16 Comments

++---
2.7 rating from 119 votes

16 Comments »

Comments feed TrackBack URI

I’m sure it’s great, but like Prototype, it’s a terrible name because it is easily confused with a core JS concept. Be on the lookout for my new frameworks: If, Var, While, Function, String, Object, and Curry!

Comment by smith — November 5, 2009

Congrats to the Closure team. It’s an incredibly impressive body of work.

Comment by slightlyoff — November 5, 2009

I like the templates engine (using the same template for js and java is exactly one of my use cases) but I was a little disappointed after experimenting with gxp. I think I will keep it in my TODO list for a while.

Comment by icoloma — November 5, 2009

Mootools compiled to: 52.23KB (17.77KB gzipped) compared to yui: 65.32KB (20.44KB gzipped)

Btw, haven’t tried using this version yet :)

Comment by aw2xcd — November 5, 2009

Wow, I was just considering different options to templatize my components. I’ll definitely check this out, and If it performs well, I’ll be really tempted to rewrite my app using closure….
I wonder if this will become the official gwt template system and how this will relate with gwt in general.

Comment by paulbo99 — November 5, 2009

I wonder if you do have some internal Google Plugin for Eclipse extensions to support development with Closure and if there’s a hope that it’ll be released at some point? Other than that – I just can’t wait to dig into it!

Comment by ffreak — November 5, 2009

Compiler (and various other JS optimizers) are cool, but at the same time when you view-source on optimized pages, you can’t learn anything from the code.

Comment by cancelbubble — November 6, 2009

@cancelbubble: Take a look at Closure Inspector: http://code.google.com/closure/compiler/docs/inspector.html

Comment by ibolmo — November 6, 2009

@ibolmo: Closure Inspector does not solve what cancelbubble is saying. You need to have your real source code at hand to be able to map your obfuscated code with the real one.

You already couldn’t read most of the JavaScript found at Google’s websites thanks to GWT optimizations etc. Now it will only get worse with other people doing this.

Comment by tayfun — November 6, 2009

@cancelbubble & @tayfun: I said this over on Reddit in that at the end of the day we’re trying to better serve our users. For the majority of us, that means decreasing the payload of our markup, stylesheets, and scripts. This is especially important these days as our scripts are no longer the kind of scripts we had 10 years ago when they consisted of a few functions.

Comment by bentruyman — November 6, 2009

Does the Closure compiler include the same features mentioned in this article: http://timepedia.blogspot.com/2009/08/on-reducing-size-of-compressed.html ?? If so, that would be sooo cool.

Comment by tercero12 — November 6, 2009

I think the answer is no. Reading: http://code.google.com/closure/compiler/docs/api-tutorial3.html makes no mention of gzip compression. Actually the advanced compilation thing looks really scary to me. Look at externs…if you were to produce code like this, it could not be used in uncompiled form because the extern would stomp on the legit code. Simple compilation for me.

Comment by tercero12 — November 6, 2009

This looks interesting. I’m going to have to check it out. I especially like the number of ui widgets that the Library has to offer.

Comment by lesgreen — November 6, 2009

@bentruyman: True, making javascript suck less for the end user is the basic premise here. But, we had to wait all these time to see what an influential company like Google uses at the core of their products. You simply couldn’t understand obfuscated JS code that is linked. Doesn’t that mean anything?

These tools are certainly great, but they are hindering the easiness of learning from quality code.

Comment by tayfun — November 7, 2009

I wouldn’t call the people behind Closure Javascript geniuses. Just reading the source will tell anyone that there’s a lot of bad practices going on. I’m disappointed that Google is throwing this out there in its current state, either they are clueless or they expect us to improve things for them. All this tells me is that Google should be looking for some real coders.

Comment by Jadet — November 9, 2009

I wouldn’t call people behind Closure even JavaScript developers. Read this and rethink your “Wow!”: http://tr.im/closurefail

Comment by DmitryBaranovskiy — November 10, 2009

Leave a comment

You must be logged in to post a comment.