.

JS Libs Deconstructed

Navigate the physical library code to see what, where, and how the magic happens Blog

The Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools.

It breaks the physical JavaScript into visual blocks that you can easiliy navigate. Each block opens to reveal its internal code. Clickable hyperlinks allow you to follow program flow.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Summary

  • Focuses on expressiveness, quick and easy coding, and plugins

Advantages

  • Optimised for DOM manipulation
  • Operate on multiple items with no special syntax
  • CSS selector-driven
  • Method chaining makes writing code easy
  • Intuitive API and syntax
  • Modular plugin archutecture keeps the core lean
  • Fastest selector performance
  • Single namespace

Disadvantages

  • DOM rather than JavaScript oriented
  • Some developers have issues around "this" in callback functions

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications, featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around.

Summary

  • Focuses on extension of native classes, inheritance, legibility

Advantages

  • Extensive API
  • Elegant class-oriented syntax
  • Extend native classes and the DOM with new methods
  • Useful new Object types

Disadvantages

  • More verbose syntax and API than jQuery
  • Too many trivial methods in the core
  • Not as easy as jQuery to update the DOM
  • Slowest of the 3 with regards to selector performance
  • Needs script.aculo.us for effects
  • Clutters global namespace

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

Summary

  • Focuses on extension, inheritance, legibility, reuse, and maintainability

Advantages

  • Consise API
  • Elegant class-oriented syntax
  • Extends native classes with new methods
  • Lean core
  • Can extend functionality with plugins and mixins

Disadvantages

  • More verbose syntax and API than jQuery
  • Not as easy as jQuery to update the DOM