For the past 3 weeks I’ve been working on a mobile website for a hybrid iPhone app. We were already using Spine.js – as I mentioned in a previous post – and therefore Spine.js mobile was an attractive choice for building the mobile part of our website.

Getting started

One of the things that really confused me about Spine.js was getting it integrated into a Rails application. For starters, if you go to the Spine.js homepage you see a nice big download link. If you go to the Spine.js mobile homepage there is no link to be found. I still don’t quite get the reason behind this.

To properly integrate a JavaScript framework into Rails would entail getting it working with the asset pipeline. For Spine.js we used the spine-rails gem – which works great and takes care of all the integration for you. For Spine mobile there is no relevant gem to be found.

The examples for Spine.js mobile all suggest that you use Node.js and create you app with the relevant npm packages – Hem, GFX and jQuery. We obviously didn’t want to introduce any of these technologies so we needed to do a bit of investigation to get everything running. We eventually used a fork of a gem on github, which hasn’t given us any problems.

What is Spine.js Mobile

Spine Mobile is a lightweight framework on top of Spine for building mobile JavaScript web applications.

Using Spine mobile means you’re using the regular Spine library plus a few added features. You get the concepts of Stages and Panels which extend the regular Spine controllers and allows you to do transitions. The documentation on this is pretty good and if you’re used to Spine everything will be straightforward.

Basically you’re getting the regular Spine framework plus a few classes and some html and css that will make your site look like an iPhone app. I was impressed with how easy it was to use the framework – as I was already familiar with Spine it was a very quick spike to get a mobile site up and running. Overall the framework delivered exactly what we wanted – an easy way to create a hybrid iPhone app with Spine.

Not everything is plain sailing however – there are some features which seem to be half-implemented. For example, by default every ‘panel’ (which is basically a single page in our mobile site) is divided into header, body and footer. The header is styled automatically and you can easily add buttons and set the title. However, there is no way to control the footer – which isn’t the end of the world, but it can be frustrating when you try to use it.

Integration into Rails

As I mentioned before, the integration into Rails took some effort. The gem we forked integrated Spine into the asset pipeline, but you still need to include all the different Spine and Spine mobile libraries before loading your Spine mobile app. This is what my JavaScript file looks like (to include my Spine mobile app).

//= require jquery

//= require spine

//= require spine/local

//= require spine/ajax

//= require spine/manager

//= require spine/route

//= require spine/relation

//= require gfx

//= require spine/touch

//= require spine/stage

//= require spine/panel

At the end of this file simply include your Spine mobile app.

Conclusion

Overall I think Spine Mobile is a really good and very promising framework. It’s very lightweight and easy to adopt. It definitely delivered exactly what we were looking for and I would highly recommend it.

Happy coding.

Share on: Twitter, Facebook, Google+ or use the Permalink