The Sparkbox website rebuild has been a great playground for trying new things. Namely, it was the perfect excuse to tackle something that’s been on our list for awhile—overhaul our project startup process for front-end development. Like so many other folks, we had a fork of the helpful HTML5 Boilerplate that we used as a loose starting point. But as we’ve moved toward more efficient build processes and better JavaScript testing, we wanted something more. We knew there had to be an easier way to get our project components and technologies working together, so we started the search.
Starting Point
The first step was easy—create a repo.
From there, things got substantially more interesting.
Creating a common starting point for every project is more difficult than it may seem. We do a number of different kinds of projects at Sparkbox — Rails applications, ExpressionEngine-based sites, WordPress-based sites, and hybrids of various technologies. We wanted this new repo to be the starting point for the front-end dev on any of these.
Another consideration was the project’s end deliverable. Sometimes our deliverable might simply be HTML/CSS/JS templates, other times it might be the files and repo (build process and all). Ultimately, we didn’t want this starting point to dictate the final technology or deliverable, so the following components were deamed appropriate for all new projects:
Requirements
CoffeeScript for JavaScript precompilation
Jasmine for JavaScript testing
Grunt for build process
Why Grunt?
As mentioned above, we use SASS (a Ruby Gem) as our CSS pre-processor with the help of Compass. For JavaScript, we are using CoffeeScript (a Node module) to pre-process our JS. We have these two underlying technologies, Ruby and Node, to bring into one build process and one starting point. We have decided to use Grunt (another Node module) for the build process because it allows us the freedom to customize the entire build process to suit our needs. Grunt acts as the wrapper for all of our tasks, but these tasks retain their native underpinnings and engines (i.e. Compass still runs through the Ruby gem).
Grunt also has an active community developing plugins for a variety of tasks. For example, the Grunt Jasmine plugin gives us JavaScript testing out of the box on every project, giving us one less excuse to not write tests for our code. Bonus.
Implementation
Running our build process on top of Ruby and Node allows us to leverage the incredible packaging systems within each technology (Gems and Modules). Our repo contains: a Gemfile, a package.json, a .rvmrc (for Ruby Version Manager), and a config.rb (for Compass). This gives us an easy way to manage what is being installed for each part of the process. It also lets us rest in the knowledge that with simple “npm install” and “bundle” commands the project will be up and running.
A Few Details
There are several other incredible features of this new starting point. First, with Grunt’s concat module we can do basic HTML templating. This allows for header and footer files to be shared by all pages, without the need for a specific back-end system to serve these files. Each individual static file is created at build time.
Another big win is the Grunt Modernizr plugin. This plugin combs through your JS and CSS and creates a custom Modernizr build that only tests the features you are testing for in your code; no more extraneous tests and endless box toggling over at modernizr.com.
Going Forward
We’re excited about our new starting point. We feel that it is an incredibly robust starting point for templating, while still providing enough flexibility for templates to be merged into their final home (i.e. Rails app, EE install, or static site). Feel free to clone it down and experience the zen for yourself. We’re pretty proud of it, but we’ll definitely welcome your pull requests.
Tips For Trying It Out
We made a bash function that wraps up all steps needed to get a project up and running into a single command. Feel free to try it out by sourcing it to your bash profile.
We also made a one line faux-installer to automatically add the function to your bash. Simply copy and paste the following into your command line to source the above function automatically:
bash <(curl -sL https://gist.github.com/raw/4673745/init_installer.sh)(Feel free to read the source first if you are concerned about the script doing malicious things.)
With the function sourced properly, setting up a new project is as easy as typing “sb_init project_name” into your command line. Enjoy!
Note: At Sparkbox, we use Macs for development. While you can install Ruby and Node on Windows, we have not tried it. Your mileage may vary.
