After Google Introduced Closure Library I wanted to get a closer look on it. here's what I've come to.
Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. Web developers can pull just what they need from a wide set of reusable UI widgets and controls, as well as lower-level utilities for the DOM, server communication, animation, data structures, unit testing, rich-text editing, and much, much more.
First, Download It?
You only need to download it if you gonna really build something with it now.
If you just want to see how it is organized. go to Simple view or Browse Source.
Library code are currently offered through a SVN(version control). to download it: you need a SVN client. or easier get a SVN Desktop-integrated client. then use those instructions.
Another method, You can use a Web Spider like FDM to download files starting from there. (Didn't try it but should work!)
You'll be downloading ~126MB! Which contains Code & Docs & Demos. The code only is ~7.6MB.
No worry.. as in any language. you don't use the whole library in your application.
Introduction
The different parts of the library share a set of conventions -inspired from JAVA- to make Closure Library serves as a "standard JavaScript library" for creating large, complex web applications. These conventions are:
- Namespaces:
goog is the root of the Closure Library namespace. below of it you can see namespace like goog.math which is defined in the folder closure\goog\math - Dependency Management:
Some namespaces depends on others. So, When you require goog.math namespace using goog.require(). It will then require goog.array too.
These dependencies rules are stored in goog\deps.js. which is required automatically when you include the base file goog\base.js
Hello World! [Demo Pack]
To run this simple demo you still don't need to download the library..
1- Create 'hello.js' with this code.
goog.require('goog.dom');
function sayHi() {
var newDiv = goog.dom.createDom('h1', {'style': 'background-color:#EEE'}, 'Hello world!');
goog.dom.appendChild(document.body, newDiv);
}
2- Create 'hello.html' with this code
<html>
<head>
<script type="text/javascript" src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script src="hello.js"></script>
</head>
<body onload="sayHi()">
</body>
</html>Note that: I'm directly including the base.js from its SVN location just for the sack of this demo!
And running this on Firefox with FireBug, and checking the Net tab. we can see that :
Mmm, down & loaded 11 files including the base file; of total 352KB in 9.23s.
All these HTTP requests for that simple demo?! Wait, You will not do that for a real application. you will need to assemble these JS files first in one file. then shrink it by Closure compiler.
Assembling [Demo Pack]
Now, you are talking about doing a real application and ready to launch it. You should assemble(bundle) all these JS files into one. So, you need to download the library. and use the included python script to do the assembling for us. you need to download Python Runtime first, then:
1- After downloading, you have a 'closure' folder that contains 2 folders 'bin' and 'goog'
2- place the hello.js beside 'Closure' and run this command there
"closure/bin/calcdeps.py" -i hello.js \ -p closure/ -o script > hello-calc.js
And you should get a new file hello-clac.js that is 228KB!
3- Bug: until yesterday the python script didn't include the base.js in the assembled file. so make sure you get a new copy of calcdeps.py.
4- Now create another HTML file 'Hello2.htm':
<html>
<head>
<script type="text/javascript" src="hello-calc.js"></script>
</head>
<body onload="sayHi()">
</body>
</html>
getting better ? now, We need to compile that hello-calc.js to shrink it.
Compiling [Demo Pack]
After assembling, We need to shrink the file size!
Have you just installed Python, Now time to install Java runtime too, No kidding :)
1- After JRE (Java runtime) is setup, download Closure Compiler compiler.jar.
2- Place the compile.jar next to hello-calc.js and run this command there:
java -jar compiler.jar --js hello-calc.js --js_output_file hello-compiled.js
It will show some warnings but no errors! and you will get hello-compiled.js which is 48KB, Awesome!
That command is not what instructed in [Using the Dependency Calculation Script] as it didn't work for me. I used command from [Getting Started with the Closure Compiler Application]!
3- Now create a third HTML file 'Hello3.htm':
<html>
<head>
<script type="text/javascript" src="hello-compiled.js"></script>
</head>
<body onload="sayHi()">
</body>
</html>
Comments
Have I helped you to get a good impression on Google Closure? :)
You might say jQuery or Closure? well, that will never be the question! the question should be what the scale of your App! and here is a better answer from the Closure FAQ:
Many JavaScript libraries emphasize the ability to easily add JavaScript effects and features with minimal development time. Google engineers use these third-party tools for precisely the reason that the libraries are powerful for rapid development.Still, jQuery 1.4 can learn some stuff from Google Closure. as John Resig just said
The Closure Library is designed for use in very large JavaScript applications. It has a rich API and provides tools for working with the browser at a lower level. It's not well suited for all tasks, but we think it provides a useful option for web developers.
I wish that Google Closure was under the MIT license, can't really borrow code from it for jQuery, otherwise.Obviously, Closure is ignoring the famous Document Ready Event of jQuery, why? Erik Arvidsson says:
The short story is that we don't want to wait for DOMContentReady (or worse the load event) since it leads to bad user experience. The UI is not responsive until all the DOM has been loaded from the network. So the preferred way is to use inline scripts as soon as possible.
Web developer, jQuery plugin author, social media fan and Technology Blogger.
I really don't see the big deal with it, after having gone through the APIs. Why bother with this when there's JQuery with such a big community?
@Anonymous,
Unlike jQuery, Closure Library is designed for use in very large JavaScript applications!
i find closure just great, but it just came out a little bit late... ext-js or jquery-ui are out already for long (despite closure is definitevely more robust and mature than any of those, IHMO), so most people have already chosen their library for very large js apps (as we chose jquery-ui) and this is now mostly not to change in the short (or even mid) term :(
@Michael,
Sure, we tend to use libraries that we become comfortable with.
But, it is nice to try something new from time to another..
We shall wait and see how the community will use Google Closure!
I think Closure is mainly designed to be generated by tools like GWT.. so you are right about Closure is for large JS apps.
Very cool. Thanks for the insight! Having such a diverse range of technology to use in varying implementations keeps my job interesting.
I do love jQuery, but now that I've developed some bigger intranet projects, I look back and wish I had knowledge of Google Closure or some of the others Dojo, ExtJS, etc..
Hi.
I've down a rundown of networking with closure, thought you may be interested: http://caprazzi.net/posts/learning-closure-ajax-with-goog-net/
@Lukus,
You welcome, thanks for your feedback
@Matteo,
Looks interesting.. reading it now
Hi!
I've published that Shadowbox w/ Google Closure tutorial now if you want to have a look?
http://googleclosuretutorials.wordpress.com/
Source zip is there... Next up is a Slideshow
@Dan,
That was a nice one.. thanks for sharing and the linkback :)
Mike,
I want to accomplish something using JQuery or Standard JavaScript. As you know Blogger has automated post summaries now. I have observed that Blogger creates Named Anchor name='more' on Article page right in place of the comment where we insert -- more --
I want to dynamically insert adsense ad there instead of post header beneath the Title.
I tried my hands on it but later simply gave up and Now requesting you if it is feasible let us know in your next post :) !
@Rakesh,
Looks like something to be done in blog template! for better help email me..
With advanced optimizations enabled, that compiled demo is just 4 KB!
I'm tryed to see the convention of use Closure (I'm basically an intranet developer) but I can't found it. I'm using jQuery since 2007 and I love it, when I tried Closure I treat to be impartial but I can't found Closure more useful -and practically- than others JS libraries.
@Oscar,
jQuery was made to help you write cross-browser JavaScript code quickly, and I love it too :)
But, Google Closure is designed for large scale Apps. Google claims that Gmail and Google Docs is built with it.
So, it is a matter of App Scale!
If you are developing a large or growing application, you may benefit from the Closure Library's breadth. A well-tested library can insulate you from cross-browser compatibility issues and the minutiae of client-side programming, letting you focus on the fun stuff.