Introduction to SproutCore

What is SproutCore?

At WWDC 2008, Apple announced MobileMe - a massive overhaul to their .Mac service that included a desktop-like user experience running inside a Web browser. One of the more notable parts of the MobileMe launch (aside from the downtime) was the UI. The look and feel was not only as refined as that of Mac OS X - it was in some cases better.

For example, the MobileMe Calendar application is a step beyond iCal where user experience is concerned. This is especially interesting because iCal is a Cocoa application, while the MobileMe Calendar is powered by Javascript.

SproutCore is an open source Ruby + Javascript + XHTML framework intended to make thick-client (the client part of client-server) RIA development fast, fun, and consistent. It's influenced heavily by Cocoa and Objective-C and incorporates the conventions, patterns and domain language of those venerable technologies while keeping the flexibility of Javascript and consistency of XHTML. This means that you can release SproutCore applications that leverage any server technologies you'd like - or none at all.

Those of us with a lot of experience developing RIAs have always worked inside a plugin. The greatest impact of SproutCore will be in giving developers a consistent environment that requires no proprietary, closed plugins. Instead, our RIAs become transparent applications living inside a Web browser, developed using the most widely-distributed language in existence. It's powerful stuff and should nicely supplement toolkits everywhere.

Out of the box, SproutCore delivers stunning UI elements that are easily extended, enhanced (or 'skinned'), and localized.

This introduction is not as much a tutorial as an overview. For more comprehensive tutorials, please refer to the official SproutCore site.

Getting Started

SproutCore is available via the RubyGems packaging and distribution system. It's important to note that Ruby is required in order to use the development tools but that the final work product is simply one or more Javascript files. That is, Ruby is not a requirement for production use of SproutCore. In fact, it's entirely possible to develop SproutCore applications without the suite of Ruby-based tools provided by the project. That said, much of the pleasure of SproutCore development comes from the development tools, testing harness, and lightweight HTTP server bundled into the gem.

Installation

Assuming you already have Ruby and RubyGems installed, obtaining SproutCore is as simple as running:

sudo gem install sproutcore

Design Patterns

Cocoa developers leverage many well-known design patterns that should be relatively familiar to RIA developers. Certainly, the implementation is different than in Actionscript due to the nature of Objective-C, but the ideas, idioms, and integration strategies are portable. This is evident by the heavy influence Cocoa has had on SproutCore. Though Objective-C and Javascript are very different languages, the SproutCore team has taken the most beneficial conventions from Mac development and ported them to Javascript.

MVC

SproutCore applications use the model-view-controller (MVC) architectural pattern to separate the domain objects, or models, from the user interface objects, or views. The choice to use MVC makes sense when you consider not only its popularity in RIAs but also that Cocoa is a framework with its roots in the invention of the MVC pattern.

Delegation

The use of delegates to act on behalf of objects is fundamental to the way SproutCore handles events and is inspired by the importance of delegation in Cocoa. Delegation is the pattern that makes elegant, lightweight composition possible in browser-based Javascript applications. This is even more true when you look at the fast, polished, advanced UI controls included in SproutCore.

Key-Value Coding (KVC)

In typical object-oriented languages, public attributes of objects are accessed using a direct accessor. In most languages, this is 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. Old school Flash developers might recognize this pattern from early Actionscript. For example, thing.get('title'). Mutators follow the same pattern: thing.set('title', 'My New Title').

In SproutCore, key-value coding (KVC) allows for pre- and post-access callbacks, including the notification of observers and delegates that a value is going to change (so that a delegate might veto the change) or that a value has changed (so that UI elements might update their controls with new values).

Key-Value Observing (KVO) and Bindings

A KVC-compliant system allows an object to observe discrete properties of another object and be notified of any pending or processed changes. The value of this in an MVC system is usually in the need to link UI controls to properties of domain objects so that consistency is maintained between the presentation layer and domain objects. State changes to "observed" values notify the appropriate objects of the new state, providing a lot of valuable 'glue' code for free.

One powerful feature of KVC and KVO is the ability to bind objects to computed or derived properties as well as those considered 'first class' citizens. For example, you may have a domain object, person with properties for first_name as well as last_name. Imagine that you'd like a logical derivation of a full_name property. KVC and KVO make this possible, and SproutCore provides great support for both.

Managed Objects

Given that the focus of SproutCore is developing rich client applications, it should follow that a local means of storing collections of domain objects is provided. As in Cocoa applications, collections of similar objects can be managed using object controllers. You can think of this as an in-memory repository of objects that provides collection-level KVC and KVO, enumeration, and searching.

If your UI contains, for example, a table, you can bind a collection of objects to the contents of the table. When a new object is inserted in the collection, a new row will show up in your table. When you delete a row from your table, the object that row represents can be removed from your collection. And of course, the extensibility of SproutCore allows you to extend object controllers to save collections to your server with AJAX, for example.

Other Patterns

An article covering all the common design patterns and idioms used in SproutCore would be a bit exhaustive (and exhausting), but the important point is that many elements of SproutCore development will be familiar not only to seasoned Cocoa developers, but to folks accustomed to developing RIAs with Flash/Flex/AIR and similar tools.

In addition to the material covered here, the following patterns are leveraged nicely by SproutCore:

• Notifications
• Observers
• Timers
• Run Loops

Ruby Tools

After installation, you can create new SproutCore projects using the sproutcore command-line tool. The tool accepts a single argument representing the project name and will generate an application skeleton with the necessary support files (libraries, configurations) for a development environment.

To generate new libraries, views, controllers, localizations, models, tests, or clients, you can use the sc-gen generator tool.

When you're ready to distribute your application, you can build a static package using the sc-build tool from your project directory.

SproutCore Development Server

To facilitate rapid, portable test-driven development, SproutCore includes a lightweight HTTP server that runs on your local system. You can start up your local server by changing to your project directory and running the sc-server command. To quit, cancel the process using control + c. While the server is running, you can access it in a browser at http://localhost:4020/

Unit Testing

Like any great development framework, SproutCore includes robust support for unit and functional testing using the JSUnit test harness for Javascript.

To view the test dashboard for the SproutCore framework while the SproutCore server sc-server is running, go to http://localhost:4020/sproutcore/-tests. The test coverage for SproutCore is fairly comprehensive and should make understanding and extending the project relatively safe.

Distribution

When a SproutCore application is developed enough to meet release requirements, you can 'compile' your application into a set of static, cacheable files using the SproutCore build tool, sc-build. The resulting files will contain no Ruby code, but will rather be Javascript, XHTML, and graphic files in a relatively slim, localization-friendly package.

AppKit Influence

The UI controls provided by SproutCore are excellent and will surely turn up in many RIAs released in the near future. The influence of the UI toolkit portion of Cocoa (AppKit) on SproutCore is clear.

AppKit controls include familiar elements things like buttons, sliders, radio buttons, scrollable areas, tables, trees, etc.

SproutCore Controls

You can check out the sample controls shipping with the current version of SproutCore by visiting the sample controls gallery. Some elements are still considered unstable or in development, and I'm sure the SproutCore team would love help.

Read more from Toby Boudreaux.