What is Closure Tools

Written for Large Applications

• Well organized
• Stable - no versioning
• Well tested - robust
• Backwards compatible
• Driven by Google for their products

Some complaints

• Code is too long... autocomplete, or several coffeescript projects
• Too large to learn... Namespacing makes it easier
• No community... Discussion boards and a meetup
• Looks more like java than javascript... Java has been building large applications for longer
• Code in the library doesn't use well known performance hacks... We shouldn't need to write in hacks, let the compiler do it for us
• Requires a build step...

Build Tools

• Plovr - Java based server already includes the tools
• Maven - just google for Closure Tools and Maven
• Yeoman generator
• Grunt - lots of plugins!
• See Closure Please for a big list

Closure Compiler

Closure Compiler

Advanced Optimizations

• Aggressive renaming
• Dead code removal
• Function inlining
• sourcemaps

What does this mean?

• More code - less bytes
• We can be verbose - the code won't be
• We can use longer name(space)s
• Unused code is removed
• Code will run faster

Closure Compiler

Static Analysis - type cheking

Coming soon - JSWhiz: Static Analysis for memory managment

It's awesome!

Prove it!

What's the catch

What's the catch?

• foo['bar'] !== foo.bar
• {foo: 'bar'} becomes {a: 'bar'}
• but {'foo': 'bar'} stays {'foo': 'bar'}

What's the catch?

var Class = function() {};
Class.number = 1;

• must provide Class.number to use externally (enums)

goog.provide('Class.Number')
/** @enum {number} */
Class.Number = {
    ONE: 1,
    TWO: 2
};

• provide access through prototype
• put under another namespace

What about using libraries that aren't compatible...

• externs
• some extern files
• Closure Library

Closure Library

Closure Library

• Namespaced & Functional
• Classical inheritance
• Type annotations
• Dependency management
• goog.ui.Component

Namespaced & Functional

• Namespaced to separate code
• Namespacing makes it easier to find functionality (not all on the $ object)
• Functional makes it easier to override functionality

Classical inheritance

goog.provide('Class');
goog.require('Super');
/**
 * @constructor
 * @extends {Super}
 */
Class = function() {
    goog.base(this);
};
goog.inherits(Class, Super);

/**
 * @inheritDoc
 */
Class.prototype.method = function(arg) {
    return goog.base(this, 'method', arg);
};

Classical inheritance

• Code organization
• Easy override functions
• Well understood
• Performance!

Type annotations

• Annotating
• Optional... mostly
• Don't need to be explicit

/**
 * don't have to do this:
 * @param {{a: string, b: number}} param1
 * this will do to begin with:
 * @param {Object} param2
 */

Dependency management

goog.provide('my.name.space');
goog.require('other.name.space');

uncompiled

compiled

goog.ui.component

goog.ui.component

• What we build our application out of
• javascript as it's added - no more waiting for $(document).ready
• Control those zombie references (extends disposable & eventTarget)
• this.getHandler().listen instead of goog.events.listen
• Create a heirarchy
• Can render new HTML and/or Decorate existing DOM structure
• more on the lifecycle or read the book

goog.ui.component

Sounds great, but we use jQuery

$('.class').children().addClass('classChilren');
            

Closure Library...

• Namespacing great for discoverability
• Functional instead of OO

goog.array.forEach(
    goog.dom.getChildren(goog.dom.getElementByClass('class')),
        function(child) {
            goog.dom.classes.add(child, 'classChildren');
        });
            

Learn a new library?

$('.class').children().addClass('classChilren');
            

Using the G

goog.require('G');

• Just like jQuery - almost
• use $$.method instead of $.method
• $$.setSelectorEngine(engine) for better selector support
• goog.dom.query
• Sizzle
• Qwery
• Even some (simple) jQuery plugins may work - just add to $$.fn

Closure Templates

Closure Templates

• Compiled
• Extensible functions
• Client and Server-side
• Translatable strings

Closure Templates

/**
 * Greets a person using "Hello" by default.
 * @param name The name of the person.
 */
{template .helloName}
    {msg desc="hello string"}Hello {$name}!{/msg}
{/template}

/**
 * Greets a person and optionally a list of other people.
 * @param additionalNames The additional names to greet. May be an empty list.
 */
{template .helloNames}
  // Greet the people.
  {foreach $additionalName in $additionalNames}
    {call .helloName}
      {param name: $additionalName /}
    {/call}
    {if not isLast($additionalName)}
      <br>  // break after every line except the last
    {/if}
  {ifempty}
    {msg desc="shown when done greeting"}No people to greet.{/msg}
  {/foreach}
{/template}

Closure Linter

Closure Linter

• lints for the Google Javascript Style Guide
• Strict mode for contributing to Closure Library
• Style fixer

Linting

...
Found 17 errors, including 1 new errors, in 7 files (0 files OK).

... The script can be run by executing: fixjsstyle -r js

...
Found 8 errors, including 0 new errors, in 5 files (2 files OK).

Closure Stylesheets

Closure Stylesheets

@def WHITE #FFF

width: add(LEFT, RIGHT);

@defmixin size(h, w) {
    height: h;
    width: w;
}
@mixin size(100px, 100px);

@if (BROWSER_IE){}

Class minification

• Use Closure Stylesheets (coming soon in plovr)
• goog.getCssName() around class names in the code
• {css className} in templates
• done!

What's next?

• Join the Meetup
• Discuss on the boards
• Read the documentation (use file index)
• Closure from jQuery slides

Closure Please

• Leak Finder - find memory leaks
• Module Server
• este - development framework
• Closure IDE

Buy this book!