Spine is a lightweight framework authored by Alex MacCaw and it’s entirely written in CoffeeScript. When I first read about Spine. I already knew about CoffeeScript but I didn’t really have the chance to extensively use it. Though I knew I could use Spine with plain JS, I considered this as great opportunity to switch.
The companion of Spine is Hem, which is defined as a “bundler for Node/CommonJS/Web Apps”. It essentially provides a seamless environment for Spine based projects. It includes features like dependency management, single .js file build and Stylus compilation to CSS.
The only drawback I encountered though, was the ability to use SASS instead. So I had to additionally execute a
Luckily I came across Brunch, by Paul Miller which is a build tool for HTML5, with very little configuration. It already provided a boilerplate for Spine, but as I gave a look at it, I decided to build my own skeleton.
Spine = require("spine") # <- this is the real deal! class App extends Spine.Controller constructor: -> super
The fact that I can “import” my class dependencies first, by using
require('spine'), makes sense to me as I come from programming languages that used to
import classes. In the available Brunch Spine skeleton, Spine is included in the HTML file as a vendor.js file which is minified but not wrapped into a CommonJS module. This means I don’t have to require Spine on every CoffeeScript class because that would be already “loaded”. Which for me, at least, didn’t feel right. If I’m using a particular class, I should import it. It’s an extra line of code, yes, but feels better and makes the whole thing more readable as well.
That’s why I wrote my own Brunch with Spine Skeleton. It wraps jQuery, Spine, my classes (and whatever else you want) into CommonJS modules and it joins them in one
application.js file. It also (at last!) compiles
SASS files into one
style.css minified file for me. The great thing about it, is that thanks to Brunch, you are up and running right away and optional configuration is a breeze.