Popular JavaScript Framework Libraries: qooxdoo and SproutCore / Page 3 | WebReference

Popular JavaScript Framework Libraries: qooxdoo and SproutCore / Page 3


Popular JavaScript Framework Libraries: qooxdoo and SproutCore [con't]

Other Relevant Projects

Rich Ajax Platform (RAP)

The RAP project is used to build rich, Ajax-enabled Web applications in the Eclipse IDE, using JFace, Eclipse's Standard Widget Toolkit (SWT) API, and qooxdoo for the client-side presentation.

qooxdoo Web Toolkit(QWT)

QWT is similar to Google Web Toolkit, but with all of qooxdoo's high-quality widgets. You write your qooxdoo application in Java, and QWT translates the client part to JavaScript for you.


Pustefix is a Web application framework that features an XML/XSLT-based view generation and a MVC back-end architecture. The front-end is built with the help of XSLT templates and can include parts containing HTML or XML code transformed into the final HTML output. The back-end allows for the creation of reusable handler classes, which can be combined into complete pages.


Created by a small company called Sproutit in 2007, SproutCore became a major player when Apple announced at WWDC earlier this year that much of MobileMe was built using SproutCore. Apple has contributed greatly to the project as part of a Web 2.0 initiative. Their goal is to assist developers in creating Web applications with advanced capabilities and the feel of desktop applications, using the MVC paradigm and JavaScript. As such, it tends to favor the design of single-page Web applications which mimic desktop applications presented in a window.

The SproutCore Application Framework provides pre-built standard desktop application features such as:

  • drag-and-drop
  • undo/redo
  • keyboard shortcuts
  • sophisticated user interfaces
  • localization of both text and images
  • a rich internal data model

SproutCore also comes with a complete set of command line build tools that automatically assemble and optimize your HTML, CSS and JavaScript. During development, SproutCore is hosted inside the Merb server in order to deliver JavaScript, CSS, HTML, images and other resources. When you're ready to deploy your SproutCore application, sc-build is used to generate a static directory of files you can upload and serve from any Web server.

The SproutCore download contains development tools, testing harness and lightweight HTTP server all bundled into the RubyGems packaging and distribution system. Ruby must be installed in order to use the development tools but the final product is one or more JavaScript files, so Ruby isn't a requirement for production use of SproutCore.

Creating a SproutCore Project

To create a new SproutCore project, just switch to the directory that you want to work in and type the following:

This will create a new project with all of the basic development files you'll need. The folder with the project name you specified will be created in a directory called "clients". The clients folder is where all the SproutCore apps for a site are stored. In Sproutcore, an application consists of all the components that make up a Sproutcore Web page. You can view your Web page on your local server by typing http://localhost:4020/<project folder name> in your browser's address bar. At this point it would contain a SproutCore welcome page to show that it was created.

The Model-View-Controller Architecture

SproutCore applications use the model-view-controller (MVC) architectural pattern to separate the domain objects (called models), from the user interface objects (called views).

Modern Model Layer

A Model object is an ordinary class meant primarily to store data (usually persistent data), computed properties, relationships to other objects, along with various transformations that are valid on that data.

In SproutCore, you define new models using the sc-gen tool:

sc-gen model <app name>/<model name>

would create the following JavaScript file:

clients/<app name>/models/<class name>.js

View Helpers

Views are JavaScript classes that manage part of the Web page for you. They perform such tasks as the creation of DOM elements, event handling and animations. SproutCore comes with a useful set of view helpers that can automatically generate both the HTML and JavaScript view components for you. All HTML, CSS, images and other static resources for a client are stored inside a folder called english.lproj. Different language files can be generated to support localization. It's in this folder that you'll find the body.rhtml template. The extension is .rhtml because SproutCore uses a templating language called Erubis that is based on Ruby. Don't worry. You don't need to know Ruby to use SproutCore templates. Here's what a typical view helper might look like:

Advantages of Key-Value Coding (KVC)

In typical object-oriented languages, public object attributes are accessed using a "dot accessor" such as thing.title or via an accessor method, such as thing.getTitle(). In a key-value coding compliant system, access happens indirectly, via a key (e.g.: thing.get('title')). Key-value coding (KVC) allows for the notification of observers and delegates that a value is going to change or that a value has changed.

Key-Value Observing (KVO) and Bindings

In a KVO-compliant system, an object can be notified about another object's pending or processed property changes. With respect to an MVC system, the need is usually to link UI controls to properties of domain (data) objects so that consistency is maintained between the presentation layer and domain objects. The binding between the two layers acts as a kind of 'glue.' Here's our label again with binding attached:

Binding is great because SproutCore keeps the model and GUI elements in sync at all times.


The role of the controller in MVC architecture is to receive and translate input to requests on the model or view and is typically responsible for calling the model's getter and setter methods. Sproutcore uses JavaScript objects to perform these functions. Use the sc-gen tool to build a controller:

sc-gen controller <app name>/app

This would create a controller in the clients/<app name>/controllers/app.js named <app name>.appController.

Unlike most object-oriented systems, which create classes using overloaded constructors, in SproutCore you create new objects by calling create() and setting the properties you want directly on the new object. This is much faster in JavaScript and considered by many to be more convenient for building JavaScript applications. In a newly created controller, we would append the following code beneath the TODO line to add a property and a method:

SproutCore defines YES and NO constants to represent the true and false boolean values; they can be used throughout the Framework because it makes code more readable. If you prefer true and false you can use those instead. Here's a simple observer that updates the value of the greeting. Add the following code in the Controller:

The hasGreetingChangedObserver() function will observe the hasGreetingChanged property on the receiver (the label). You can use observers to observe practically any object you like just by naming the path. For instance, we could create a checkbox to use it:

The checkbox's value property is now bound to the hasGreetingChanged property. This means that whenever the checkbox is clicked, the hasGreetingChanged property would update causing its observer to fire, which would in turn change the greeting property and update the label.

Distributing Your Applications

When the time comes to release your Sproutcore application, you can 'compile' it into a set of static, cacheable files using the SproutCore build tool, sc-build. The resulting files will consist of Javascript, XHTML, and graphic files in a relatively compact, localization-friendly package.

We've looked at some excellent Frameworks so far, but don't make any decisions just yet, because next week, we'll be completing our overview of the top dozen JavaScript Frameworks with Microsoft's ASP.NET Ajax Framework.

Original: December 2, 2008