What does Google Closure Library offer over jQuery?

Question

Considering

• business background
• community support
• available extensions
• default set of features
• simplicity of use
• and reliability

why do you prefer one over the another?

Solution 1

I'll try to add my piece of information.

More than another JS lib

As I understand it, Google Closure is not only another JS library, but it is also a set of tools that will allow you to optimize your JS code. Working with jQuery gives you good tools and a lightweight library, but it does not minify your own code. The Closure compiler will. The closure inspector may also be useful, as sometimes minified code has a different behavior than the original one, and is a pain to debug. It integrates with Firebug and support unit tests, which are both developers' best friends nowadays.

Documentation

I guess that as any new library VS a well established one, it will lack the availability of tons of extensions and tutorial that jQuery has. However, being pushed by Google should ensure that support and reliability will be both pretty good. The current documentation and tutorial both seem really good, too.

Features

The features of Closure look decent, though, and its modular architecture is promising, too. I guess Google has been using it internally for a long time, which means that you could expect all basic features (and more) to be implemented, and probably in a very optimized and scalable way. They are trying to present it as the STL of JavaScript, so they should have polished it.

After looking at the features more closely, it seems that this may be a step forward for web-applications development compared to existing libraries as jQuery. It guess it benefits internal developments at Google, but things like detecting the online state (see goog.events.OnlineHandler), easy integration of AJAX requests and JS actions in the browser history (see goog.History), or the legions of great widgets they provide (see goog.ui package) may help all of us building even more awesome webapps ;) !

It comes with templates features that integrates with Java (who said GWT ?), so this may also be another plus for Closure.

Ease of use

Finally, it looks pretty simple to use. The syntax may be a bit more verbose than the short $ jQuery function, but with IDEs and auto-completion, it's not a real problem. Moreover, I'd say we can expect a good integration in IDEs like Eclipse, coming from Google.

EDIT: as requested, let me say a few words about the GWT reference. Google Web Toolkit is a Java library that allows to create AJAX-enabled web interfaces and that generates (and optimizes) the required JavaScript code. As Google Closure allows to create Templates that can be used both client- and server-side (using JavaScript and Java), my guess is that it will soon be possible to use them jointly (if it's not already the case).

Solution 2

In my brief look at the API I find the differences between jQuery and Closure to be striking.

jQuery is basically just a simplified way to do many frequent operations in a cross-browser way.

Closure is a framework that is very new, in that they provide a cross-browser way to use the <canvas> tag, for example, and they have added new events.

So, this is adding onto what we typically do with javascript, they are taking many operations that people want to do and putting them into the API.

For example, they have an event to tell if the online state has changed. So you can tell if the system is online.

They have javascript functions that use tools such as Google Gears, which continues with the fact that they have extended what can be done with Javascript.

It will take me a couple of days to digest all the changes, but I can see that this could have a big impact on web applications that can be developed.

Solution 3

The biggest advantage of Closure Library is that is is designed for Closure Compiler. This opens completely new possibilities for JavaScript development...

The compiler has several cool features:

• It compiles readable JavaScript into compressed machine-readable JavaScript - it has the best compression ratio in "ADVANCED" mode.
• Documentation of the code with JSDoc Tags is important: the compiler reads it and you get warnings during compilation for typos in documentation, wrong use of a @constructor, wrong type of a variable, misuse of a field annotated with @private and @protected, etc.
• If you write a reusable JavaScript library, such as OpenLayers or Google Maps, you formally export your public API - and the compiler optimizes your internal code.
• The end applications can be compiled together with the library - and then the unused parts of the library are removed from the produced code. Dependencies are solved automatically by the compiler.
• Compiler accepts constants to remove unwanted functionality - this allows compilation only for particular browser such as Mobile WebKit, for only one of Quirks mode or Strict mode, compilation without support of IE6, etc.
• Debugging with FireBug is possible even for the compiled version of the source code.
• Compiler supports generation of dynamically loadable modules, which can significantly speed up loading of the end application, because the code for advanced functionality can be loaded only when it is required.

For details have a look at: http://blog.klokantech.com/2010/12/closure-compiler-for-openlayers-3x.html

Solution 4

Edit: take a look at this youtube video it may answer some questions about Google Closure better.

Probably the best sources of information on google closure are project discussion group, wiki, doc pages, demos and a yet unfinished book by Michael Bolin that is now available from safari books site.

one thing I can tell right away - there is a steeper learning curve for closure vs jQuery but it may be well worth it due to the library's vastness, clear organization and the benefit of using it together with the compiler and the templating tool.

closure library in that respect is more like dojo than jQuery, and some concepts were borrowed from dojo, according to Michael Bolin.

google closure compiler uses JSDoc documentation system which simultaneously (if created by the programmer correctly) provides documentation and enables catching many errors at compile time.

while function names are more verbose than jQuery's, the compiler shrinks the code (using various optimization tactics) and the type checking will save a considerable time debugging the code, so time typing in the longer names is probably not an issue. At the same time longer names add readability.

library supports browsers running in the quirks mode so that scripts could be embedded by other sites using "quirky" html

library works with (but does not depend upon) a javascript templating system called soy that simplifies filling documents with content.

like jQuery google closure allows traversing dom structure with the string-based queries using a dedicated component of the library.

closure library relies on dot-delimited namespaces more like Java - a very strong organizational feature.

using such namespaces will incur overhead in uncompiled code, but in the compiled code those things are replace with short variable names.

Solution 5

I just posted a pretty exhaustive article about Google Closure which answer this question on insideRIA.

...Closure rulez! ^_^

View more solutions

Comments

[user194743]

Some syntax comparisons here: derekslager.com/blog/posts/2010/06/…

[Dan Abramov]

This article may also help with the decision. Key lesson: “Closure is an ecosystem. It is not like jQuery where you just use it here and there to make accessing or manipulating the DOM easier. If you want to truly use Closure, you have to make a commitment to truly use it.”

[Wookai]

That is not exactly true. Google Closures also comes with its own library that is similar to jQuery and that provides functions and utilities to write your own code : code.google.com/closure/library/docs/tutorial.html

[Tereno]

Ah ok! Thanks for correcting me!

[pestaa]

Detailed and meaningful answer, thank you. Could you please explain what that reference to GWT means? I'm afraid I didn't get that.

[Jourkey]

jqueryui.com is the official ui widgets collection

[Solomon Duskis]

yeah well, judging from the site it has 6 widgets: Accordion Datepicker Dialog Progressbar Slider Tabs

[Nosredna]

I've used jQueryUI and I thought it was very weak. It hardly even seems to be in development. When was the last time a new widget was added. It may be the official widgets collection, but anyone looking for a widget to use with jQuery is better off just googling for third-party jQuery widgets.

[Andomar]

+1 For trying to be helpful :)

[Frank Krueger]

I think you should also mention the template library (Soy) in your "More than" section. The same template file can be used in both server (Java) side and client side. Really nice implementation IMO. Means we can just send down JSON in AJAX queries rather than sending down HTML - saves bandwidth.

[Jace Rhea]

jQueryUI isn't just a set of javascript widgets, it has a great css framework as well. Its been a great tool for me in styling CRUD/admin pages. Plus many of those Closure "Widgets" are 1-2 liners in jQuery, not even worth writing a plugin for.

[nalply]

I just discovered a critique against Closure, but perhaps it's just FUD: sitepoint.com/blogs/2009/11/12/…

[Peter S Magnusson]

The critique isn't FUD, and thanks for the link. The critique is focused on how the javascript code isn't optimal everywhere. This may be valid, but it misses the larger point. As I understand it, Closure targets really complex JS applications (on the scale of GMail), and that has some consequences - such as not every line being optimal since everything isn't written by a single brilliant coder. But conversely it might scale further as a software engineering framework.

[Erik Reppen]

The appeal of JQuery is not pre-made widgets. It's making your own custom widgets in record time. I rarely touch the plug-ins, including UI.

[Alex]

Nice to-the-point comparison to jQuery: "[...] jQuery work really well and make possible great things with no effort and fast, so the "promise" of Closure is not to offer better algorithms but rather a really better, organized and maintainable way of deploying JavaScript applications [...] Coding in Closure means thinking with object oriented principles in mind, create several js files, each representing a single class, organize the application architecture into packages and finally deploying it using the tools provided, obtaining a single, compressed, and safe JavaScript file [...]"

[IsmailS]

I was looking for something else and ended up here, but good to know like jQuery google closure allows traversing dom structure with the string-based queries using a dedicated component of the library. Can you please link me to some documentation related to it?

[yazz.com]

I'd like to learn more about the Java version of Closure. Do you have a link for this. Thanks

[Ant]

@nalpy As suggested by the comments, this article didn;t mention that thelibrary gots a COMPILER (not a minifier) which might optimize these coding issues.

[exhuma]

@iSid: I believe he talks about goog.dom.DomHelper, but I personally don't see a query function equivalent to jQuery. @Evgeny: Can you give us more details?

[bkirkbri]

@iSid: That functionality is provided by goog.dom.query, which is not documented as well as the rest of the goog.dom namespace.