From Zero to Om

by Paul Bergeron - - posted in ClojureScript, code, om, react

Om by swannodette is a ClojureScript interface to Facebook’s React. It’s power is that it can create UIs that are easily snapshottable, rewindable, and all with great performance.

Getting to a good starting point with ClojureScript can be a little complicated, so here’s a step-by-step process for going from a clean slate to a working development enviroment.

Presuming leiningen installed, getting a ClojureScript app template is easy.

Just use mihneadb’s ClojureScript template.

1
2

lein new cljs-webapp PROJECT-NAME
cd PROJECT-NAME

Add Om to the dependencies in project.clj

1
2
3
4
5

...
  :dependencies [[org.clojure/clojure "1.5.1"]
                 [org.clojure/clojurescript "0.0-2138"]
                 [om "0.1.5"]]
...

Then edit resources/public/index.html and add a div, and React to the <body> element:

1
2
3
4
5
6
7

...
  <body>

  <div id="some-id"></div>
  <script src="http://fb.me/react-0.8.0.js"></script>
  <script src="js/goog/base.js"></script>
...

Now, time for some ClojureScript, edit core.cljs

1
2
3
4
5
6
7
8
9

(ns project-name.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))

(defn widget [data owner]
  (om/component
    (dom/div nil "Hello world!")))

(om/root {} widget (.getElementById js/document "some-id"))

Last step, let’s get it on the browser:

1
2

lein cljsbuild once dev
ruby -run -ehttpd resources/public -p8080 # Just hosts the current path on the given port

Then just open http://localhost:8080/ in your browser, and you’ve got a working Om ClojureScript app running!