ClojureScript and Middleman starter project

TL;DR I created a boilerplate project that runs ClojureScript in Middleman. This project and all its pieces help me to create prototypes quickly and deploy them to heroku. This it not a tutorial. For that, view the README. Go straight to the repo here or run git clone git@github.com:andreortiz82/middlemancljs.git ๐Ÿ‘


A shift to ClojureScript

Just over a year ago I was actively looking for solutions to help me bring ClojureScript into my workflow. I had already started working with ClojureScript via Leiningen - that was, eh. I had plenty of experience with React and Vue via the Middleman External Pipeline but when it came to finding a workflow I enjoyed, I struggled.

The struggle is real

I came across an article by Bob Nadler where he walks through his setup. To be honest, it was easy. Stupid easy, in fact - I mumbled obscenities to myself for not figuring it out sooner. Since then I've been tweaking a boilerplate project for rapid prototyping. As of today, the project itself is a basic stub for anything I want to get off the ground. I find this template incredibly useful for my current day workload and I hope you do as well. So, without further ado - let's jump in.

Note: This project will continue to grow as I continue to learn. Please be patient as we travel together. It'll be fun.

Having the right tools is half of the work.

Project structure

If you're familiar with Middleman you will quickly recognize the project structure. The only additional folder is the source/cljs directory.

middlemancljs/
-- .gitignore
-- Procfile
-- Rakefile
-- Gemfile
-- Gemfile.lock
-- config.rb
-- config.ru
-- source
  -- layouts
    -- layout.haml
  -- stylesheets
    -- utils
      -- _colors.scss
      -- _helpers.scss
      -- _layout.scss
      -- _mixins.scss
      -- _typography.scss
      -- _variables.scss
    -- site.css.scss
  -- images
  -- javascripts
    -- site.js
  -- cljs
    -- components
      -- core.cljs
  -- index.html.haml


SCSS utils

Also included in this project are a series of SCSS utilities and vars for quickly building UI. If you've ever used Foundation, Bootstrap or any n number of these projects - you'll understand what's going on. If you haven't used any of these Style Guides, I strongly suggest taking a look. There are plenty of patterns to familiarize yourself with.

These CSS util classes

# Haml
.flex.white.bg-navy.p-10
  .box.bg-green.p-10 Box
  .box.bg-green-10.p-10 Box
  .box.bg-green-20.p-10 Box
  .box.bg-green-30.p-10 Box

Generate

Box
Box
Box
Box

Rum (ReactJS wrapper)

On the ClojureScript side, I could have used Reagent or OM but I didn't - I used Rum. Why? Because I like the syntax and the name. Engineering decisions at work ๐Ÿ’ฅ

IMO Rum is a fantastic React wrapper with a delightful syntax. To be clear, I've struggled a bit since stepping into the ClojureScript world but when I work with Rum, I just get it. Is the superior? Probably not when compared to other wrappers/frameworks but thats ok.

Example

Right now you are experiencing this project in action. Below you'll find a simple Rum component that increments a number and is totally useless ๐Ÿคจ


What now?

I don't want to get into a full tutorial here as I will do my best to keep the README up-to-date. If you're jumping into ClojureScript as a beginner, take a look at this project and start poking around.

Wrap it up

Please feel free to ping me on Github if you have any questions or run into trouble. Thanks for reading.


Posts of 2019