Skip to content

May 9 / Rupak Ganguly

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.

sproutcore_1

The articles next in this series are:

Part II – Writing the application logic

Part III – Building the application and deploying

One Comment

leave a comment
  1. Ruby O'Rourke / Dec 24 2009

    Hi Rupak,
    I am interested in discussing the possibility of you building a dashboard in Sproutcore for us at HubWorks.

    Would you be interested?

    cheers
    ruby

Leave a Comment