Getting started with ClojureScript

ClojureScript is a Clojure to JavaScript compiler which has gained a considerable amount of traction since its release in July of last year.

It provides a way for developers to write a web-application in a large subset of Clojure and then compile it to JavaScript with the help of the Google Closure library.

However, its very fast development progress can make it a little difficult to get started with development, with any tutorial quickly becoming obsolete. To wit, I would suggest taking this guide with a certain level of skepticism if you are not reading it in 2012.

In the first part of the blog I will be stating how to get the basic ClojureScript repl running in the browser and in the second part I will be explaining how to get the repl integrated with Emacs.

Installing ClojureScript

Start with getting the latest clojurescript environment from github and bootstrapping it.

If you do not already have a github capable environment follow the intructions here.

$ git clone git://github.com/clojure/clojurescript.git
$ cd clojurescript
$ ./script/bootstrap

This will get the latest build and all the required dependencies, including

Running the Rhino Repl

Open a new command prompt (do not use the gitbash console) and if you are developing on OSX or Linux you should now be able to run “script/repljs” and get a quick taste of Clojurescript. However, if you are running in windows you will need to invoke script/repljs.bat.

You may see an error as follows.

java.lang.AssertionError: Assert failed: Can't find goog/base.js in classpath

At the time of writing, there is a bug in deploying ClojureScript, as it will always get the head of the Closure Library from SVN. This can cause errors if there are changes in the Closure repository which are incompatible with Clojure. I strongly recommend that you grab the one that I have prepared and works as of 18/05/2012: goog.jar

This jar should be replaced in the clojurescript\lib directory.

You can of course also grab the last Official Closure version from their website and compile it yourself.

Alternatively you can use the goog.jar that Clojure produces, however, if you get google closure errors, then you will need to replace goog.jar, delete the out directory and recompile the .cljs file.

Invoke “script/repljs” or “script/repljs.bak” and you should be able to run a little bit of clojurescript.

(+ 1 2)
(print "Hello" " " "World")

This is running in rhino, a Java based JavaScript environment, but it will be loads more fun to be running in a real live browser!

Running the browser repl

Edit the repljs or repljs.bat file and edit the final line as follows

Change:

set REPL_CLJ="(require '[cljs.repl :as repl])(require '[cljs.repl.rhino :as rhino])(repl/repl (rhino/repl-env))"

To:

set REPL_CLJ="(require '[cljs.repl :as repl])(require '[cljs.repl.browser :as browser])(repl/repl (browser/repl-env))"

Now when we run “repljs” it will try and connect to a browser to use as its evaluation environment. But before we can do that, we have to create a page for it to connect to.

Navigate up to the directory above clojurescript

Create a new file called “foo.cljs”

Create a new file called “index.html”

Edit foo.cljs as follows

(ns foo (:require
 [[clojure.browser.repl :as repl]]
 [[clojure.browser.dom :as dom]]))
(repl/connect "http://localhost:9000/repl")

now run

clojurescript/bin/cljsc foo.cljs > foo.js

Note that an “out” directory has been created, containing the dependencies and that a foo.js file has been created with the converted JavaScript.

Edit index.html as follows:

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="content">
<script type="text/javascript" src="out/goog/base.js"></script>
<script type="text/javascript" src="foo.js"></script>
<script type="text/javascript">
    goog.require('foo');
</script>
</div>
</body>
</html>

You should now have everything set up. Call

clojurescript/script/repljs #.bat on Windows

Load up the html page.

These should now connect happily.

Try the following

(js/alert "Hello World")

Potential Problems

Seeing a message like “POST http://localhost:9000/” in the console? You probably haven’t started up the repl! Run “clojurescript/script/repljs”

Next Week

We will be stating how to integrate emacs into your clojurescript development environment!

Leave a Reply

Your e-mail address will not be published. Required fields are marked *