Over the past few months, I’ve worked more and more with jQuery while investigating removing our dependency on Prototype.  By far, my favorite part of the library is its API.  jQuery’s design genius is to use chained methods to operate on a result set.  This both makes your code very compact and it makes the API itself easily hackable as you can always add new helper methods at runtime.

This API-model makes a lot of sense for features where you need to configure a bunch of JavaScript (or DOM elements).  For example, let’s say you want to quickly find all of the headings on your page, turn them red and change their text.  It’s easy to do this in jQuery like so:

$('h1').title('Hello World!').css('color','red');

Pretty nice.  Of course, you can do a lot more complicated things with this as well, but you get the point.

Of course, this kind of API lends itself quite well to the DOM layer, but it got me to thinking about what other pieces of an API might be better expressed this was as well.  Take for example, Ajax requests.  When you think about it, an Ajax request is a one time action.  It’s really pretty clunky to have to create a Request instance and configure it just to send off a request.  We could do better.

In SproutCore 1.0, we will have a new SC.Request API that you can use to make low-level requests to a server. (This will sit beneath SC.Server, for example, replacing what you would do now with Prototype).  We’re still putting the finishing touches on this API, but its here is an example of how you might send a request to a server to get a resource:

SC.Request.get('/twitter/feeds').format(SC.JSON_FORMAT)
  .notify(Twitter.feedController, 'feedDidLoad').send();

Not bad huh?  This would request the named twitter feed, expecting a JSON format, and then notify your the Twitter.feedController when the request is finished.  Request object’s have a response property that contains either the retrieved JSON or an Error object depending on the result.

The nice thing about this model also is that you can hold onto the builder object and use it over and over again.  For example, this is how you would setup a controller so you can send the same request over and over again:

Twitter.feedController = SC.Object.create({
  feedRequest: SC.Request.get('/twitter/feeds').format(SC.JSON_FORMAT),
  refreshFeedThenNotify: function(target, method) {
    this.feedRequest.notify(target,method).send();
  }
});

You can call refreshFeedThenNotify() as often as you want and each time it will initiate a new request.  Pretty powerful for a few lines of code.

SC.Request is just one example of how we are thinking of using this DOM-builder-like API.  We are also planning API’s for configuring views, menus, and even models.  This is starting to look like a new design pattern, so we got to thinking: maybe we should provide some support for it.  So that’s what we’ve done.

Introducing SC.Builder

SC.Builder is a simple class that makes it terribly easy to create jQuery-like builders for any kind of content you want.  For example, to create your own jQuery all you need to do is:

jQuery = SC.Builder.create({
  init: function() { .. setup ... },

  // other helper methods you want here
});

Out of the box, this builder can do method chaining, supports plugins, and implements SC.Enumerable, which means you can iterate over it using typical Array methods like getEach().  All you need to do is to fill in the content-specific helper methods you want to add.

As we finalize some of these new API’s over the coming few weeks I’ll post more details about them, but I’m very excited about what SC.Builder makes possible.  Configuring your SproutCore app has never been so easy.

Tags: New Features //