Entity view (Content)

Five tips when using SproutCore for your web application

By chade
Oct. 25, 2012

Selecting SproutCore as your framework of choice when building a web application certainly brings a lot to the table. But what are some highlights of the framework and what makes SproutCore standout? Over the years, I've found many powerful resources bundled into SproutCore. Let's take a look at 5 features of SproutCore and briefly explore how to use them for your next application.

1) SproutCore, by default, uses the tried and true MVC design pattern. Taking this pattern a step further, SproutCore provides your application with statecharts. Getting started with statecharts is as simple as passing --statechart to sc-init.

$ sc-init myAppName --statechart

Using the above command to create your application sets your RootResponders defaultResponder to your applications statechart.

// main.js // var statechart = myAppName.statechart; SC.RootResponder.responder.set('defaultResponder', statechart); statechart.initStatechart();

Statecharts allow you to have greater control and understanding over your applications logic, plus a more organized code structure and provide easier debugging. All of which help you build an application that will scale.

2) Extending the thought of well-organized code. SproutCores CLI provides a frameworks generator as well.

$ sc-gen framework myAppName_framework

This command generates a new directory called frameworks in your applications root directory. Inside the frameworks directory is your custom framework. A framework can be custom code that extends native SC objects such as a SC.Button and SC.DataSource (to name a few). What this allows you to do is override default behavior of SproutCores objects, create custom UI controls, and tweak SproutCore to fit your teams specific needs. Utilizing the framework directory also separates your api away from your application specific code. Also, it's good practice to include SproutCore in your frameworks directory. You never know when you need to peek inside the inner workings of SproutCore. When using the framework directory. Don't forget to require it in your applications buildfile as demonstrated below:

# CONFIGURE FRAMEWORKS config :all, :required => [:sproutcore, :myAppName_framework]

3) The data store/data source. Hands down the most powerful concept behind SproutCore. SC's datastore is an in-memory database that has ORM-style schemas, change buffering, and handles the life cycle of a record. It handles data loaded from your server, stores data as hashes, and interacts with your data using SC.Record. The advantage of using the datastore is it reduces the amount of http requests needed to interact with your servers api. By managing the life cycle of a record, the datastore allows your client-side application to move through a CRUD cycle without touching the server until it is time to commit your changes. Furthermore, utilizing the datastore in such a way increases an application performance by allowing it to move freely throughout user interaction and reduces the amount of latency accumulated with http requests.

4) Runtime: the foundation of SproutCore. Runtime provides a class system through SC.Object, Key Value Coding (KVC), Key Value Observing (KVO), bindings, Enumerables, Arrays, Sets, and the run loop. Essentially, all classes in SproutCore inherit from SC.Object. Runtime enables the elegant way of subclassing SC.Objects as shown above in frameworks. Our universal accessors get()/set() can be found in runtime as well:

getPath(propertyPath) setPath(propertyPath, value)

Bindings are a powerful way to connect properties on two objects together. Thus allowing updates to automatically occur when one property changes. The most common place bindings are used is to connect views to controllers or to connect controllers to controllers. When using bindings with views and controllers, bindings provide a low cost, fast and efficient way of controlling the DOM.

5) Whitelist: lighten your application and only use the minimum amount of code needed from SproutCore. Out of the box SproutCore is fast but it also provides you a lot of api's. It is common that your app won't use all of the SproutCore framework. So why load it? Enter Whitelisting. To whitelist your app, create a file called whitelist.json and place it in your applications root directory. A whitelist is a way to tell your application what you need to run. In between a hash {}, you state what files you need loaded. Below is a short example:

{ "/appName": ".*", "/sproutcore/jquery": ".*", "/sproutcore/foundation": ".*", "/sproutcore/core_foundation": ".*", "/sproutcore/datastore": ".*", "/sproutcore/ajax": [ "system/request.js", "system/response" ], "/sproutcore/desktop": [ "core.js", "render_delegates/helpers.*", "render_delegates/collection.js", "render_delegates/panel.js", "render_delegates/toolbar.js", "render_delegates/button.js", "mixins/collection_row_delegate.js", "mixins/collection_view_delegate.js", "panes/modal.js", "panes/palette.js", "panes/panel.js", "system/key_bindings.js", "system/drag.js", "views/button.js", "views/scroll.js", "views/list.js", "views/collection.js", "views/toolbar.js" ], "/sproutcore/runtime": [ "core.js", "ext/array.js", "ext/function.js", "ext/string.js"...}

Whitelisting your application helps reduce the overall size of your application and in return speeds up the load time greatly. To strip your build of these files use the following commands (each respectively):

// start your server with whitelisting $ sc-server --whitelist=whitelist.json // build your application with whitelisting $ sc-build --whitelist=whitelist.json

Well. There is it is. My personal top 5 tips / features about SproutCore. Although brief, I hope you were introduced to new concepts. As time goes forward, I will be posting more in-depth information on the topics described. Happy coding, Chad Eubanks

Post Tags: