Om Next for React devs: Introduction and project setup

This is a series of articles on developing web applications in ClojureScript with Om Next. It is based on official Om Next tutorial, but targets JavaScript developers. It’s also an introduction into the language.

Important: I’m beginner in ClojureScript. This series is a part of my learning course.


ClojureScript is a dialect of Clojure programming language which compiles to JavaScript. If you are interested in learning why and how Clojure made its way to JavaScript, read “Introducing ClojureScript” and watch “ClojureScript Release” talk by Rich Hickey.

If you are reading this, I’ll assume you have heard already about ClojureScript and familiar with its main concepts. If not, watch a talk “ClojureScript for Skeptics” by Derek Slager.


Om is a library built on top of React.js. It not just makes use of React API but provides a bunch of interesting features which gives developer more power and simplifies development of complex UIs. Om Next is a name of the next version of the library, it’s in active development and currently in alpha.


The first thing you need to install is Java 8. Clojure runs on JVM and all the tools are written in Clojure. In JavaScript world it’s common to use Grunt/Gulp/Browserify or Webpack build systems. In Clojure there are Leiningen and Boot, we are going to use the first one, because it’s more commonly used. Leiningen is available on Homebrew.

brew install leiningen

If you are developing React applications with Browserify or Webpack, you probably familiar with hot module reloading. Figwheel is such a tool in ClojureScript. While it’s usually not easy to write reloadable code in JavaScript, in ClojureScript your code will be reloadable most of the time. But there are still some things that may break it.

At last don’t forget to install syntax highlighting package for your editor. And if you are just started with the language and feel uncomfortable with parentheses, you’ll like Parinfer. It will auto-adjust parens when you change indentation and vice-versa. It is available for many editors.

Project setup

Create a new directory om-react and switch into it.

mkdir om-react
cd om-react

Create file project.clj, we are going to declare dependencies there. This is a package.json in JavaScript projects. There’s a sample annotated project.clj file if you want to learn about all possible options.

(defproject om-react "0.1.0-SNAPSHOT"
:description "My first Om program!"
:dependencies [[org.clojure/clojure "1.7.0"]
[org.clojure/clojurescript "1.7.170"]
[org.omcljs/om "1.0.0-alpha24"]
[figwheel-sidecar "0.5.0-SNAPSHOT"]])

Now we want to configure Figwheel. Create script/figwheel.clj file. It describes how to build the project for development and starts a REPL session.

(require '[figwheel-sidecar.repl :as r]
'[figwheel-sidecar.repl-api :as ra])
{:figwheel-options {:server-port 3000}
:build-ids ["dev"]
[{:id "dev"
:figwheel true
:source-paths ["src"]
:compiler {:main 'om-react.core
:asset-path "js"
:output-to "resources/public/js/main.js"
:output-dir "resources/public/js"
:verbose true}}]})

REPL is a very important part of the interactive development experience in Clojure(Script). When application starts, you can connect a REPL which will bind to the environment and update itself with changes you make to code. This allows developer to execute functions defined in the code from within REPL session. Figwheel REPL is connected to the browser, so you can play around with your application by executing code in the REPL and immediately see results in the browser. The REPL doesn’t have built-in readline support, so you need to install rlwrap from brew. It provides history and line editing.

Ok. Create HTML document in resources/public/index.html and we are ready to write the code.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
  <div id="app"></div>
<script src="js/main.js"></script>

Create an entry point module in src/om_react/core.cljs. In fact there’s no modules in ClojureScript, the thing is called a namespace. At the very top of every source file there should a namespace declaration.

(ns om-react.core)
(println "Hello, world!")

Finally start Figwheel development server.

rlwrap lein run -m clojure.main script/figwheel.clj

For the very first start up it will pull dependencies, so it may take some time. When done, you’ll see that the REPL is starting, go to localhost:3000 and open JavaScript console in the browser. You’ll see Hello, world! there. Go to the REPL, in the terminal, and execute the following code:

(js/alert "Alert!")

This will fire an alert in the browser. Notice that you can access browser’s JavaScript environment in ClojureScript using js namespace.

Next time we will learn about Om Components, how to write and compose them together.