FANDOM


OverviewEdit

"Prototype is a JavaScript Framework that aims to ease development of dynamic web applications" (http://www.prototypejs.org/). In essence Prototype is a collection of utility methods and extensions to default Javascript objects. The two advantages it provides over plain javascript are: an improved set of default methods on objects, and cross-browser compatibility.

Prototype provides superior and consistent APIs for DOM manipulation, AJAX, event handling, class-based inheritance, enumeration handling and much more. Prototype was one of the earlier Javascript libraries that has quickly become one the of most popular libraries for front end Javascript development. It is the basis of the popular script.aculo.us javascript effects and animations library. Both prototype and script.aculo.us are built into the Ruby on Rails web development framework.

Major UsesEdit

Inheritance, Ajax, Event Observation and DOM extensions are four major parts of prototype that make it increadibly useful. Here we go through these four areas in more detail with examples to give a sense of the power of this library.

InheritanceEdit

Javascript doesn't directly support class types nor class-based inheritance in the same way as C++ and Java. Prototype provides helper functions to simulate classes and class-based inheritance through the Class.create() function.

Javascript uses prototypal inheritance, which means objects are extended from existing "prototype" objects. Simulating the class-based inheritance model (which is more familiar to most programmers) can be rather tricky if the base class is not the built-in Object type.

Example: Creates a class in Prototype with Class.create() and extends it.

Ajax Using JSONEdit

The Ajax object in Prototype consolidates common AJAX patterns, such as simple requests, direct updates straight into an HTML tag, and periodic updates, into several cross-browser functions. It also supports JSON, a lightweight data interchange format for Javascript, as a fast alternative to XML.

Without Prototype, the programmer would have to work with the XmlHttpRequest object directly, which is different across browsers, and deal with request statuses and data interchange formats. There is also much less code to write for scenarios involving periodic updates, such as checking stock quotes.

Example: Demos various ways to make AJAX requests and handlers with Prototype.

EventsEdit

Normally in javascript there are two major ways to observe events on DOM elements. First is via an inline defintion:

  <a href="#" onclick="doSomething(); return false;">Do something!</a>

The second is via setting an event handler through javascript:

  document.getElementById("something").onclick = doSomething;

The problem with both is that it allows for only one handler to be registered for an event at a time. When building modular systems, it is common to have more than one handler listening to an event. The W3C specification allows for an addEventListener() method on elements, however this method is not supported by all browsers. Prototype provides a simpler mechanism: Event.observe(), and Event.stopObserving(). These two methods together allow for a more flexible and cross-browser compatible way to register and unregister event handlers.

Example: Demos registration and de-registration of multiple handlers to a single event.

DOM ExtensionsEdit

Working with the DOM in browsers can be frustrating because of various browser incompatibilities and/or clunky built in methods. One way to retrieve or add elements and attributes may not work in the other. Setting styles dynamically requires lots of repeated code for each style. Prototype mixes in various methods into the vanilla DOM elements to provide a more consistent and easy interface for manipulating the DOM.

To achieve this Prototype tries to extend the prototype of the HTMLElement object. Since this is not allowed in all browsers, notably IE, it manually adds these methods through the Element.extend method to each DOM element that is returned by DOM accessor methods in the library.

Examples: Here we provide four examples of how Prototype helps out in working with the DOM.

Comparison to Other LibrariesEdit

With a multitude of javascript frameworks out there it seems like a daunting task to pick one that suits a website explicitly. Prototype, like other web framework libraries, provides similar utility functions considered core to web applications - AJAX, DOM manipulation, and event handling. In terms of popularity Prototype appears to be be at the top of the "heavy" libraries (http://kauriproject.org/wiki/g1/g4/g2/69-kauri.html). The light weight libraries such as jQuery and mootools are optimized for websites that need only a few interactive elements or effects. This might be a webpage with a single simple effect, or some very simple Ajax calls. However these libraries don't appear to have the long tail of functionality that Prototype provides for websites that require heavy Javascript usage. Some examples of this long tail include:

  • Class-based inheritance, which is supported by some frameworks, such as Mootools, but not (natively) by others, such as JQuery. This is more convenient for programmers familiar with other object-oriented languages like C++ and Java.
  • Function currying, wrapping, and binding to a particular scope
  • Special extensions for forms, including form submission via Ajax

Many of the other libraries are highly modular by design or support plugin development. Modular libraries usually have a "core" file that is then extended by various libraries that add widgets, animation effects etc. This allows these libraries to be used in a large number of websites. Once a developer learns the core there is a small learning curve for other websites he may build that require other extensions. Prototype lacks this sort of modularity, and provides all its functionality in a single large file, more on this in the Cons section below. When used with script.aculo.us, however, it allows for a similar modular style for widgets and effects. Though together this is still a large download.

There are lot of comparisons of Prototype that can be made with jQuery, possibly the most popular javascript library out there. One major complaint for Prototype used to be a lack of good documentation, a place where jQuery excels. Recently, however, the Prototype team has put up thorough API documentation (http://www.prototypejs.org/api). Unlike jQuery, Prototype doesn't live in a separate namespace, which leads to various issues that are elaborated on in the Cons section below.

jQuery also touts chaining of methods as one of it's cornerstones. Chained method calls are where an arbitrary sequence of operations are applied to one DOM element in one statement. This, however, is part of Prototype as well, making this a comparison mostly obsolete. An example from the Prototype documentation: $('message').addClassName('read').update('I read this message!').setStyle({opacity: 0.5}). Most methods of the Element class return the Element object they were applied to, which enables chained method calls.

EvaluationEdit

ProsEdit

The are many advantages to using Prototype. The most common tasks in client side web development are consolidated in this library, which reduces the amount of new code written by the programmer. As a result, less time is required for debugging the application. The functions are all cross-browser compatible, which further reduces code and debug time. Finally, the API is oriented around common tasks, which hides many details in configuration code, making it easy to understand..........

ConsEdit

Prototype adds various extensions and new utility methods to existing Javascript and DOM objects in the default implementation of a browser. These very extensions, however, can cause problems with other libraries that provide new functionality but have some overlapping method names. This is not a specific problem with Prototype itself, it is in fact a general problem with many Javascript libraries that a developer should be mindful of. For example, it is hard to use Prototype with FBJS, Facebook's javascript library that is automatically included in their sandboxed app pages, because FBJS rewrites many of the basic methods.

Prototype's code does not live in a separate namespace, as just described. This effectively adds a slew of reserved keywords that are not explicitly enforced by the Javascript interpreter. These include Class, Element, Event, Ajax and others that the developer must be careful not to redefine to avoid losing functionality.

One common complaint about the library is it's large size. In it's latest incarnation (version 1.6.0.3) the uncompressed, un-obfuscated version of the library is just under 128KB. This can be a major hit for a website that may not necessarily need most of the features provided in the library. The Prototype community responds to this complaint by pointing out that sending the library via gzip, a standard compression format supported by HTTP, weighs in at about 28KB, which is a much more acceptable number.

ConclusionEdit

Overall Prototype gives front end web developers a powerful set of tools that are lacking in vanilla Javascript implementations. It's large set of improvements and extensions when used along with the script.aculo.us library provide an incredibly powerful and complete set of functionality needed in highly interactive web pages. Though it's place may not necessarily belong in a light weight page, Javascript heavy pages will reap huge rewards from Prototype.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.