Clojure lab

You can write all client side js in JavaScript and with any js framework but there is an option. ClojureScript - javascript in clojure. You can write all your javascript in clojure. It’s not very difficult let’s see some examples.

(defn hello-world [] (.log js/console “hello world”)) ; Will print hello world in console

As you can see we invoke method of the object via .method and pass “hello world” parametr. This will translate to:

function hello_world (){ console.log( “hello world”)}

Notice we can write hello-world in ClojureScript but cann’t do this in js. Property of the object can be invoked like this (.-property object).

If you want to know more there is a book about ClojureScript “ClojureScript Up and Running” O’Reily publishing.

Upgrade our app with ClojureScript and Ajax.

Let’s upgrade our app with some ClojureScript code. We will remake our add book feature so it can add books via ajax call.

First we need some tools to use it. We will use cljsbuild library that will let us compile our cljs files with ClojureScript to main.js file. Also we will use jayq library as a wrapper for jQuery and fetch library which is nice replacement for ajax calls. Add this code to project.clj file.

We added cljsbuild plugin, jayq, fetch and point cljsbuild plugin where to save our file and how optimize it ( in our app we will use simple optimization that will allow debugging).

Let’s add cljs file app.cljs under mywebapp directory. And add this code:

Here we imported some functions from fetch library and some from jayq. Fetch library allows you to invoke function on the server and use result ( result is what function returns) in callback handler. Syntax pretty simple:

(remote (func param) [result] (.log js/console result))

On the server side we use defremote macro:

(defremote func [param] ( do some stuff here)) => our result

Ok let’s add some clojurescript code to handle our book submission. We will send data to db then fetch books list and then insert result under #books-list div.

And then we need to modify welcome.clj file. Add defremote functions there:

Finally you need to include jquery library and our main.js file in common.clj

That’s it our app ready to go. Github.

In the next article we will add picture uploading for a book of course ajax way with fetch library.

Update

There is alternative to fetch library which appears not mature so far to use in production. Shoreleave library that focuses on:

• Security
• Idiomatic interfaces
• Common client-side strategies
• HTML5 capabilities
• ClojureScript’s advantages

Check this out i will try this lib in my project also and will write an article about my experience.