SproutCore UI is a new initiative under the SproutCore 2.0 umbrella. It provides a foundation for building app-like experiences on mobile and desktop devices. This blog post will introduce you to the project, and give you a snapshot of what it will look like and how it will work.

Overview

SproutCore 2.0, as you may know, is a lean, mean framework for building super fast web-style applications without a lot of code. To deliver on that promise, SproutCore 2.0 ships without a UI layer.

Fact is, a huge amount of web apps stand to benefit from SC 2.0’s bindings system, model layer, and statechart support, but don’t need the UI layer since they defer that to the browser. For other classes of applications, a UI layer is essential for building highly immersive, very interactive applications quickly. The browser provides a set of primitive controls, and SproutCore UI provides higher level controls allowing the SproutCore community to serve both scenarios.

What

One of the main goals of SproutCore UI is to allow you to build applications that scale not just across devices of a single form-factor, but also across form-factors. That is not to say that we are preaching a write-once-run-everywhere philosophy. Instead, we will provide a set of tools and interaction models that translate between form factors. For example, a master/detail UI on a phone involves a navigation view, but on a tablet device, will translate to a split view with the master list on the left pane, and the detail view on the right pane.

To help address those goals, SproutCore UI will ship two classes of views: Structural views, and Component views. Structural views give your UI its structure: NavigationView, CardView, SplitView, etc. While Component views make your content interactive: SliderView, ButtonView, SwitchView, etc.

The main technical distinction between the two kinds of views lies in how they handle layout: Structural views have a managed layout, while Component views rely on the browser’s flow engine for their layout. You can think of Structural views as containers of other views and content, while component views will be equivalent to using <input> in your HTML as far as placement and behavior is concerned.

How

Here’s a snippet of code from SproutCore UI. It creates an instance of UI.NavigationView, anchors it to the left with a size of 250 pixels, and populates it with a collection of items:

{{#ui NavigationView controller="MyApp.navigationController" anchorTo="left" size="250"}}
    <h2>List of items</h2>
    {{collection MyApp.masterList}}
{{/ui}}

As you can see, SproutCore UI relies heavily (though not primarily) on Handlebars templates to build out the hierarchy and allows you to embed HTML within easily. If you’ve ever used Cocoa to build an application, accomplishing the same task would take either 15-20 minutes in Xcode, or tens of lines of code. Even then, if your title can span two lines, and you need to push the collection down, Cocoa makes it even harder.

SproutCore UI carries this same philosophy of making easy things trivial, hard things easy, and impossible things possible to all the other components of the system. All SproutCore UI views will be namespaced to the {{ui}} handlebars helper, and the structural views usually have a controller associated with them.

Although Handlebars templates are the suggested way to declaratively lay out your view hierarchy, you can skip the Handlebars process and build your structure in Javascript. This is not the recommended approach, however, since it could have ramifications in terms of code responsibilities and organization. However, certain use-cases require this behavior (dynamically creating the view hierarchy at runtime).

When and Where

SproutCore UI is still in its infancy— the project is 1 month old. You can follow our progress here: github.com/sproutcore/sproutcore-ui. Right now, the project is in a high state of flux, and all the APIs are subject to change. We would love to hear your feedback and concerns, so please let us know if you have any.

I am working full time on SproutCore UI and will be posting about updates regularly. We hope to be announcing a developer preview soon, so keep an eye out for that.