Create a single page web application using SproutCore – Part I
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: