Matthias Nehlsen

Software, Data and Stuff

BirdWatch client using ClojureScript and Om

Back in January I wanted to try out Om. Now, I finally got around to doing so.

For those of you who do not know, Om is a ClojureScript wrapper around Facebook’s ReactJS library. I have covered ReactJS on this blog a few times, for example in the post mentioned in the twitter conversation above. ClojureScript is very similar to Clojure, except that it targets the browser and not the JVM. Like Scala.js, ClojureScript is compiled into JavaScript.

Finally I got around to giving Om a spin and wrote my first application in ClojureScript. You can try it out here. Before, I had only read a little bit about Clojure and ClojureScript and I had also gone through clojurekoans. Then, just for the fun of it (and to see for myself if I could make it work), I wanted to write a new client for my BirdWatch application, this time in ClojureScript. BirdWatch is kind of a live search engine to search for tweets in an area of interest, with a Single Page Application retrieving search results from a server component, including updates to that search over a streaming connection using Server Sent Events (SSE). In the browser, some basic stats are shown about specific tweets (like recent RTs) and the usage of words (wordcloud and trending barchart) plus a time series chart displaying the time distribution of recent tweets matching a query. The server side is written in Scala using Play Framework, however that does not need to concern us for this article as the wire format is plain JSON.

The UI of the new client is done in Om and the internal communication between application parts is realized with Core.async. All the data mangling is done in ClojureScript instead of using crossfilter.js as was the case with the ReactJS and the AngularJS versions. For more information about the server side and a JavaScript version of the client side application, I recommend this article. The description of the server side is still accurate; nothing changed while I was writing this ClojureScript version. On the client side there are version available using AngularJS, ReactJS and now ClojureScript and Om.

This is how the UI of the application looks like now. I have also improved the application while writing this recent addition by

  • offering additional sort orders (by favorite and by retweet within analyzed tweets)
  • enabling retweets, replies and favorites directly from within the application using web intents
  • showing photos embedded in tweets

So far, some of these changes have made it back into the ReactJS version, with the AngularJS version planned to follow.

Click the image above to give this new client, which was written in ClojureScript a try. Writing it worked surprisingly well and I have learned a lot in the process.

EDIT July 24th, 2014: The next article outlines in detail how this application is implemented.

Cheers, Matthias

« New AngularJS Meetup in Hamburg BirdWatch with ClojureScript and Om explained »

Comments