Caffeinated Simpleton

Getting Started with Om

I believe that Om is on to something in the world of JavaScript frameworks. I’ve always had a thing for using well thought out abstractions to enable global optimization, and Om is a beautiful combination of two very well thought out abstractions: persistent data structures and React.js. It doesn’t even matter to me that the global optimization part is already well on its way (Om is faster out of the box than React.js). The fact that it enables the application developer to do their thing and the framework developer to make some very strong guarantees on what they will do is an excellent platform for future work, so we might as well start using it now.

Unfortunately, Om is hot off the presses. David Nolen (@swannodette) specifically states that it might change at any time and isn’t really ready for prime time. Fiddlesticks, I say! Let’s do it live.

Here’s how to get set up without just copy and pasting random things out of the tutorial (which is how I wrote this article). It’s written for Mac, but you can translate pretty easily into whatever platform you’re on if you’re not too new to all this.

Getting a Hello World app up

(defproject <your project name> "0.1.0-SNAPSHOT"
  :description "<some description>"
  :url "<some url>"

  :dependencies [[org.clojure/clojure "1.6.0"]
                 [org.clojure/clojurescript "0.0-2268"]
                 [org.clojure/core.async ""]
                 [om "0.6.5"]]

  :plugins [[lein-cljsbuild "1.0.4-SNAPSHOT"]]

  :source-paths ["src"]

  :cljsbuild {
    :builds [{:id "dev" ; I just called the build dev since no optimizations are done
              :source-paths ["src"]
              :compiler {
                :output-to "main.js"
                :output-dir "build"
                :optimizations :none
                :source-map true}}]})

Replace the things in brackets with real values. I’d recommend updating the versions in the dependencies field by finding the latest versions.

And you might want to make sure you have the latest lein-cljsbuild too.

<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8">
        <title>Your Project Title</title>
        <div id="app"></div>
        <script src=""></script>
        <script src="build/goog/base.js" type="text/javascript"></script>
        <script src="main.js" type="text/javascript"></script>
        <script type="text/javascript">goog.require("<your project name>");</script>

The important things above are:

After that, you just need to create some code to run.

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


(def app-state (atom {:text "Hello world!"}))

  (fn [app owner]
    (dom/h1 nil (:text app)))
  {:target (. js/document (getElementById "app"))})

Stay tuned for more information on how to actually get something interesting working and a production build!

comments powered by Disqus