JavaScript Libraries

MadJS: JavaScript 101

Josh Thomas / @jthoms1

Why do we need libraries?

How can they help?

  • DOM Traversal and Manipulation
  • Event handling
  • cross browser support (!important)
  • animations and visualizations

Types of JS libraries

  • Core
  • Utility
  • Complete frameworks
  • Web-application (MV*)

Core

jQuery, MooTools, Prototype

jQuery


$(document).ready(function() {

    $("a.hello").on("click", function (event) {
        event.preventDefault();

        $("#content").html('<p>hello world</p>');
    });

});
                    

Utility

Underscore, momentjs, d3

Underscore


var listOfPlays = [
    {title: "Cymbeline", author: "Shakespeare", year: 1611},
    {title: "The Tempest", author: "Shakespeare", year: 1611},
    {title: "Wicked", author: "Schwartz", year: 2003}
];

// Returns plays that are within this century
var thisCenturyPlays = _.filter(listOfPlays, function (play) {
    return play.year > 2001; 
});

                    

Complete

Dojo, YUI, ExtJS

Web Application Libraries (MV*)

  • Managed views
  • templating
  • URL routing
  • Data storage

Backbone, Angular, Ember, KnockoutJS

Questions?