Stanford University Wiki

Project 2: The Framework

229pages on
this wiki
Add New Page
Talk0 Share

Benjamin Bercovitz, Seng Keat Teh

Introduction Edit

Scriptaculous is a collection of Javascript libraries built on top of Prototype for providing common user interface functionality through a simple interface. The most commonly used libraries in the Scriptaculous collection provide animation, input enhancement and drag-n-drop functionality. Rather than providing a full set of cohesive functionality, this library instead seeks to develop building blocks that can be used and extended to easily support richer interactions with website interfaces.

Our analysis provides an assessment of the facilities provided by the Scriptaculous libraries in view of developing interactive web applications. The first section will focus on the facilities provided by the libraries. The second section will cover its use and integration into web applications. The last section is a discussion of the strengths and weaknesses of Scriptaculous.

Scriptaculous Facilities Edit

Unlike many libraries and frameworks that have a single overarching goal behind the whole package, the Scriptaculous collection is more of an ad-hoc set of functions that solve or abstract away a number of the most common Javascript user interface problems encountered by web programmers. We will focus on three major components of the Scriptaculous libraries.

Scriptaculous provides the animation library effects.js which helps to simplify annoying and complicated custom animation code. Traditionally, animations can be somewhat difficult to achieve in Javascript code. The usual technique requires setting a timer and gradually changing the style values of some DOM element on each timer event until the value reaches a desired point. For instance, to achieve a simple fade out effect on a div box, the programmer might write a function that changes the filter style attribute with something like

 filter: alpha(opacity=95)

reducing the opacity by 5. Then, he will set a timer to call the function every thirty miliseconds or so until opacity reaches 0. To further complicate his program, it will have to deal with different browsers having different attribute names and conventions. For instance, mozilla uses

 -moz-opacity: 0.95 

to express the same state; CSS3 supported by some new browsers specifies


Finally, the element should probably be taken out of the flow after fading by setting display: none;. This amount of work may be especially bad because the high level visual effect might be optimally specified by a designer with more limited Javascript programming sophistication, slowing down a "design by experiment" paradigm.

In contrast, Scriptaculous can support fade out and over a dozen other effects with a single line of Javascript. For fade out, the code is simply


If the DOM element is a Prototype extended object, the interaction is even simpler:


will do the job. The modularity of these effects is demonstrated by the fact that a number of Scriptaculous effects are themselves actually compositions of less complex Scriptaculous effects called "core effects". For example, Effect.Fade itself is built on top of the basic core effect Effect.Opacity. Scriptaculous currently provides 7 core effects (Effect.Opacity, Effect.Scale, Effect.Morph, Effect.Move, Effect.Highlight, Effect.Parallel, Effect.Tween) which serve as "building blocks" that can be combined and/or extended to create even more complex effects known as combination effects. Effect.Fade is one such example and Scriptaculous currently provides 15 other combination effects including Effect.Puff, Effect.Shake, Effect.Squish and Effect.SlideDown/Effect.SlideUp.

In addition to animation effects that enhance uneditable page components, Scriptaculous also provides a quick way to utilize interesting input field controls via controls.js. Specifically, Scriptaculous provides three increasingly popular but complicated-to-implement controls: an Autocompleter widget, an InPlaceEditor widget and a Slider widget. The InPlaceEditor widget simply replaces a page element with an input box containing the same text content. This is useful to let users switch between preview and edit modes in web applications. Next, the Autocompleter widget provides an easy way to incorporate auto-completion functionality into an input box element for purposes such as a suggest box. This has proven to be a useful interaction in many web applications that do lookups or search such as Google Suggest. Scriptaculous provides two versions of the Autocompleter widget: Autocompleter.Local keeps the list of suggestions in memory while Ajax.Autocompleter queries the server through an AJAX call to dynamically obtain suggestions.

Finally, Scriptaculous also supports a drag and drop style interaction through the dragdrop.js library. To make a page element draggable, the developer need only only line of code:

 new Draggable('elem_id', [options]);

Elements can optionally "snap back" to the position they were dragged from, or even work with window scrolling, which is a tricky event case. Other elements can be defined as "Dropable" containers that can hold Draggable elements. These optionally support limiting which Draggables can be dropped. Both also support adding callbacks that fire when high-level events happen, such as "user dragged a box from region 1 to region 2," allowing the backend model to reflect those changes if necessary.

Integrating Scriptaculous into Web Applications Edit

Scriptaculous can be integrated into the larger functionality of a full web framework. At least two, Ruby on Rails ( and Seaside (, use Scriptaculous to integrate animation into template design and AJAX controls into form design. The place of Scriptaculous in this model of development is represented by Figure 1, which shows Scriptaculous libraries supporting the javascript codegen for an abstracted MVC framework. However, Scriptaculous also works well in a lightweight development environment by reducing the amount of javascript code needed for user interface, as show in Figure 2. The developer need only write stub UI code to access the library methods and provide callbacks to interact with client-side and perhaps server-side data.


Figure 1. Scriptaculous in an MVC framework


Figure 2. Scriptaculous in a lightweight development environment

What is Unique about Scriptaculous Edit

Scriptaculous is a very focused framework with the goal of making it easy to develop sophisticated and eye-catching UI visual effects using Javascript. Very few frameworks are as tightly focused as Scriptaculous; often most web frameworks attempt to be a "jack-of-all-trades" to solve a wide variety of problems. The Yahoo User Interface (YUI) Library, for instance, provides solutions ranging from something as simple as dynamic buttons and an autocomplete widget to something as complicated as providing AJAX browser history support and a rich text editor widget

The Scriptaculous effects library is also tightly integrated in comparison to other web frameworks and libraries. The out-of-the-box "core effects" from its effects library are used as basic building blocks to create the more complex "combination effects" and are reused to support the UI visual effects seen in its "drag-and-drop" interaction and advanced UI controls. This extensibility gives framework users the ability to customize and extend existing widgets to suit their needs.

Besides providing “core effects” as reusable building blocks that is used to build more complicated “combination effects”, Scriptaculous also provides two other mechanisms unique to the framework in developing complex animations: “Effect Callbacks” and “Effect Queues”. “Effect Callbacks” are callback functions that can respond to certain milestones or events during the animation of an effect. “Effect Queues” is a timeline-style construct in which a series of effects can be ordered to create one smooth running animation, very similar to how movie scenes are ordered to create one continuously running movie clip.

In comparison to other frameworks like the YUI Library, Scriptaculous-provided UI widgets are conceptually simpler and easier to use. YUI’s implementation of the Autocompleter widget, for example, requires the framework user to be also knowledgeable of the DataSource object, another layer of indirection that abstracts the data retrieval from a variety of sources but possibly adds more coding complexity for the user. Scriptaculous on the other hand just simplifies the Autocompleter implementation to two choices for the framework user: Autocompleter.Local for local data and Ajax.Autocompleter for server data obtained using AJAX. There is no need for a Scriptaculous user to be knowledgeable of additional external classes in order to directly use a particular UI widget.

Finally, unlike Google Web Toolkit which favors a Java-based approach or ASP.NET AJAX which uses an ASP.NET-based backend, Scriptaculous works well across different back-end implementations, regardless of the server-side’s chosen programming language or framework. Scriptaculous can also be easily embedded within another larger web framework such as Ruby-on-Rails.

Strengths and Weaknesses of Scriptaculous Edit

Strengths Edit

Scriptaculous maintains the same design philosophy as Ruby-on-Rails, being very focused on the problem (UI visual effects) the framework is trying to solve, being very simple and easy to use, being well-scoped and concise in focus, scope and code, and not being a very large or complicated framework that could overwhelm a framework user. This should not be surprising since its creator, Thomas Fuchs, was one of the major developers of the Ruby-on-Rails framework, hence the similar framework design philosophy between Scriptaculous and Ruby-on-Rails.

Because of Scriptaculous’ concise code and tight focus, the framework is not very large or complicated and is lightweight enough for a beginner Scriptaculous user to get started very easily in utilizing the framework. The design of the Javascript methods, classes and components of the framework is straightforward, logical, consistent, concise and clear, making Scriptaculous very easy to use for a beginner. In general, a Scriptaculous UI object, be it from one of the three modules of “effects”, “drag-and-drop” and “controls”, will generally have the common form of

 new ScriptaculousObjectName(elementId, required-params, [options]);

This programming form is consistent across all UI objects provided by Scriptaculous. elementId refers to the HTML DOM element the Scriptaculous object will act on. required-params depend on the particular Scriptaculous object being created. For example, most Scriptaculous objects from the “Effects” module do not have required-params. Finally, all Scriptaculous objects accept an options parameter that is a hash of additional customization parameters, such as setting up callback functions to respond to a certain event, or changing the size, color and display text of an instantiated Scriptaculous object.

Because Scriptaculous is built upon the Prototype framework, its syntax and coding conventions provide better support for the traditional object-oriented programming model. Scriptaculous also has excellent integration with the Ruby on Rails framework, where Scriptaculous is also included. However, Scriptaculous remains a server technology agnostic framework; as a solely client-side framework, it is able to work across any chosen back-end implementation on the server side.

As mentioned earlier, Scriptaculous compact framework and concise code helps make the framework less complex and easier to use for a beginner. However, this perceived strength could be a weakness for the framework; due to its concise design, Scriptaculous provides only a limited number of out-of-the-box UI visual effect objects. Scriptaculous accounts for this weakness with another unique strength of its framework; Scriptaculous is designed to be an easily extensible framework. Each of its out-of-the-box widget can be easily customized, and if needed, extended to suit a user’s needs. It has the nice abstraction of “core effects” as building blocks that can be used together with Scriptaculous mechanisms such as “Effect Callbacks” and “Effect Queues” to assemble very sophisticated and powerful UI visual effects. Not happy with the UI visual effect of a Scriptaculous “Draggable” object as it is moved around on screen? Then change the starteffect property of the “Draggable” object from the default Effect.Opacity to any of the out-of-box visual effect such as Effect.Pulsate or even a custom created “effect” object.

Weaknesses Edit

Among the strengths mentioned of Scriptaculous are its compact code and very specific focus. As a result of its concise design, the framework only provides a small set of out-of-the-box UI visual effect objects, a noted weakness for a user looking for a far more comprehensive framework that can provide more powerful and complex UI visual effects. Scriptaculous, as we noted, attempts to compensate for this weakness by making its provided widgets very extensible; “core effects” for example are used as the foundation to build more complex “combination effects”. But it is certainly of note that should there not be an available out-of-box “combination effect” provided by Scriptaculous, a user has to put in some amount of effort to develop the custom UI visual effect solution he/she needs.

This leads to the second weakness with Scriptaculous, the lack of documentation, written materials and discussion avenues about developing these custom UI solutions by extending parts of the framework. This may be alleviated as time goes by when more might be written on this topic, but as of now, there are few tutorials, if any, on how to create your own custom “combination effects” using the current set of “core effects” and pre-existing “combination effects”. There is also weak and few documentation on how the currently provided out-of-box "combination effects" were built upon the current “core effects”. Such documentation would have been helpful for users to extrapolate from in developing their own custom Scriptaculous visual effects.

Another weakness with Scriptaculous is that its UI widgets, such as the Autocompleter and InPlaceEditor, do not provide any support for themes and skinning unlike that of widgets from other frameworks such as the Yahoo User Interface Library.

Finally, Scriptaculous has one of the biggest total size of dependencies among other web frameworks. The standard Scriptaculous and Prototype dependency files that must be included into a HTML document to use a Scriptaculous UI object are 6 Javascript files with a total size of 261 KB. Thus, the dependency files of Scriptaculous constitute a large portion of the data transfer for simple pages using a Scriptaculous object. There are however ways to reduce this data size problem by gzipping these JS files or configuring the browser caching of such files as appropriate.

Conclusion Edit

Scriptaculous, with its strong, exclusive focus on advanced UI visual effects is well-suited for web applications needing some degree of visual effects and animations. With the framework design having extensibility in mind, Scriptaculous also serves as a great foundation and base for users to build complex and sophisticated custom Javascript visual effects. Scriptaculous was designed to target the most frequent use cases in UI animation and controls, so most dynamic web applications would benefit from the facilities provided by this framework. Its Autocomplete widget is an advanced UI control that is very commonly used across many web apps today, while the InPlaceEditor widget is a particularly interesting UI control to use in web applications and web pages that would benefit from some degree of user collaboration, such as wikis, online notice boards and shared content sites.

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.