An inescapable symptom of widespread web design bad-assery is an abundance of vocabulary words that web designers need to be familiar with. For every job, there is the right tool (or, at least, the “righter” tool), but in order to use that tool, we have to first know its name.
Today, I’d like to take a moment to describe some common JavaScript vocabulary that many of us have heard, though we may have only the vaguest sense of their meaning. With an expanded vocabulary, the application of the right tool becomes easier.
CommonJS
CommonJS is an API aimed at creating a standards library for JavaScript beyond the browser. It is created, promoted, and refined by the CommonJS Group. Its mission statement defines it as an organization primarily focused on API design for server side adoption, but the influence of CommonJS can be felt in the larger community. For instance, AMD is informed by CommonJS Module Identifiers.
RequireJS
RequireJS is a JavaSript module loader. It’s tight. From its docs:
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
I recently wrote a post detailing how Require.js might be able to fit in with Drupal.
Backbone.js
Backbone.js is a JavaScript framework that upholds an MV* approach to application design. If that acronym throws you, read this awesome post by Addy Osmani. With Backbone.js, one can more sanely create JavaScript rich applications. It provides the foundations for creating models, relating them to views, routing requests to other views, etc. From its docs:
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Underscore.js
Underscore.js is a small JavaScript utility library. It gives JavaScript developers some of the fancy stuff that programmers of other languages take for granted. From its docs:
Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
Underscore.js is a dependency of Backbone.js, so if you’re considering Backbone.js, you’re considering Underscore.js. Not a terrible thing, as Underscore.js is teeny tiny, and gives us some great JavaScript methods.
Zepto.js
Zepto is a jQuery-like library with pretty specific design goals. It aims to almost completely replicate the jQuery API while staying light as a feather, a feat Zepto achieves mostly by removing cross-browser compatibility cruft from jQuery. From its docs:
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.
Now, cross-browser compatibility cruft is why a lot of us use and love jQuery; so as to have predictable JavaScript across many browsers. But if your primary concern is modern browsers and lightweight pages, Zepto is worth a hard look.
Ember.js
Ember.js states simply that it is a “framework for creating ambitious web applications.” It’s a JavaScript framework similar to Backbone.js, but diverges from Backbone.js in that Ember.js favors convention over configuration (ala RoR). Where Backbone.js leaves one with the freedom and sometimes curse of figuring out how all the parts of an application fit together, Ember.js seems to say “I already thought about this, jerk.”
Handlebars
Handlebars is a JavaScript library for HTML templating, a paradigm that is very useful when building complex applications: Rather than dropping strings of markup directly into JS code, we can define templates with dynamic content for use in our applications. From its docs:
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
Modernizr
Modernizr is a sweet library that tests browsers for feature support. If we can detect what features a user’s browser is capable of, then we can progressively enhance their experience accordingly. From its docs:
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Modernizr allows for this progressive enhancement by adding CSS classes to the html element on page load. These classes reflect functionality we might want to leverage, for instance, CSS gradients. If a user doesn’t have that capability in their browser, we wind up with a class called “no-cssgradients”, and can either polyfill this discrepancy or write CSS that progressively reflects this.
Express
Express is a little framework for creating web apps with node.js. It looks a lot like Sinatra, in that it can be a dead simple mechanism for defining routes that resources are available at. From its docs:
Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications.
You can probably already imagine creating a simple RESTful service with Express that could spoon feed data to a Backbone.js application.
Of course, the moment this distilled glossary is published, there will be a new framework, library, or utility that will be worth consideration; that is the nature of the ever shifting landscape of web design.
Originally published on the Aten blog