Pursuing Sproutcore on OSX 10.8.2 with XCODE 4.6

I’ve recently rekindled my interest in developing a web app.  Previously I had explored using blossom.js.  However, after some experience with it, I decided I was not ready to be that bleeding-edge.

So, off to research other options, I re-traced my steps.  SproutCore and Cappuccino both looked good.  Learning from my blossom experience, I decided to pursue SproutCore.  The Objective-J in Cappuccino is really attractive to me as an Objective-C developer. However, I am concerned that the download size for starting a cappuccino app (~ 4MB) will be a detriment in the end.  In addition, the group for Cappuccino does not have the support it used to, after the acquisition by Motorola.

So, I am now pursuing the development of an app using SproutCore.  I wanted to use the instructions at sproutcore.com for installation. (http://sproutcore.com/install_mac/) I have Ruby installed but not the right version, so I wanted to use RVM (Ruby Version Manager) to keep all this straight.

Using curl to fetch the RVM code failed; a certificate issue.  Switching to use curl -k to ignore the certificate issue showed that the SproutCore instructions are pointing to the wrong site).  Off to rvm.io to get the right stuff. I found instructions that helped at:  http://charles.lescampeurs.org/2012/06/17/installing-ruby-1-9-3-on-mac-os-x-lion-with-rvm

I used:

$ curl -L https://get.rvm.io | bash -s stable

As an OSX and iOS developer, I am current with the latest XCODE and OS versions (10.8.2 at the moment, and LLVM-based compilers from Apple).   But Ruby does not like the LLVM compiler, so I needed to get the non-LLVM GCC.    Off to osx-gcc-installer to get this installed.

Then, install ruby using:

$ CC=/usr/bin/gcc-4.2 rvm install 1.9.3
$ rvm use 1.9.3
$ gem install sproutcore

And finally, back to the SproutCore tutorial…

Posted in Uncategorized | Leave a comment

Integrating Blossom with web sockets via Socket.io

I’ve been exploring the world of web sockets with HTML canvas items.  I found that socket.io seems to be the most robust web socket library that can fall back to more traditional (and less efficient) approaches when a browser doesn’t support web sockets.  One API that runs across multiple platforms.

I’m ready to try to attempt to integrate that work with blossom; a canvas-based application framework in javascript that is destined to be the basis of a new generation of web applications.

So, off we go.  Install node.js to get node and npm.


Grab a copy of the latest (unstable) version of blossom.

git clone https://github.com/fohr/blossom.git

Within the repository, run the base application using node.js.

node projectfile.js

Now, create a simple application to start to develop within. Create a new file ‘dynamic.js’ with the following:

require(‘./buildtools’); // adds the SC and BT namespaces as globals

var path = require(‘path’);

var project = BT.Project.create({
“static”: BT.Directory.create({
“dynamic”:         require(‘./examples/dynamic’),
“sproutcore”:    require(‘./node/buildfile’)

Copy the examples/<>example into examples/dynamic to set up a simple app.

Run a quick test on this,  ‘node dynamic.js’

Integrating Socket.io

Posted in Uncategorized | Leave a comment

Designing for connected-disconnected apps

The world of mobile apps is full of unique technical challenges.  Mobile apps live in a world where connectivity is not guaranteed. The best apps can operate when they are disconnected and are enhanced when they are connected.  They handle the notion of syncing data and caching it locally for disconnected operations.  Finally, I’d like to find an ORM (Object Request Mapper) since the data models I anticipate needing are relational in nature but I’d like to code the data model in an object-oriented manner.

The second aspect of the data model is that I believe that this model should be used on the client and also on the server.  This leads me to coding a common data model in Javascript and targeting using Node.js as the server-side technology.

Blossom uses the Sproutcore datastore framework.  This provides a strong infrastructure to meet the needs of a connected-disconnected app.  So, to follow the conventions of sproutcore, we will place all the Javascript classes for the data model into the ‘datastore’ folder in the application.  The app will have the reference to the store at {AppName}.store, again, following the conventions.

The following figure was originally on the SproutCore site, but listed as deprecated, so I’ve copied here to ensure it does not disappear.  The original image was here.  This figure shows some of the main parts of the application and where the datastore fits in the entire context of the application.

The sproutcore datastore supports database acccess via the datasource and also allows for loading initial data using the Fixtures.

Posted in Software Development | Tagged , , | Leave a comment

Exploring Blossom.js

I’ve been developing iOS apps as a hobby for a few years now.  I’ve learned the in’s and out’s of iOS, objective-C, and the UI frameworks that Apple has developed.  At the same time, I’ve seen my goals expand from writing an app on an iDevice to writing an app that runs on a variety of platforms, including iOS devices, OSX, and Windows. I may even want to include Android devices and Windows Phone devices in the future.

As a one-man team, I need to be as efficient as possible to hit all these platforms.  To that end, I have been watching for the emergence of a cross-platform solution that I can leverage.  I recently learned of Blossom and I think I found what I’ve been looking for.  Blossom is based on javascript and can run in modern browsers (Safari, Internet Explorer  8+, Chrome).  The blossom team is also creating native runtimes for iOS, OSX and Windows.

“Blossom can support native runtimes on the desktop (Windows, Mac OS X, and Linux) and on mobile devices (iOS, Android, and Windows Phone) and tablets (iOS, Android) — and that’s in addition to modern web browsers, all with the same API.” — Erich Ocean at github.

Blossom targets the source of poor responsiveness, DOM traversals, by removing the DOM and moving to a Canvas-based UI.  Adding in a high-performance animation engine (inspired by Apples’s Quartz 2D engine), Blossom promises a buttery-smooth UI across a variety of platforms, all from a common Javascript code base.

Posted in Software Development | Tagged , | Leave a comment