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.
POSTING BERKAITAN
0 komentar:
Post a Comment