Channels ▼

Nick Plante

Dr. Dobb's Bloggers

JavaScript Can Has MVC

August 19, 2008

There's of course a lot of buzz about "Rich Internet Applications" floating around the Internets these days, and rightly so. The web is evolving and that means shrugging off the look and feel of static website with dynamic features to deliver user experiences that more closely resemble desktop applications.

Many folks are looking to build the next generation web applications using proprietary platforms like Flash or Flex (or even Silverlight). On the other side of the aisle are open source JavaScript-based solutions, but until just recently, it's been difficult to for many folks to wrap their heads around building comparable solutions using just JavaScript. Enter SproutCore, and a whole new breed of JavaScript frameworks...

In a nutshell, SproutCore is a JavaScript-based MVC framework. Unlike traditional web-based applications where all the "interesting" stuff happens on the server and is communicated back to the client via page reloads or (more recently) Ajax techniques, a SproutCore-based application lives entirely in the browser. By delivering a more desktop-like thick client with all the necessary smarts baked in, it no longer has to rely on a continuous web connection and can be as quick to respond as a local application. It can then contact the server whenever it's actually needed, such as to save data, load new records, or other similar operations.

There are a couple exciting things about this; first of all, it gives you the ability to build incredibly responsive, rich interfaces quickly and without a lot of custom code. Who wants to rewrite the same old dialog animations over and over again, after all? Also, as Ryan Carson points out, if you run an application of this calibre inside a SSB like Fluid, it can look and act just like the desktop app that it's replacing. Of particular interest to me is the fact that SproutCore is based on Merb, a lightweight Ruby web application framework, and is easily plugged into a Rails or Merb backend (but can be used with any other server side framework as well!)

Perhaps just as importantly, Sproutcore is being touted by Apple as the next big thing. In fact, it's been used as the basis for their new MobileMe service, and they've contributed a good sized portion of this work back to the framework itself. This is good news becuase not only because it gives Sproutcore a killer app out of the gate, but also because it throws the weight of a serious software giant behind it. If Apple is taking this seriously, then certainly other companies will follow in short order.

Of course, Sproutcore isn't the only new-age MVC JavaScript framework making waves. Why, there's also the well-named WaveMaker and the forthcoming Objective-J and its Cappuccino framework. Objective-J and Capuccino are the buzzworthy brainchildren of 280North, the company behind 280 Slides, an impressive web-based variant of Apple's Keynote presentation package. They're purportedly straight ports of Apple's Objective-C and Cocoa to JavaScript. Yep, you heard that right.

For more information on SproutCore, make sure to check out their hello world tutorial and documentation; it's a great way to get a feeling for exactly what's happening here (and how you might use it!) in under 10-15 minutes. SproutCore also hosts a number of impressive open source demos written using the framework that you can peruse.

For more on Objective-J, well, stay tuned... 


Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.