Create a single page web application using SproutCore – Part I

There has been such an uproar of web frameworks nowadays. It has challenged the minds and spurred creativity. Such a framework is SproutCore – an MVC web app framework for developing apps in JavaScript that run inside a web browser. Go on and read about it on the SproutCore Wiki.

So, why did I get excited about a JS-based web framework? Well, one it is a web framework and I am in the business of building web applications. Secondly, the creation of a SproutCore application has a feel of creating Rails applications. You will see what I mean in a minute.

Next, I will create a small demo application that will demonstrate the characteristics of a SproutCore application. The demo application will be build in a series of posts, so do come back for the whole series. Now, let’s get started.

Part I – Getting Started

Step 1: Install SproutCore: I am on Windows Vista and I installed SproutCore using the following command:

$ gem install sproutcore

You can look at the SproutCore download page to find instructions for your OS.

You can make sure you got SproutCore installed properly by checking it’s version:

$ sproutcore -v
sproutcore 0.9.23

You can get a different version number based on when did this exercise. That takes care of the install.

Step 2: Create our demo application: We will create a Favorites application, which is nothing but a simple list of favorites (nothing as fancy as del.icio.us), but kind of the same concept. So, we go ahead and run the following command:

$ sc-init scfavlist
      create
      create  clients
      create  frameworks
      create  lib
      create  public
      create  log
      create  README
      create  sc-config
  dependency  client
      exists    clients
      create    clients/scfavlist
      create    clients/scfavlist/english.lproj
      create    clients/scfavlist/core.js
      create    clients/scfavlist/english.lproj/body.css
      create    clients/scfavlist/english.lproj/body.rhtml
      create    clients/scfavlist/english.lproj/strings.js
      create    clients/scfavlist/main.js
      readme    ../README
Your new SproutCore client application has been created.  To access your application, just
 start sc-server and visit your client name in the web browser.

If you want to change the deployment settings for your application edit the sc-config file
 to get started.

First thing to note is the similarity to creating a Rails application. I told you so. Gives me a warm feeling. The application generator creates a basic app structure for us. Not only that, SproutCore makes it even better as the application can be run immediately, by running the following command:

$ cd scfavlist
$ sc-server

Running SproutCore Build Tools v0.9.23Welcome to SproutCoreLoading SproutCore bundles in c:/MyStuff/SvnCode/GitRepo/scfavlistmerb : worker (port 4020) ~ Starting Mongrel at port 4020merb : worker (port 4020) ~ Successfully bound to port 4020

And, voila, you should be good to go. If you see the above screen, skip the next section and jump to Step 3, otherwise read on…

But, hold on. . I did not have a smooth experience as above. Not that you will have a similar issue, but if you do, I have a solution. First, let’s retrace back and see what problem I got:

$ cd scfavlist
$ sc-server
c:/ruby/lib/ruby/gems/1.8/gems/extlib-0.9.11/lib/extlib/time.rb:26:in `remove_method': met
hod `to_time' not defined in Time (NameError)
        from c:/ruby/lib/ruby/gems/1.8/gems/extlib-0.9.11/lib/extlib/time.rb:26
        from c:/ruby/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original
_require'
        from c:/ruby/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
        from c:/ruby/lib/ruby/gems/1.8/gems/activesupport-2.3.2/lib/active_support/depende
ncies.rb:156:in `require'
        from c:/ruby/lib/ruby/gems/1.8/gems/activesupport-2.3.2/lib/active_support/depende
ncies.rb:521:in `new_constants_in'
        from c:/ruby/lib/ruby/gems/1.8/gems/activesupport-2.3.2/lib/active_support/depende
ncies.rb:156:in `require'
        from c:/ruby/lib/ruby/gems/1.8/gems/extlib-0.9.11/lib/extlib.rb:22
        from c:/ruby/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original
_require'
         ... 9 levels...
        from c:/ruby/lib/ruby/gems/1.8/gems/activesupport-2.3.2/lib/active_support/depende
ncies.rb:156:in `require'
        from c:/ruby/lib/ruby/gems/1.8/gems/sproutcore-0.9.23/bin/sc-server:13
        from c:/ruby/bin/sc-server:19:in `load'
        from c:/ruby/bin/sc-server:19

Wow! I did not expect that. Looking carefully it was evident that something was wrong with extlib-0.9.11 gem. A quick google search revealed that downgrading the extlib gem to 0.9.10 would make SproutCore happy. So, here is what I did next:

$ gem uninstall extlib

You have requested to uninstall the gem:
        extlib-0.9.11
merb-core-1.0.11 depends on [extlib (>= 0.9.8)]
rhodes-1.0.2 depends on [extlib (>= 0)]
templater-0.5.0 depends on [extlib (>= 0.9.5)]
rhodes-build-1.0.2 depends on [extlib (>= 0)]
rhodes-generator-1.0.2 depends on [extlib (>= 0)]
rhodes-framework-1.0.2 depends on [extlib (>= 0)]
If you remove this gems, one or more dependencies will not be met.
Continue with Uninstall? [Yn]  y
Successfully uninstalled extlib-0.9.11

First I uninstalled the extlib gem version 0.9.11. Usual warnings told be what all other dependencies would be affected. None was explicitly dependent on the 0.9.11 version, so I said yes to uninstall. Now, to install the 0.9.10 version, I did the following:

$ gem install --version '0.9.10' extlib -V
GET 200 OK: http://gems.rubyforge.org/specs.4.8.gz
GET 200 OK: http://gems.github.com/specs.4.8.gz
GET 200 OK: http://gems.rubyforge.org/quick/Marshal.4.8/extlib-0.9.10.gemspec.rz
Installing gem extlib-0.9.10
Downloading gem extlib-0.9.10.gem
GET 302 Found: http://gems.rubyforge.org/gems/extlib-0.9.10.gem
GET 200 OK: http://rubyforge.iasi.roedu.net/gems/extlib-0.9.10.gem
c:/ruby/lib/ruby/gems/1.8/gems/extlib-0.9.10/LICENSE
c:/ruby/lib/ruby/gems/1.8/gems/extlib-0.9.10/README
c:/ruby/lib/ruby/gems/1.8/gems/extlib-0.9.10/Rakefile
c:/ruby/lib/ruby/gems/1.8/gems/extlib-0.9.10/History.txt

****** removed for sake of brevity ******

c:/ruby/lib/ruby/gems/1.8/gems/extlib-0.9.10/spec/virtual_file_spec.rb
Successfully installed extlib-0.9.10
1 gem installed

Now, with fingers crossed, I re-ran the sc-server command as below:

$ sc-server
Running SproutCore Build Tools v0.9.23
Welcome to SproutCore
Loading SproutCore bundles in c:/MyStuff/SvnCode/GitRepo/scfavlist
merb : worker (port 4020) ~ Starting Mongrel at port 4020
merb : worker (port 4020) ~ Successfully bound to port 4020

Now, it worked and I could see the server running. Again note the similarity between this command and the Rails server command i.e. script/server. The sc-server command also takes parameters similar to mongrel!

Step 3: Run our application: Now, open up a Firefox or Safari web browser (I know it doesn’t work for IE yet!) and type in the url http://localhost:4020/scfavlist. Boom, you should see the basic SproutCore application up and running in its glory. Instant gratification. Love it.

The articles next in this series are:

Part II – Writing the application logic

Part III – Building the application and deploying