Building Next Generation Web Apps with Rails and SproutCore

Future web apps will be faster, more fluid, and more feature-rich. They’ll be more like desktop apps, and will need to be built in a way that gives them maximum agency without needing to consult a server. They’ll be built using web native technologies like HTML, JavaScript, and CSS (with a little Flash thrown in).

Conventional Rails techniques (ERB and RJS) can get you up and running with a prototype, but because they were not designed like a desktop framework would be, it’s very difficult to create a full-fledged client-side app running in the browser. You need to write too much glue code, the kind of code that’s very error-prone and hard to test. Too much intelligence still resides on the server.

SproutCore is a new framework inspired by Cocoa to help you build “3F” desktop web applications, and is a natural compliment to a Rails app. Using SproutCore, you can develop client and server as separate applications, each optimized for their roles. The user downloads a couple of cached, compressed, minified assets: JS, HTML, CSS, and a sprited PNG file, once, then simply talks to the Rails app using lightweight REST and JSON APIs.

Developers need a framework like SproutCore because, as its creator Charles Jolley wrote, ”...writing an app in Javascript on the web is akin to writing C on the desktop: it is just one level above the ‘bare metal’. When you start building full client apps in the browser, even simple things like displaying a list of items efficiently, can quickly consume endless hours of mind-numbing work to get it right.” Like Rails, it aims to do 80% of the hard work, so the developer can focus on the 20% unique to his or her application.

Writing a SproutCore app feels much like writing a Rails server application, because it borrows several Rails conventions. Developing client apps in this way often feels like a matter of configuring and connecting software components, and not trying to create a complicated, unwieldy code edifice. SproutCore even uses ERB or Haml templates to generate much of the JavaScript and HTML you’d otherwise have to write by hand.

In this tutorial, I will guide students through the construction of a complete SproutCore client that talks to a Rails server app. Students will implement key SproutCore concepts like Key-Value Observation and Bindings, as will learn how to efficiently develop desktop applications. The students will leave the tutorial with a better understanding of what the future holds for web application development, and with the basic tools needed to get started on their own projects.

Speaker interview with Mike Subelsky