This is a repost. You can find the original here
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.
Using Boot for ClojureScript development Link to heading
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.
boot-middleman: Gluing Everything Together Link to heading
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.
The Workflow in Action Link to heading
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.