Playing with Google's Closure JS library

November 8, 2009 - by teebes -

On Thursday, Google open-sourced several of its JavaScript building blocks: a compiler, a library and template extension. They've been released together as the Closure toolkit.

I was particularly interested in its JavaScript library, specifically the graphics engine that implements the W3C's Scalable Vector Graphics as well as the event listeners. So I threw together a very small interactive app to play with the parts I'm curious about:

Use your up / down / right / left arrow keys to move the ball:

If you're reading this via rss, or if you want to see it in its own window, click here.

This does something similiar to what I do on Stark, my visual mud project [github page] that uses the Processing JS library and the HTML 5 <canvas> element, but instead of creating a draw function that is executed x amounts per seconds, you just call a draw function and assign it to a variable for future interactions. Here is the source code for this example (you can also just look at the current page's source):

<!DOCTYPE HTML>
<html>
<head>
    <title>Playing with Closure graphics & events</title>
    <style type='text/css'>* { margin: 0; padding: 0 }</style>
    
    <script src="/static/js/closure-library-read-only/closure/goog/base.js"></script>
    <script type="text/javascript">
    goog.require('goog.graphics');
    goog.require('goog.events');
    goog.require('goog.events.KeyCodes');
    goog.require('goog.events.KeyHandler');
    </script>
</head>

<body>
    Use your up / down / right / left arrows to move the ball
    
    <div id="shapes"></div>
  
    <script type="text/javascript">
    var graphics = goog.graphics.createGraphics(200, 150);

    // define the colors for the squares and the dot
    var square_fill = new goog.graphics.SolidFill('yellow');
    var square_stroke = new goog.graphics.Stroke(2, 'green');
    var dot_fill = new goog.graphics.SolidFill('blue');
    var dot_stroke = new goog.graphics.Stroke(1, 'black');

    // the dot's initial position
    var dot = {x: 1, y: 1};

    // properties    
    var size = 40;
    var margin = 5;
    var width = size - margin;
    var num_rows = 3;
    var num_cols = 4;

    // draw the squares
    for (var x = 0; x < num_cols; x++) {
        for (var y = 0; y < num_rows; y++) {
            graphics.drawRect(
                        margin + x * size,
                        margin + y * size,
                        width,
                        width,
                        square_stroke,
                        square_fill);
        }
    }

    // draw the dot
    dot['graphic'] = graphics.drawEllipse(
                                margin + dot['x'] * size + width / 2,
                                margin + dot['y'] * size + width / 2,
                                width / 4,
                                width / 4,
                                dot_stroke,
                                dot_fill);
    
    // call if the dot's position changes
    redraw_dot = function() {
        dot['graphic'].setCenter(
                            margin + dot['x'] * size + width / 2,
                            margin + dot['y'] * size + width / 2);
    }
    
    // key event handler
    var key_handler = new goog.events.KeyHandler(document);
    var key_event = function (e) {
        if (e.keyCode == goog.events.KeyCodes.UP && dot['y'] > 0) {
            dot['y'] -= 1;
        }
        else if (e.keyCode == goog.events.KeyCodes.RIGHT && dot['x'] <= num_cols - 2) {
            dot['x'] += 1;
        }
        else if (e.keyCode == goog.events.KeyCodes.DOWN && dot['y'] <= num_rows - 2) {
            dot['y'] += 1;
        }
        else if (e.keyCode == goog.events.KeyCodes.LEFT && dot['x'] > 0) {
            dot['x'] -= 1;
        }
        redraw_dot();
    }
    
    // put everything together
    goog.events.listen(key_handler, 'key', key_event);
    graphics.render(document.getElementById('shapes'));
  </script>

  <a style='margin-left: 20px;' href="http://teebes.com/blog/19/playing-with-googles-closure-js-library">what's this?</a>

</body>
</html>

11 comments - leave a comment

November 10, 2009 7:11 a.m. by Andrea

Nice roundup... At me this library smell a lot of Actionscript :)

November 10, 2009 11:13 a.m. by Nathan:

Wow, just like Dojo.

November 10, 2009 5:41 p.m. by Manolo:

JavaScript tools from a bunch of Java developers at Google who wished JavaScript was more like Java? No thanks, I'd rather have a nice cup of tea.

November 10, 2009 9:32 p.m. by Joe Grossberg

"Originality" is not high in my priority list when I pick a JS library for a project.

If they've taken ideas from other languages, libraries and frameworks, and improved on them -- that is a *good* thing.

November 10, 2009 9:35 p.m. by Gavin Doughtie:

@Manolo:

Hey! I'm a Javascript developer at Google and I definitely do NOT wish Javascript was more like Java :-)

Closure is full of beautiful, idiomatic Javascript, but more geared towards very large, multi-developer projects. Please give it a chance.

November 12, 2009 6:20 p.m. by Frank

@Manolo: I gets the same feeling about the include/require/whatever functions, I do not like them at all.
But I've got my own solution here:
src.js > Sprockets > GClosure > out.js

In English; this means that I use the sprockets buildsystem to just throw all my files together, very effectively ( takes just a few ms for very large amounts of js ) then i feed it throught closure compiler and strips away 80%~98% of the filesize.
@Gavin: Sorry, but the library feels clumsy; the compiler to for some degree.

November 16, 2009 4:35 a.m. by nwhite:

@Frank it only feels clumsy because this library has everything. This is a serious solution for serious developers. It requires a little more effort then your typical frameworks to use correctly but once resolved produces impressive results.

Dmitry creator of Raphael was bashing this example he said on ajaxian:

Result:
Google Closure Demo: JavaScript: 795 Kb, 57(!) http requests
Raphaël/jQuery Demo: JavaScript: 238 Kb, 2 http requests

When I used this with the build process and the closure compiler I got the following:

Google Closure Demo: Javascript 12kb, 1 http request

Which one is more impressive now?

May 10, 2010 9:17 a.m. by Shripad:

Does the graphics that you create render in SVG by default or does it detect browser version to place a CANVAS element instead? Can i instead use CANVAS as the default and expect cross-browser support too?

May 12, 2010 7:45 a.m. by Teebes:

Shripad,

As far as I know Closures is pure SVG. No Canvas involved. I was just saying that it does something similar to what Canvas can do. Wikipedia's Canvas page has good info on it vs SVG: http://en.wikipedia.org/wiki/Canvas_element#Canvas_vs_Scalable_Vector_Graphics_.28SVG.29

May 14, 2010 8:07 p.m. by Shripad:

Teebes,

Thanks for your reply. Going through the API i found this:

goog.graphics.CanvasGraphics
A Graphics implementation for drawing using canvas.

this:

goog.graphics.SvgGraphics
A Graphics implementation for drawing using SVG.

and this:

goog.graphics.VmlGraphics
A Graphics implementation for drawing using VML.

May 14, 2010 10:32 p.m. by Shripad:

Btw.. this graphic doesn't render at all on IE8. Tested with:

https://browserlab.adobe.com/index.html

How to fix that?