ClojureScript – Power of Clojure to the web

ClojureScript is a compiler for Clojure that targets JavaScript. It is designed to emit JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler.

Why ClojureScript?

  • Allows to use functional programming.
  • Uses Immutable data structures. (Immutable.js library is available to enable use of immutable data structures with JavaScript. Watch Christian Johansen’s talk on Immutable JavaScript)
  • Uses Google Closure Compiler : advanced code compiling with dead code elimination
  • core.async: makes ajax asynchronous call look like synchronous without the use of callbacks
  • Om/React : React provides a functional approach for rendering DOM. Using ClojureScript and React makes some tasks , for example undo quite simple

A great tutorial to follow to learn ClojureScript is which covers the basics of ClojureScript, environment set up with the use of Leiningen project, DOM interaction, routing,AJAX call, core.async, Om/React, browser enabled REPL and more.

The difference between JavaScript and ClojureScript is described in Compare ClojureScript with JavaScript.

Below is an example how to create an object in JavaScript and ClojureScript.

Create object in JavaScript
var foo = {foo: "bar"};
Create objects in ClojureScript
;; Create JavaScript objects with `js-obj`.
(def foo (js-obj "foo" "bar"))

;; ClojureScript supports  JavaScript data literals via the `#js` reader literal.
(def foo #js {"foo" "bar"})

;; It’s important to note that `#js` is shallow, the contents of
;;`#js` will be ClojureScript data unless preceded by `#js`.
;; This is a mutable JavaScript object with an immutable
;; ClojureScript object inside.
(def foo #js {"foo" "bar"})

Since I am using LightTable as the IDE,  an introduction to clojureScript to LightTable users is useful. If you are using a Windows machine, use ctrl + enter instead of command +ENTER to evaluate each form.

I got hooked up with the use of React with ClojureScript. The following interfaces are available to integrate React

The advantages and disadvantages of each of the above interface are described in “How to use React in ClojureScript, and why”

Furthermore external JavaScript libraries can be integrated with ClojureScript with the use of :foreign-libs option.

Building Single Page App “SimpleCalculator” with Reagent, Secretary and Accountant 

I followed the figwheel tutorial to create a project based on figwheel leiningen template.

lein new figwheel SimpleCalculator

It automatically creates a directory “SimpleCalculator”.   Open the folder using Light Table. It has the following structure.


Open project.clj and add the following dependencies

[reagent "0.5.1"
:exclusions [org.clojure/tools.reader]]
[reagent-forms "0.5.13"]
[reagent-utils "0.1.7"]
[secretary "1.2.3"]
[venantius/accountant "0.1.6"
:exclusions [org.clojure/tools.reader]]

The dependencies tag look like


Reagent is the interface for React in ClojureScript. Secretary is client side router for ClojureScript. Accountant makes navigation simple by triggering dispatches to Secretary defined routers and update browser’s path without a page reload.

Open Index.html file. Add the h3 tag above the “app” div.

<h3> Welcome to calculators</h3>

The Index.html will look like


Open core.cljs  and copy and paste the code.

To run the application type
lein figwheel


From the browser navigate to http://localhost:3449

The Maths Calculator is displayed by default


Click on BMI link to load the BMI calculator


The BMI calculation code has been taken from “Reagent: Minimalistic React for ClojureScript”

Click on Pension Age link to load Pension Age calculator



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s