Stanford University Wiki

The Cappuccino framework

229pages on
this wiki
Add New Page
Talk0 Share


The idea behind Cappuccino is to provide a framework that makes it easy to develop online applications similar Cocoa applications for Mac OS X. It provides many of the same features that the Cocoa framework provides, which means that simple basics that many applications use (drag and drop, for example) is implemented for you.


Cappuccino is built on top of Javascript, so it takes the Objective-J code that you write and translates it into Javascript. Because Objective-J is a superset of Javascript, all of the features of Javascript are still available. Objective-J code has syntax that is similar to Objective-C, and the APIs for Cappuccino are modeled after the Cocoa frameworks.

Among other features, Cappuccino provides functionality for handling: drag and drop, copy and paste, undo and redo, graphics and animation, color and font selection, document management, cookie management, event handling, and many of the usual UI controls (like buttons, toolbars, menus, and text views). It also implements many of the classes that are available in Cocoa, such as advanced string, array, and dictionary classes.

Cappuccino applications use Javascript and other technologies that are already available in the browser, so users do not need to install anything in order to use them. In fact, Cappuccino applications are compatible with nearly all the popular browsers. Writing applications for it is very easy: write Objective-J code and save it in a .j file. In the HTML file, add a link to the Objective-J javascript framework (as a <script> element). Then call a function (defined by the framework) that imports the necessary .j files. Upon opening the HTML file, the application will launch after a short load.


This is very good for building applications that look and behave like desktop applications, but in the browser. This makes it easier to develop applications where most of the work is done on the client side rather than the server side.

280slides is a good application built using Cappuccino by the creators of Cappuccino. This application imitates Keynote, and allows you to build a presentation in the browser. The presentation can be downloaded, saved on the server, and reloaded from a saved file. The advantage that this has over a desktop application is that anyone can use this (regardless of operating system), and you can work on it anywhere that you have a computer and access to internet. You're not tied to a particular computer, and you don't have to carry around the files unless you want a backup.

Building a full-fledged presentation such as 280slides would be a quite difficult undertaking without Cappuccino, particularly implementing the look and behaviors of the controls from scratch. Having Cappuccino handle the basic functionality needed to create an application means that the developer can focus on the interesting things, like implementing the actual behavior. It abstracts away the lower level details. Therefore, creating an application like 280slides is, not simple, but certainly easier as a result.

Unique AspectsEdit

The most unique part is that it imitates the language (Objective-C), API (Cocoa), and look and feel of Mac OS applications. It takes a language, Objective-C, that looks nothing like Javascript, and modifies it into Objective-J so that it can be compiled into Javascript.



The best thing about Cappuccino is that it doesn't require you to know about HTML, CSS, or even the DOM. For someone that is transitioning from desktop applications to web applications, this can be very useful. It implements a lot of the APIs from the Cocoa frameworks, which makes it very easy to learn if you already know these. Cocoa has features like drag and drop, copy and paste, and other features built in that are also useful across a multitude of web applications. This allows you to manage these actions at a higher level, rather than implementing them from scratch using Javascript mouse events. Because it imitates Cocoa in their APIs and paradigms, you know that the concepts and style of API interactions have been well thought out and tested.


Since the look and feel is the same as that of Cocoa programs, including toolbars, controls, scrollbars, it is easy for the user to learn how to use your program, if they've used Mac OS in the past. This makes it more intuitive to learn because the user already has some familiarity with the controls and has some expectation for behavior already in place. This lowers the amount of effort it takes to learn your application.

Porting CodeEdit

While you can't take code written for Cocoa directly and use it in Cappuccino, it would be relatively easy to adapt the application, as opposed to writing it from scratch. That would be one way to create a desktop application as a web application, if the developer wanted to do so, without requiring an overwhelming amount of work.

Another minor, but nice, feature of Cappuccino is that there are plug-ins for popular Mac OS text editors (SubEthaEdit, TextMate, VIM, and xCode) to add syntax highlighting for Objective-J. This makes it easy for application programmers to switch over to developing on Cappuccino.


Increased OverheadEdit

Most of the work is done on the client side, and applications often have a lot of things going on. Adding a layer of abstraction (Objective-J objects to Javascript) also adds to the overhead. The result is that the application can be slow, particularly if the user's computer is slow.

Complex WebsitesEdit

It is not designed to make full-fledged web sites, particularly ones that have lots of interaction with the server and page reloads. Complex and interactive sites like Facebook or Flickr would not be suitable at all. It's meant to make applications that do one thing at a time (for example, one can imagine Gmail or Google Maps being built using Cappuccino).

Not Fully DevelopedEdit

Cappuccino is still very early in its development stages, so some parts are still unimplemented (even if they appear in the documentation), and this can be frustrating to develop for. Also, it does not have all the functionality of Cocoa, so porting a Cocoa application would be more difficult if you used anything that it does not yet have implemented. It is even more dangerous if a feature you need is documented by unimplemented, since finding this out halfway through development could be disastrous.

Different Underlying ModelEdit

Because it uses Javascript to mimic the behavior in Cocoa, the underlying implementation is different, and it is sometimes forced to produce the desired effect in awkward ways. For example, a CPTextField has two layers: the text field, when the user is editing, and the display layer. When an application changes the string while the text field has focus, the new string is drawn on top of the old one, rather than replacing the old one, because the two layers are out of sync. In order to resolve bugs like this one, the developer must build a new mental model of the implementation.


Cappuccino is best suited for applications that have limited interactions with other users or the rest of the internet. It works well for focused, single-purpose applications (like photo-editing, document editing, etc), where the user does not need functionality for exploring content built by others. In other words, it is best for building applications that imitate or replace desktop applications.

Actually, that would be a great addition as? well. I was takilng about one or more people being able to control it from the internet via statistical anaysis. What would be even more impressive is if the program learned through AI methods. As an example of a fun alert, a group of people on Facebook and a group on twitter could cause the eyes to go cross eyed if N people from each responded to the same tweet or post. A simple, statistical control. N (left) >n (right) = Eyes left. A poll.

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.