books

books

The concept of full-stack was pronounced dead at the close of 2019.
2020 Stack is the new name for the new generation.

windrose

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.

Layers

Five-layered approach to front-end, client side, development:

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.

JavaScript and DOM

Distinguishing one from the other is easy: just think of the Document Object Model as the subject and JavaScript as the verb.

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:

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:

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.

JavaScript library comparison
Library Browser encapsulation Selector engine AJAX helpers Object oriented "Class" Strengths
Sizzle selector engine
DOMAssistant selector engine
MooTools effects
qooxdoo
“cooks-do”
DOM wrapper, user interface elements, effects, utilities, internationalization, developer tools
YUI user interface elements, dynamic loader, developer tools
jQuery effects
Mochikit developer tools, utilities
Dojo user interface elements, client storage
ExtJS user interface elements
Prototype basic and lightweight
SWFObject Flash encapsulation

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

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.