Cappuccino’s FlickrDemo in 45 lines of jQuery
When I first saw 280 North’s “280 Slides” application, I have to admit I was very impressed. They built a truly native-feeling (well, if you’re on a Mac) tool on the standard web platform. Not an easy feat, and clearly some big brains operating on the problem.
But the more I read about their toolkit (Objective-J), the more unsettled I felt. It’s the same feeling I get when I see tools like Flex. These are some seriously complicated development environments, meant to abstract away to the fundamental building blocks of the web.
When 280 North released their Objective-J toolkit a few days ago, called Cappuccino, I poured through their documentation and demos to get my head around what they had built. And it’s very impressive. But as a jQuery addict, I didn’t like their dismissal of it as at tool for making small adjustments to a web page. I feel that you can build a full-fledged web application in jQuery just as simply — or simpler — by embracing HTML/CSS as a layout engine, and JavaScript as a scripting language.
So I tackled re-implementing their FlickDemo application (several hundred lines of Objective-J) using jQuery and jQuery UI. It took about 3 hours to build, and ended up being about 45 lines of code (plus the frameworks, of course), and just under 200 lines of CSS declarations.
What I didn’t do: I didn’t bother hacking the CSS to work in Internet Explorer. It’s not that it couldn’t be done — jQuery supports it just fine — I’m just lazy. So you’ll need a modern WebKit or Gecko browser to see the demo. I also didn’t implement the drop shadows that Cappuccino uses on their images.
Also, the jQuery version doesn’t take over all you keyboard shortcuts, so you can still navigate around in your browser.
Download the source here: flickrDemo-jQuery.zip
Update: Due to popular demand, I’ve changed the behavior of the slider so the image size updates in realtime. Total change: one word.
Update 2: Alexander Simmerl was nice enough to provide an upgrade to the image loading, bulking up the code by a few lines but greatly improving the load animation. In the comments, dak contributed a 2-line CSS fix for the inline-block layout problems in FF2 and IE7, which I’ve also merged.
I think this is as far as I’ll take the demo. Ultimately, it’s not that compelling of an application (but it does make a good demo). To respond to some of the criticism I’ve read, my point was not to argue that jQuery was a drop-in replacement for Cappuccino. Clearly there’s a ton of nuances to the Cappuccino runtime that would need to be carefully reimplemented if we wanted a 100% identical demo. My point is that it’s quite simple to do web application development in jQuery, and something as heavy as Cappuccino is not the only option (and in many cases, probably not the best option). I see Cappuccino as a kind of AIR-in-reverse (native apps that run in a web browser!) and possibly an interesting technology path for coders that are already familiar with Cocoa but don’t have experience with the nuances of direct web development. One thing I’m sure of is HTML/CSS/JavaScript are not going anywhere… they may be complimented by frameworks like Cappuccino, but the core will remain.
Main Posts
Podcasts
Excellent post and thank you so much for debunking some of the FUD spread by competing libs. I guess we have to be flattered that jQuery got mentioned. It shows how much an impact it has on the web dev space.
I’m kinda sad though that 100s of sites using jQuery (http://docs.jquery.com/Sites_Using_jQuery) aren’t actually building web pages. They’re just adding some pixel dust to their sites.
Rey - jQuery Team
Actually, your jQuery version worked better for me than their original. In the Cappucino version, the ‘Add Photo List’ function doesn’t work for me (OSX Firefox 3).
Another improvement over the original is that your size slider works smoothly and happily, whereas theirs tries to resize during movement so is laggy as hell.
Yoz: that’s true, I hadn’t noticed that difference. jQuery UI would support real-time updating, but it would probably introduce the lag you’re describing.
Cappuccino also built their own scrollbars, where I used the standard browser scrollbars — also much faster.
Very cool - it’s a very effective use of jQuery. Right now the Cappucino version you link to doesn’t load correctly at all, giving me just a photo-less browser window. That slider also works great - not something from jQueryUI I’ve ever used, but it’s done very well on your demo.
I’m currently making something roughly equivalent to Finder using just jQuery and CSS (also not bothering for <=IE7) and it’s been a fairly straightforward process as far as the jQuery code is concerned. I don’t have all of the AJAX calls quite rigged up yet for the drag-and-drop stuff, but so far it’s only about 75 lines of code, and about half a day’s work.
Anyone saying that you can’t build web apps with jQuery is either lying or doesn’t know how to use it.
Two of the files that would be needed with most apps kick in at 1Mb between them after unzipping. That seems excessive to me. Even YUI wouldn’t subject people to that. And as for their assertion that jQuery can’t handle apps, that’s ridiculous. And after all that the photos didn’t even load
It’s interesting to note that your jQuery version works perfectly on my iPod Touch, while the obj-j one hangs and never loads. Only issue is the slider doesn’t work right; the iPod highlights the whole thing when I click on it.
Thank you for pointing this out — 280 Slides is indeed impressive, but I’m having the same reservations about Objective-J that you state here. And inventing an entire new language to run in the browser? Why in the world? Javascript isn’t *that* bad.
As a bonus, your rebuttal is an excellent example of how to write a small jQuery app. Great code!
Wow, I really need to start using jQuery for more than dropdowns and slide-in effects. It obviously doesn’t take all that long to make a compelling application.
@#3 Yoz: Well, Original version scales as you drag… in real-time! That’s way cooler than rescaling images after the sliding stops since you have no idea how the things will look like once you drop the slider.
brilliant.
cappuccino’s intent is not bad though, but you’re right. it seems too complext.
Both versions seem to work for me (Firefox 2 on Linux) but with some bugs.
In the Cappuccino version, the highlight rectangle around the currently selected image doesn’t resize when the image resizes. Also, if I let go of the mouse button during a scrollbar drag while my mouse is outside the browser window, then move the mouse back into the window, the scrollbar thinks I’m still dragging it, but as far as I can tell, that’s a browser problem — there’s no way I know of for the JavaScript to know I’ve let go of the mouse button. (If you use native scrollbars, the problem goes away for scrollbars, but it doesn’t go away for other drag-and-drop things.)
In the jQuery version, all the images are in a single column down the left side. I haven’t looked to see why that is. Do you see that?
Kragen: the layout problem you’re seeing in FF2 would be due to my use of the inline-block display property which FF only supports as of version 3. I should have been more specific in my compatibility notes. I’m sure there’s a workaround, but I wasn’t in the mood to fight layout bugs this morning
@ben
Not having to fight layout bugs is one item that makes Cappuccino attractive. Another is being based on an API (Cocoa/NeXTstep) that’s had a decade to become polished and is arguably the best application framework.
Don’t want to fuel any flames, just pointing out that there are some benefits from building a layer on top of Javascript and having dependencies on hefty support libraries.
In Safari 3.1.2 the Cappuccino version steals my key strokes, preventing me from changing tabs using the Command-} and Command-{ keys.
Yay jquery!
Just tested both demos under Opera 9.52 (Win) and what a difference in speed and smoothness with jQuery! On second thought, I’m not surprised.
There are two things we should take into account tho, and I’m not taking sides here, just trying to contribute to the discussion.
- The Cappuccino example works just like iPhoto, when you drag the slider, it does not just resize the images by increasing relative height and width like your jQuery script does, it zooms the images in keeping them centered (both vertically and horizontally) in their own “cell” and each row of cells in its column, until the bounds of the image (and cell) are bigger than the column’s width, therefore moving the image to a new column so it fits. I think that’s a more complex calculation and so takes more time to be processed by the JS engine
- Obj-J or whatever you call the language behind Cappuccino is meant for creating very complex, scalable software (like 280 Slides), with easy handling and desktop-like handling of the project, something I don’t think jQuery can do all by itself. So they have very different publics and objectives, let’s not start comparing them - Cappuccino did wrong by talking about jQuery, but at least they’re saying what is the difference, and not what is better or worse.
Here’s an ugly (invalid CSS) fix that makes it work in IE7 and lower and Firefox 2. Just replace “display: inline-block;” with these three lines:
display: -moz-inline-box; /* Firefox 2 */
display: inline-block; /* Firefox 3, IE8, etc. */
*display: inline; /* IE7 and lower; star hack. */
The last line, which starts with an asterisk (a syntax error), is only recognized by IE7 and lower. It takes advantage of IE’s broken box model to emulate inline-block using an inline element with hasLayout. By setting the width, you’re already triggering hasLayout, so all we need to do is make sure IE sees the element as inline. The star hack is used to hide this change.
As an exercise in learning I took your jQuery demo and swapped out the javascript with Prototype and Scriptaculous javascript. You can find the result here:
http://www2.hawaii.edu/~dburger/demos/prototype/flickr/flickr.html
I’m running Firefox 3 ( Ubuntu ) on a 333 MHZ Pentium. Performance is a big issue for me! The JQuery version loads a LOT faster.
I’ve messed around with a few other libs (YUI, Moo, Dojo) but I like JQuery the best — clear and easily understood syntax, small library footprint and good performance. Plus a wide array of plugins and an active, friendly developer community.
Fantastic example! Thanks for taking a few hours out of your day to work on this.
Cappuccino definitely has some fantastic technology - but to count jQuery out as script-kiddie is a plain lie.
I just wrote up a post that goes into depth about what Cappuccino is, when to use it vs jQuery, and why. Love your thoughts:
http://welcome.totheinter.net/2008/09/07/cappuccino-taking-the-web-out-of-web-development/
Cheers