JavaScript Primer

HTML5 and JavaScriptPart Deux

Thursday, July 5, 12

Daniel Cousineau@dcousineau


History


MochaLiveScript

JavaScript

Brendan EichCTO, Mozilla Corp.

April 1995


JavaScriptECMAScript

ActionScript

JScript


Basics


Data Types•number

• string

•boolean

•object

•null

•NaN

•undefined


Strings

•Are Objects, have methods


"Foo" + "Bar"; //"FooBar"

var str = "Lorem Ipsum Dolor Sit Amet";

str.toLowerCase(); //"lorem ipsum dolor sit amet"str.toUpperCase(); //"LOREM IPSUM DOLOR SIT AMET"str.split(" "); //["Lorem", "Ispum", "Dolor", "Sit", "Amet"]str.substring(6,9); //"Ips"

new String("Lorem Ipsum Dolor Sit Amet") == str; //true

Strings


parseInt("56"); //56parseInt("42.567"); //42parseInt("asdf"); //NaNparseInt("5a6"); //5parseFloat("24.68"); //24.68parseFloat("asdf"); //NaNparseFloat("24a"); //24

String to Number


Objects

• “Dictionary” / “Associative Array”

•Key: Value or 'Key': Value

•Without ': A-Z0-9 only

•Does not keep intrinsic ordering

•Accessed keys using . (dot) or [] notation


var object = { foo: 'value', 'complex key': 0, bar: { nested: true }};

object.foo; //'value'object.['complex key']; //0object.bar.nested; //trueobject.bar['nested']; //trueobject['bar'].nested; //trueobject['bar']['nested']; //true

Objects


in or hasOwnProperty()

•Tough call:

•.hasOwnProperty() more consistent

•in checks inherited properties

•Used in for loop


var test = { foo: 'value', bar: 'value', baz: 'value'}

for (var key in test) { console.log(key + ": " + test[key]);}

//PRINTS://foo: value//bar: value//baz: value

in


Arrays

•Special object

•Numerical keys only

•Keeps intrinsic ordering

•Short ([]) and Long (new Array()) syntax


var arrayShort = [ 'one', 'two'];arrayShort[2] = 'three';

var arrayLong = new Array();arrayLong[0] = 'one';arrayLong[1] = 'two';arrayLong[2] = 'three';

//arrayShort: ["one", "two", "three"]//arrayLong: ["one", "two", "three"]

Arrays


var arr = [1,2,3,4,6];

arr.indexOf(2); //1arr.join(':'); //"1:2:3:4:6"arr.pop(); //6 //[1,2,3,4]arr.push(7); //5 //[1,2,3,4,7]arr.reverse(); //[7,4,3,2,1]arr.shift(); //1//[2,3,4,7]arr.unshift(8); //5//[8,2,3,4,7]arr.slice(1); //[2,3,4,7]arr.slice(1,3); //[2,3]arr.slice(-3); //[3,4,7]arr.slice(-3,-1); //[3,4]

Arrays


var arr1 = [1,2,3];var arr2 = [3,4,5];

arr1.concat(arr2); //[1,2,3,3,4,5]

Arrays


delete

•Removes element from an object

• “Removes element from an array”

•Not really, just sets it to undefined


Functions

•Are Objects as well

• “Elevated”

•You can use a named function before it is defined in code

•Function definitions are elevated to the top


function Foo() { //...}

Foo(); //validBar(); //valid

function Bar() { //...}

Functions


function Foo() { }

Foo.bar = "value";

'bar' in Foo; //trueFoo.bar == "value"; //true

Functions


Function Arguments

•No way to assign default arguments

•But arguments are not required

• If an argument is not specified, it is set to undefined


arguments

•A special variable found inside a function

•A not-quite array object containing all the function arguments


function sum() { var x = 0; for (var i = 0; i < arguments.length; ++i) { x += arguments[i]; } return x;}sum(1, 2, 3); //6

arguments


typeof

•Determines a variables type

•Returns a string


typeof true; //"boolean"typeof 12; //"number"typeof "string"; //"string"typeof []; //"object"typeof {}; //"object"typeof NaN; //"number"typeof null; //"object"typeof undefined; //"undefined"

function Foo() {}typeof Foo; //"function"

typeof


Comparison

•a == b / a != b

•A and B compared by value alone

•1 == “1” evaluates to true

•a === b / a !== b

•A and B compared by value and by type

•1 === “1” evaluates to false


window, document•Built in, global, Objects

•window

•Provides access to the browser window

•The “global” object: foo === window.foo

•Things like window.location.href, etc

•document

•Provides access to the current DOMThursday, July 5, 12

Closures


Closures

•First-Class

•Can assign functions to variables, pass as arguments and return as values

•Anonymous

•Not required to have a name

•A function that “closes over” variables defined outside itself


function Foo() { var count = 0; return function() { count = count + 1; return count; };}

var bar = Foo();

bar(); //1bar(); //2bar(); //3

Closures


function createAdder(amount) { return function(input) { return input + amount; };}

var add2 = createAdder(2);

add2(2); //4add2(8); //10

var add3 = createAdder(3);

add3(3); //6add3(7); //10

Closures


(function(exports, undefined){ //ALL your code here var localVar = "bar" globalVar = "baz"; exports.foo = "bat";})(window);

alert(localVar); //erroralert(globalVar); //"baz"alert(window.globalVar); //"baz"alert(foo); //"bat"alert(window.foo); //"bat"

Module Pattern

BEWARE: export (singular) is a reserved word in SafariThursday, July 5, 12

Scoping


Global & Local

•Functions are the only way to create new scopes

•Variables defined with var are local

•Variables defined without var are global

•Global variables are members of window


var outerScope = 10;var outerScope2 = 10;

function Foo() { var outerScope = 20; var innerScope = 20; globalVariable = 30; outerScope2 = 40;}

Foo();

alert(outerScope); //10alert(outerScope2); //40alert(innerScope); //erroralert(globalVariable); //30

Global & Local


function Foo() { var baz = 1; function Bar() { return baz; } return Bar();}

Foo(); //1

Lexical Scopingfunction Foo() { var baz = 1; return Bar();}

function Bar() { return baz;}

Foo(); //baz is not defined


Named functions are parsed and made available before general evaluation (thus “hoisted” to the top of the file).

Anonymous functions, or functions assigned to variables, require evaluation before they become available

foo(); //called foo!

function foo() { console.log('called foo!');}

foo(); //called foo!

bar(); //undefined is not a function

var bar = function() { console.log('called bar!');}

bar(); //called bar!

Hoisting


function makeAdder(a) { return function(b) { return a+b; }}

var two = makeAdder(2);two(1); //3two(2); //4two(3); //5

Practical: Currying


this


this

•Trips everyone up

•Special variable used within a function

•Refers to the “contextual object”

•Changes based on where a function executes


var Foo = { bar: "bar", baz: function() { return this.bar; }};

Foo.baz(); //"bar"

Foo.bar = "bat";Foo.baz(); //"bat"

var baz = Foo.baz;baz(); //undefined

this


var Foo = { bar: "bar", baz: function() { return this.bar; }};

Foo.bat = function() { return this.bar + "bat";};

Foo.bat(); //"barbat"

this


call & apply

•Methods in the function prototype

•Change the context in which a function executes!


var Foo = { bar: "bar", baz = function(param1, param2) { return this.bar + param1 + param2; }};

var Foo2 = { bar: "123"};

Foo.baz("baz", "bat"); //"barbazbat"

Foo.baz.apply(Foo2, "baz", "bat"); //"123bazbat"Foo.baz.call(Foo2, ["baz", "bat"]); //"123bazbat"

call & apply


function bind(func, context) { return function() { return func.call(context, arguments); }}

Practical: Binding


Exceptions


Exceptions

•All errors are thrown

•Classic try...catch...finally blocks


try { funcDoesNotExist();} catch (e) { alert(e); //ReferenceError: funcDoesNotExist is not defined} finally { //Always Executes}

Exceptions


function Foo() { throw new Error("Message");}

function Bar() { throw "Message";}

try { Foo();} catch (e) { e.message == "Message"; //true}

try { Bar();} catch (e) { e == "Message"; //true}

Exceptions


Prototype


OOP... Kinda...

•Almost no real difference between a dictionary and an object

•Named Functions double as object constructors

•Function objects contain a prototype dictionary that is copied to instance when using new


Foo‣ bar‣ prototype‣ baz‣ constructor‣ __proto__

function Foo() { //The "Constructor"}

Foo.bar = function() { //A "Static" Function}

Foo.prototype.baz = function() { //A "Method"};

OOP... Kinda...


instance‣ __proto__‣ baz‣ constructor‣ __proto__‣ ...

var instance = new Foo();

instance.baz(); //worksinstance.bar(); //error

Foo.bar(); //worksFoo.baz(); //errorFoo.prototype.baz(); //works

new


instance‣ bat‣ __proto__‣ baz‣ constructor‣ __proto__‣ ...

instance.bat = function() { /* ... */ }

instance.bat(); //works

Foo.bat(); //errorFoo.prototype.bat(); //error

new


function Foo(baz) { this.baz = baz;}

Foo.prototype.bar = function() { return this.baz;};

var foo1 = new Foo(1);var foo2 = new Foo(2);

foo1.bar(); //1foo2.bar(); //2

Foo.prototype.bar = function() { return this.baz * 2;};

foo1.bar(); //2foo2.bar(); //4

Overriding Prototype


Asynchronous


Asynchronous

• setTimeout, setInterval allow you to have code executing asynchronously while other code executes


var id = setInterval(function() { //Code to execute every 1000 milliseconds}, 1000);

//clearInterval(id); to stop

setInterval


var id = setTimeout(function() { //Code to execute after 1000 milliseconds have passed}, 1000);

//clearTimeout(id); to cancel

setTimeout


setInterval()

setTimeout()


setTimeout(function() { //Code to run in parallel //while the code after is //executed.}, 1);

//Code here will execute immediately//without waiting on the above

Nifty Trick


DOM


DOM

•Document Object Model

•API to interact with the HTML/XHTML document


Basic selection methods in native DOM

document .getElementById('foo');

document .getElementsByClassName('.bar');

document .getElementsByTagName('script');

DOM: Selection



var paragraph = document.createElement('p');var content = document.createTextNode("Lorem Ipsum");

paragraph.appendChild(content);paragraph.classList.add('my-class');

document.getElementsByTagName('body')[0].appendChild(paragraph);

DOM: Creation



Creates a script element, set its src and async properties

Insert the script before the first script tag in the body of the document

var script = document.createElement('script');script.src = "http://path.to/script.js";script.async = true;

var s = document .getElementsByTagName('script')[0];

s.parentNode .insertBefore(script, s);

Async Script Loading


http://path.to/script.js

http://path.to/script.js

DOM

https://developer.mozilla.org/en/Gecko_DOM_Reference




Debugging


Chrome/Safari Devel. Tools


Firefox FireBug


Console

•Provided by major browser vendors

•Useful for viewing logs, exceptions, real-time data dumping, and code execution within the current context

•Your best friend

•Though older IEs FREAK OUT when you leave it in, remove before deploy!


console

•Ditch alert(), this is your var_dump()

•console.log(arg1, arg2, ...)

•console.info Same as log

•console.warn Icon indicator

•console.error Stack trace


BEWARE

•console.log is not blocking

• In heavily asynchronous applications, sometimes value displayed is not value at the moment of the call

•Your if/else conditionals will work yet console.log will return something that should cause them to fail


Network

•Display all network requests via a gantt-like graph

•Shows browser-initiated (css, images, etc) and script initiated (ajax) alike

•Along with both request and response headers


Script

•Provides a familiar break-point debugging workflow


Coding Styles


Coding Styles

•Mostly your standard C based style techniques

•Special considerations

•Semi-colons? No semi-colons?

•Leading , ?

•Prototype Definition?


var dict = { foo: 'bar', baz: 'bat'};

var dict = { foo: 'bar' , baz: 'bat'};

Comma Style


var foo;var bar;var baz;

var foo , bar , baz;

var Declaration Style


function Foo() { }

Foo.prototype.bar = function(){ };

Prototype Stylefunction Foo() { }

Foo.prototype = { bar: function() { }}


Code Quality Tools

• JSLint http://www.jslint.com/

•By Crockford, extremely strict and inflexible. Code like Crockford!

• JSHint http://www.jshint.com/

•Fork, more flexible according to your own rules and preferences


http://www.jslint.com/

http://www.jslint.com/

http://www.jshint.com/

http://www.jshint.com/

Common Techniques


Grab global App dictionary, or create if not found

Add a function utility, is now globally accessible without fearing collision with other functioned similarly named

App = window.App || {};

App.utility = function() { //Globally available, no //conflicts};

Safe Extension


Immediately Invoked Function Expression

Function is defined then immediately invoked. Closest thing to a namespace/module system.

Prevents variable leakage into outer scopes

(function(exports){ exports.foo = function() { }; var bar = function() { };})(window);

foo(); //successbar(); //not found!

IIFE


Pro-Tip

•Create an application namespace as a dictionary in the global scope

•Add in any global level configuration values


JSON


JSON

Douglas CrockfordAwesome

2001


JSON• JavaScript Object Notation

•Serialization format that is basically JavaScript code minus comments

•Can be eval()’ed

•But don’t! Use JSON2.js or equivalent

•Minimal overhead compared to XML

•No parsers required, native mapping


{"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] }}}

JSON<menu id="file" value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup></menu>


BREAK HAMMER TIME


jQuery


jQuery

John ResigAuthor, jQuery

January 2006


jQuery

•Cross-browser JavaScript library

•Simplifies and normalizes DOM, AJAX, etc.

•Centers around using extended CSS selectors to grab an element(s)


Selectors

•Superset of CSS3 selectors

•Custom Pseudo-Classes

•Filters in jQuery parlance


Selectors

•$('selector') returns jQuery object for chaining purposes

•Chained methods will apply to all results if selector matches multiple elements


Finds all p tags that do not have the class special, and adds the class semi-special

$("p:not(.special)") .addClass("semi-special");

Selectors


Gets the value of the selected option in a select box

$('select option:selected').val();

Selectors


Tests matched element against selector, in this case the jQuery ‘visible’ selector

$('.foo').is(':visible');

Testing Elements


Custom Filters

• jQuery provides the ability to create custom filters

•:radio, :hidden, etc are custom filters provided by default


$("#foo") .html("<strong>bar</strong> baz");

jQuery<div id="foo"></div>

<div id="foo"> <strong>bar</strong> baz</div>


Chaining

•Most all jQuery methods are chain-able

• If $() returns > 1 element, methods invoked will apply to all matched


Find all ul with class first

Find elements of class foo that are children of the top level matched set

Apply the css style of color:red;

Pop the matching of .foo off the jQuery object

Find elements of class bar that are children of the top level matched set (ul.first)

Apply the css style of color:blue;

$('ul.first') .find('.foo') .css('color', 'red') .end().find('.bar') .css('color', 'blue') .end();

Chaining


Events

• jQuery wraps an event handling system

•Handles browser events, AJAX events, and custom events


$(document).ready(function() { //Only execute when the document fires //its onready event (page is done loading)});

$(document).bind('ready', function() { //Equivalent to the above});

$(function() { //Shortcut, equivalent to the above});

Events


$('img').hover(function(){ //Do something when user hovers over //any img tag});

Events


Events

•Event functions have the matched element from jQuery bound as this


Listen for click on a.foo

this will be the specific a.foo element that was clicked

$('a.foo').click(function(){ var $this = $(this) , href = $this.href(); //href will be the clicked //links href});

jQuery


Live Events

•Events using .bind are bound to the specific element at the specific point in time it was bound• New elements that match will not be included

•Using .on or .off produces a delegate listener that scans for bubbled events that match a selector• New elements that match said selector WILL be included


All a tags that exist at some point as a descendant of .grandparent will trigger this event on click

Any future a tags that are added as a descendant of .grandparent will trigger this event on click

$('.grandparent') .on('click', 'a', function(e){ var $target = $(e.target); //$target will *usually* //be the a tag, though //sometimes it will be a //nested tag });

Live Events


Create a Prototype object for example purposes, then create new instance.

The first click handler will fail. The keyword this will not be a reference to the instance of Foo as expected, but a reference to the matched DOM element that was clicked.

jQuery.proxy() will wrap your function such that further invocations will use the context you set for this

function Foo() {}

Foo.prototype.baz = function() {};Foo.prototype.bar = function() { this.baz();};

var instance = new Foo();

$('element').click(instance.bar);

$('element').click( jQuery.proxy( instance.bar, instance ););

Proxy


When .button is clicked, fade out img.preview over 600 milliseconds and then remove it from the DOM

$('.button').click(function(){ $('img.preview') .fadeOut(600, function() { $(this).remove(); });});

Animation


Animate the following attributes over the course of 5 seconds: opacity to 25% move to the right 50px toggle height

$('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. });

animate


DOM Creation / Insertion

•Super easy! Provide html tag to $() and jQuery will create the element and return it wrapped in jQuery

•Second parameter is dictionary for properties

•Then use methods like .append() to insert


Creates a DIV tag

Creates an input (text) tag

Creates a span with the class of foo

$('<div>');

$('<input type="text" />');

$('<span>', { 'class': 'foo'});

DOM Creation


Replaces the content of #foo with:Testing

Replaces the content of #bar with:<strong>Testing</strong>

$('#foo') .html("<strong>Testing</strong>"); $('#bar') .text("<strong>Testing</strong>");

DOM Override


Insertion (inside):-append-appendTo-html-prepend-prependTo-textInsertion (outside):-after-before-insertAfter-insertBefore

$('<div>') .appendTo($('#foo'));

$('#foo') .append($('<span>'));

$('<div>') .prependTo($('#bar')); $('#baz') .after($('<span>'));

$('<div>') .insertBefore($('#baz'));

DOM Insertion


AJAX

•Asynchronous JavaScript And XML

•Though never use XML, use JSON

• jQuery has an AJAX library

•Wraps all the different browser quirks

• IE is weird


$.ajax({ url: "test.php", success: function(data){ $('div.status').addClass("done") .html(data); }});

AJAX


Cross-Domain

•Browser will not fire AJAX requests to a domain outside the one said JavaScript was loaded from

• If you include http://sub.domain.tld/file.js, it cannot make AJAX requests to http://another.tld/

• It can make requests to http://domain.tld/


http://domain.tld/file.js

http://domain.tld/file.js

http://another.tld

http://another.tld

http://another.tld

http://another.tld

http://domain.tld

http://domain.tld

JSONp

•Workaround to cross-domain

•Load like it is a javascript file (create an inject a script tag into the DOM)

•Response is a function (defined by a callback GET parameter) that executes and returns value


["api", "response"] callback(["api", "response"]);

JSONpdomain.tld/api.json domain.tld/api.jsonp?callback=callback


$.ajax({ dataType: 'jsonp' , url: 'http://search.twitter.com/search.json' , data: { q: "#tek12" } , success: function(resp) { jQuery.each(resp.results, function(id, tweet){ $('<div>', { 'class': 'tweet' }) .append($('<strong>', { 'class': 'user' , text: '@' + tweet.from_user })) .append($('<span>',{ 'class': 'text' , text: tweet.text })) .appendTo($('#tweets')); }); }});

JSONp


http://search.twitter.com/search.json'

http://search.twitter.com/search.json'

Create new :inline filter (checks if display is set to inline)

Works like any other native inline

$.expr[':'].inline = function(elem){ var $elem = $(elem) , disp = $elem.css('display'); return disp === 'inline';};

$('div a:inline') .css('color', 'red');

$('span:not(:inline)') .css('color', 'blue')

Extending: Custom Filters


(function($, global, undefined){

var defaults = { foo: "bar" };

var methods = { init: function(options) { // Merge user defined options options = $.extend(true, {}, defaults, options); return this; }, method: function() { }, }

$.fn.foo = function(method) { if( methods[method] ) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method == 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist'); return undefined; } }

})(jQuery, window);


Resources

http://api.jquery.com/




Underscore.js


Underscore.js

DocumentCloud

2009


Underscore.js

•Functional, self-contained micro library

•Uses chaining for expressiveness

•Does not inject methods into native objects!


Functional Programming

•Functions are mappings between input and output

•No side-effects

• Input A always results in output B

•No OOP

•LISP, Haskell, Erlang


Underscore.js

•_(coll).method(arg1, ..)

•_.method(coll, arg1, ..)


Underscore.jsCollections

•each•map•reduce•reduceRight•find•filter•reject•all•any•include•invoke•pluck•max•min•sortBy•groupBy•sortedIndex•shuffle•toArray•size

Arrays•first•initial•last•rest•compact•flatten•without

•union•intersection•difference•uniq•zip•indexOf•lastIndexOf•range

Functions•bind•bindAll•memoize•delay•defer•throttle•debounce•once•after•wrap•compose

Objects•keys•values•functions•extend•pick•defaults•clone•tap

•has•isEqual•isEmpty•isElement•isArray•isObject•isArguments•isFunction•isString•isNumber•isFinite•isBoolean•isDate•isRegExp•isNaN•isNull•isUndefined

Utility•noConflict•identity•times•mixin•uniqueId•escape•result•template

Chaining•chain•value


Maps function to each element in the input collection

var inp = [1, 2, 3] , out = _.map(inp, function(n){ return n*2; });

//out = [2, 4, 6]

Map


Reduces collection to a single value. mem is the initial state, each successive iteration must be returned

var inp = [1, 2, 3];

_(inp).reduce(function(mem, n){ return mem + n;});

//Iter 0: mem = 1 | n = 2//Iter 1: mem = 3 | n = 3//Returns: 6

Reduce


Iterates over a collection and extracts the values for the input key (assumes all elements in the collection are objects/arrays)

var stooges = [ {name: 'moe', age: 40} , {name: 'larry', age: 50} , {name: 'curly', age: 60}];

_.pluck(stooges, 'name');

//Returns ["moe", "larry", "curly"]

Pluck


Returns the max item in a collection.

If second argument (iterator) provided, will use to produce the value to be compared

var stooges = [ {name: 'moe', age: 40} , {name: 'larry', age: 50} , {name: 'curly', age: 60}];

_.max(stooges, function(s){ return s.age; });

//Returns {name: 'curly', age: 60}

Max (Min)


Returns the keys from a dictionary as an array

_.keys({ one: 1, two: 2, three: 3});

//Returns ["one", "two", "three"]

Keys


Maps a duplicate input dictionary on top of a predefined “default” dictionary

var iceCream = { flavor: "chocolate"};

_.defaults(iceCream, { flavor: "vanilla" , sprinkles: "lots"});

//Returns {flavor : "chocolate", sprinkles : "lots"}

Defaults


When chain is initiated, method return a self-reference back to underscore but with the value attached [similar to opening with _(val)].

The chain continues until the value is extracted using .value()

var stooges = [ {name : 'curly', age : 25}, {name : 'moe', age : 21}, {name : 'larry', age : 23}];

var youngest = _.chain(stooges) .sortBy(function(s){ return s.age; }) .map(function(s){ return s.name + ' is ' + s.age; }) .first() .value();

//Returns "moe is 21"

Chaining


chain: begins a chain

map: takes dictionary and maps to a nested array [[key, val],[key, val], ..]

sortBy: sorts array returned by map by key (first element)

reduce: reforms an object using the nested list, [0] as key and [1] as value

value: spits out the value an ends the chain

_(request.params).chain() .map(function(v, k) { return [k,v]; }) .sortBy(function(a) { return a[0]; }) .reduce(function(s, v){ s[v[0]] = v[1]; return s; }, {}) .value();

Chain: FUN!


Backbone.js


Backbone.js

DocumentCloud

2010


Backbone.js

•Micro application framework

•Relies on jQuery/Zepto and Underscore.js

•Provides Views, Models, Collections, and Router

• If standard REST, default sync will work out of box


Model

•Fires events on value changes

•Must use model.get() and model.set()


Collection

•Collection of models

•Can be enforced

•Fires events on add, remove, reset, etc


View

•Creates own DOM object (or utilizes existing one)

•Easy event delegation/undelegation


Router

•Hash/History Router

•History management abstraction provided


Require.js


Require.js

James Burke

2009


Require.js

• Implements AMD

•Asynchronous Module Definition

•Dependency Management


r.js

•Optimizer, Compiler

•Concatenates dependencies into single file, optionally runs closure/uglifyjs/etc


Other Libraries Of Note


Compilers/Compressors

•UglifyJS• http://marijnhaverbeke.nl/uglifyjs

• JSmin:• http://www.crockford.com/javascript/jsmin.html

•YUI Compressor• http://developer.yahoo.com/yui/compressor/

http://marijnhaverbeke.nl/uglifyjs




http://www.crockford.com/javascript/jsmin.html

http://www.crockford.com/javascript/jsmin.html

http://developer.yahoo.com/yui/compressor/

http://developer.yahoo.com/yui/compressor/



Lawnchair

•HTML5 localstorage abstraction

•Good suite of storage adapaters

•DOM, webkit-sqlite, etc

http://brian.io/lawnchair




Moment.js

•Date/Time library

•Finally! Almost as easy as \DateTime and strtotime()

http://momentjs.com/




Enyo

•Application Framework

•Developed for the HP/Palm TouchPad

•Now open-source

•Designed for nested views and complex, finger-based UI

http://enyojs.com/


http://enyojs.com/

http://enyojs.com/

And Many More!

http://microjs.com/


http://microjs.com/#

http://microjs.com/#

https://joind.in/6503

http://bit.ly/js-ruby-wat






Technology

JavaScript Primer