stumblelog
Cappuccino: frothy and insubstantial
A few months ago I heard about an interesting attempt to create a web-based clone of Apple’s Keynote presentation software, called 280 Slides. I’m not a believer in the concept of trying to reproduce the desktop experience within the browser, so I didn’t pay all that much attention to it at the time. Then this week 280 North, Inc. — the company behind 280 Slides — released the code that forms the basis of their presentation tool as an open-source client-side web framework and suddenly a number of high profile technology commentators are giving it a lot of their attention.
It’s probably no surprise that the biggest group of interested parties are Mac software developers; the new meta-language which forms the centrepiece of Cappuccino (the name of the framework) is Objective-J, which bears more than a few similarities to the language most Mac developers use when developing for Mac OS X and the iPhone: Objective-C. The co-author of Cappuccino, Ross Boucher, gave a presentation at the Mac-oriented developer conference C4; technology writer John Gruber called it “Impressive as hell”, whilst Mac developer Scott Stevenson said it was “a very big day for Cocoa and iPhone developers looking to deploy web apps.” A further clue comes from Cappuccino’s own website, where in describing the language they write: “With Cappuccino, you don’t need to know HTML. You’ll never write a line of CSS.”
The problem here is that none of these people are web developers, and as is clearly stated by their own manifesto, 280 North aren’t encouraging people to become web developers by using their toolkit; instead they’re suggesting that you can transfer your knowledge of Mac software development to the web. This is an incredibly bad idea, for a number of reasons. Let’s start with the obvious: the web is not the desktop. Anyone suggesting the two are sufficiently analogous that you can abstract one for the other is selling you down the river. If the web was that simple, we would have solved it by now. We wouldn’t have working groups still bashing away at specs that have been in draft for years, or rogue groups of software companies creating their own specifications in lieu of progress by the de-facto standards body, or companies like Microsoft and Adobe trying to establish a proprietary layer on top of the web. The web is in a dizzying state of flux, to say the least.
Explaining why the web is such a difficult medium to ‘get right’ would be a history lesson in its own right; it was never conceived as a framework for applications, so concepts such as accessibility and platform-independence were baked in from the beginning. Using a framework like cappuccino abstracts away these issues, so if it’s not getting them right, you’re not going to even get chance to yourself. So, how well does it do? Here’s the HTML that their own Hello World generates (entirely through the DOM; if you view the source of the page you’ll see something very different).
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" style="overflow: hidden;">
<head></head>
<body style="overflow: hidden;">
<input style="position: absolute; z-index: -1000; opacity: 0;"/>
<input style="position: absolute; top: -10000px; z-index: 99;"/>
<span style="margin: 0px; padding: 0px; background: red none repeat scroll 0% 0%; position: absolute; white-space: pre; visibility: visible; left: -100000px; top: -100000px; z-index: 10000; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-family: 'Arial'; font-style: normal; font-variant: normal; font-weight: bold; font-size: 36px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;">Hello World!</span>
<div style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; z-index: 4;">
<div style="position: absolute; visibility: visible; z-index: 0; left: 0px; top: 0px; width: 1px; height: 1px;">
<div style="overflow: hidden; position: absolute; visibility: visible; z-index: 0; left: 0px; top: 0px; width: 1563px; height: 629px;">
<div style="overflow: hidden; position: absolute; visibility: visible; z-index: 0; font-family: 'Arial'; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; color: rgb(0, 0, 0); display: none; left: 0px; top: 0px; width: 12px; height: 12px;">
<img style="position: absolute; left: 0px; top: 0px; visibility: visible;" src="Frameworks/AppKit/Resources/_CPWindowView/_CPWindowViewResizeIndicator.png"/>
</div>
<div style="overflow: hidden; position: absolute; visibility: visible; z-index: 0; left: 0px; top: 0px; width: 1563px; height: 629px;">
<div style="overflow: hidden; position: absolute; visibility: visible; z-index: 0; font-family: 'Arial'; font-style: normal; font-variant: normal; font-weight: bold; font-size: 36px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; color: rgb(0, 0, 0); left: 673px; top: 290px; width: 217px; height: 49px;">
<div style="position: absolute; top: 4px; left: 3px; width: 211px; height: 42px; white-space: pre; cursor: default; z-index: 100; text-align: left;">Hello World!</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Not an auspicious start. As Joel Spolsky’s excellent article The Law of Leaky Abstractions tells us:
Code generation tools which pretend to abstract out something, like all abstractions, leak, and the only way to deal with the leaks competently is to learn about how the abstractions work and what they are abstracting. So the abstractions save us time working, but they don’t save us time learning.
By abstracting away the concepts of accessibility and semantic markup within your framework, you are left at the mercy of their techniques, and they are quite clearly very, very wanting.
The issues with Cappuccino, sadly, don’t stop there. By attempting to leverage Mac developers’ knowledge of Objective-C, they have added yet another layer of performance-sapping interpretation. On my modern MacBook Pro, the Hello World example alone caused several-second lockups in Firefox. Just how well would this fare on the older, less powerful computers that most people on the Internet use, or older browsers like Internet Explorer 6?
As the technologies in use on the web have matured, so have the design patterns used by developers in creating their websites. One of the most fundamental that has practically become dogma is that of separation of concerns; that the respective layers of presentation, content and behaviour should be treated as separate entities, and managed accordingly. This isn’t even a concept that was invented by web developers; the MVC pattern is as old as me, having been first conceived way back at Xerox PARC. The benefits to this are enormous; not only is your code easier to manage and maintain, but it’s easier to give different parts of the project to different people and thus work on more complicated problems with larger teams. Cappuccino throws this concept of separation out of the window, however:
var label = [[CPTextField alloc] initWithFrame:CGRectMakeZero()];
[label setStringValue:@"Hello World!"];
[label setFont:[CPFont boldSystemFontOfSize:24.0]];
Not only your content, but the presentation of that content too is declared within the behaviour layer of your application (also note the lack of units; presumably Cappuccino only believes in pixels?). Just how you integrate this with your server-side application logic I can only wonder (or dread).
Words fail me when confronted by monstrosities like this, particularly when they gain the attention and mindshare of otherwise respected technology pundits and writers. I think my friend Nicholas put it best:
Cappuccino looks like a stupid idea, wrapped in a web 2.0 logo, wrapped inside a javascript framework, wrapped in shit, battered, fried and served with a silly hat.
