Interaction layer

Front-end stack

From static to dynamic! JavaScript is the front-end language that makes Web 2.0 possible. Every visitor interaction, every fly-over effect, every hot-line database request, and every glittering sparkle is JavaScript driven.

JS: JavaScript

This little interpretive language was long dismissed as a toy, and for far too long was vilified as the language whose chief claim was the popup messages that "marketeers" annoyed us with.

But today JavaScript has reached a maturation level that demands respect, and any web site that wants to move beyond the static this-is-all-you-get web page and into the exciting world of Web 2.0, will have to use JavaScript.

JavaScript has been fully vetted by the industry, standardize as ECMA-262, and reliably deployed on every major web browser. It has everything expected of a modern language:

• Variables: typeless - automatic garbage collection
• Branching: if - else if - else
• Looping: do - while - for - foreach
• Structures: arrays - associative maps - objects
• Blocks: functions - modules - prototype inheritance - closures

DOM: Document Object Model

The Document Object Model is the in-memory representation of your web page. When a web browser is instructed to display a page, it parses your HTML tags into a tree-graph of element nodes: this shadow collection of elements is what JavaScript manipulates to work its magic.

When programmer's speak of JavaScript coding challenges, they are really talking about JS + DOM. Here are the DOM parts needed for everyday use:

• Handling interactions: addEventListener - removeEventListener
• Accessing elements: getElementById - parentNode - childNodes
• Manipulating elements: createElement - appendChild - removeChild
• Setting attributes: getAttribute - setAttribute - id - className - style - width - height - left - top

Front-end libraries

JavaScript over DOM, is all that's needed to write front-end interactions. But full featured front-end applications can benefit from the great work of other programmers too, just like the back-end does, by using libraries.

One of the most important JavaScript library features to evaluate and select for your next project, is browser encapsulation: a collection of thin wrappers that smooth out the differences in how the Trident, WebKit, Gecko and Presto browser layout engines have implemented some fundamental DOM features, most importantly XMLHttpRequest and event listeners.

A selector engine provides a way to find the HTML element(s) to be manipulated by your JavaScript code. The traditional DOM function getDocumentElementById is both verbose and limited; there are several libraries that have dealt with this head on, most notably, Sizzle, a jQuery spin-off project.

Developer tools like assertions, logging, profilers, testing framework, code compressor.

Here are some of today's most popular general purpose JavaScript libraries:

• jQuery. One of the first and still one of the most popular libraries, jQuery is lightweight and focused: it encapsulates events and AJAX, provides a convenient shortcut to the getElementById function, and supplies a few handy user interface effects.
• Prototype. Like jQuery, Prototype has fundamental support for events and AJAX, and similar—but more extensive—shortcuts for accessing elements of your web page; but the differentiator is the emphasis Prototype places on classes and the support it provides for object oriented design using inheritance. Prototype fancies itself as a "framework."
• Dojo. Billing itself as a toolkit, Dojo starts out with basic support for events and AJAX, and adds widgets—little collections of JavaScript, CSS, and HTML that together create a visual user interface object for displaying or manipulating data. The widgets developed for the library cover a wide range of needs: menus, sortable tables, drag-and-drop trees, calendars, faders, charts, etc.

When evaluating these, remember to consider the performance cost. In the JavaScript arena, the more important performance consideration is not how fast the code executes within the user's browser, but rather, how much time it takes to transport the library's code over the Internet from your web server to your visitor's computer. When performance is at stake, choose the smallest library possible.