by Joshua Davey on June 4, 2015

I'm getting closer to the frontend development environment of my dreams. The combination of editor integration, live browser reload, and not having to manually run commands over and over is time-saving and a pleasure to work with.

At Hashrocket, designers and developers work very closely together. Visual design and markup is handled by our designers, who create "stubbed out" templates in the UI directory. It's a process that works very well for us, and allows us to iteratively add features to an application.

This process has served us very well in Rails using a UI controller, available only in development mode.

I've been using ClojureScript a lot lately, particularly with Om, and have missed that directory of collaboration. After all, the designers at Hashrocket have a proclivity for HAML and SASS.

In the past, I've set up a separate repository using Middleman to handle markup and styles, using middleman build, copying the generated CSS files, and eyeballing the generated markup to ensure it matched the Om component's markup. Aside from being tedious, it's really easy to get out of sync with a manual process like this. The static resource generation should be a part of our build process.

Enter boot.

If you're new to the Clojure world, you may have heard of Leiningen, which is the de facto dependency management and build tool for Clojure/Script. Boot is similar to Leiningen, but adds the ability to compose tasks to create build pipelines. This composability, along with some really smart architectural decisions, is what makes boot a great choice for the problem at hand.

Adzerk's example repo is a great way to get started with ClojureScript and boot. Of particular note is the build.boot file. It demonstrates how one can build up a dev task that watches a directory for changes, rebuilding ClojureScript sources, and notifying the browser to reload the code. It includes the setup necessary for source maps, a development server, and the browser-connected REPL. But what I want to add to that pot of awesome is the ability to compile HAML and SASS as a part of the pipeline.

I had an epiphany one night after working on this problem for a while: I can just use Middleman. After all, boot and the ClojureScript compiler run on the JVM, and JRuby is easily embeddable. After a short bit, I came up with boot-middleman, the glue I needed to build HAML/SASS as a part of my build process.

It assumes a subdirectory is a Middleman app (assets by default). This works nicely because my designer pals can collaborate with me without having to use the JVM at all. They just run middleman in the assets subdirectory and work as normal.

See the boot-middleman README for instructions on setting up.

I used this workflow to create a minesweeper clone, the source of which is on GitHub. Just clone and run boot dev.

To see the workflow in action, check out the following video. It demonstrates how editing front-end files do not require a manual browser refresh to see the effects.