Monday, April 28th, 2008

Coherent: Cocoa Databinding for Ajax

Category: JavaScript, Library

<p>Coherent Flickr Browser

Jeff Watkins is a fan of the Cocoa data binding model, and wanted to bring it to the Web. This lead him to create a projects three years ago, which comes out of the dark now: Coherent.

There are some fun demos, such as the Flickr Browser, and the Laptop configurator which mimics the Apple store look and feel for picking a product.

There is also some documentation so you can learn how it all works. There are tutorials on properties and bindings, how to write a widget, and details on the APIs.

Most of the magic is done via attributes in HTML itself, along with the JavaScript API. For example, you get binding:

javascript
< view plain text >
  1. userController.bindNameToKeyPath("userId", "search.content.nsid");

and then bindings happen in HTML such as:

  1. <div id="demo">
  2.         <div id="userSearch">
  3.             <h1><span>Flickr Browser</span></h1>
  4.             <label for="userName">Flickr Username:</label>
  5.             <input id="userName" type="text" valueKeyPath="search.parameters.username"/>
  6.         </div>
  7.        
  8.         <div id="userInfo">
  9.  
  10.             <div class="queryIndicator" visibleKeyPath="user.queryInProgress">
  11.                 <img src="images/spinner.gif" width="16" height="16"/> Loading user profile&hellip;
  12.             </div>
  13.        
  14.             <img class="buddyIcon" srcKeyPath="user.iconUrl"/>
  15.             <h1 textKeyPath="user.content.realname._content">Real Name</h1>
  16.             <p textKeyPath="user.content.location._content">Location</p>
  17.         </div>
  18.  
  19.        
  20.         <div id="userTagsList">
  21.             <div class="queryIndicator" visibleKeyPath="userTags.queryInProgress">
  22.                 <img src="images/spinner.gif" width="16" height="16"/> Loading tags&hellip;
  23.             </div>
  24. </div></div>

Posted by Dion Almaer at 7:57 am
5 Comments

+++--
3 rating from 15 votes

5 Comments »

Comments feed TrackBack URI

Great to see Jeff’s labor of love come live.

Lots of great stuff in there!

Comment by Tobie Langel — April 28, 2008

I’m curious to know how this compares/contrasts/integrates with http://www.jonathansaggau.com/blog/2007/03/webkit_and_cocoa_bindings.html ?

Comment by Dylan Schiemann — April 28, 2008

Dylan – your link refers to using WebKit within Cocoa applications; Coherent looks like a JavaScript framework very similar to SproutCore.

Comment by tlrobinson — April 28, 2008

Dylan, thanks very much for pointing out the WebKit/Cocoa bindings work. It looks pretty cool and I wonder whether I can hook Coherent into that when its running in WebKit.

However, as the previous poster mentioned, the WebKit/Cocoa bindings bridge only works when you’re running inside a Cocoa app rather than just any Web application.

Charles has done really great work with SproutCore, he’s just had different challenges to solve. He’s chosen to focus mainly on long-lived single page applications.

Coherent is intended to be just another tool in your box. It’s great at creating loosely coupled data-bound widgets, but it really doesn’t force you to structure your application in any particular way. You can use Coherent in a long-lived single-page app (I have for several vertical Web apps) or on short-lived pages as part of a high-traffic e-commerce Web site.

Comment by jeffwatkins — April 29, 2008

Apple was fairly diligent about getting the code off the net despite it’s Apache License. A version is on github:

http://github.com/trek/coherentjs/tree/master

Comment by trek — August 25, 2008

Leave a comment

You must be logged in to post a comment.