Matthias Nehlsen

Software, Data and Stuff

BirdWatch with ClojureScript and Om explained

This article is currently Work in Progress. Feedback more than welcome. Thanks!

Last week I wrote about having written my first actual application using ClojureScript and Om, a web client for my BirdWatch application. You may want to start with that article to understand the background better. This week I first want to talk about my experience with ClojureScript and Om thus far. Then I want to start describing the implementation details. I am fully aware that what has come out of it thus far is far from elegant in terms of pretty much everything. But in my defense, it does appear to work :)

BirdWatch client using ClojureScript and Om

Back in January I wanted to try out Om:

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.

Distributed Atmospheric Pressure Measurement

Later this month I will be doing a hiking tour in the Alps around the Matterhorn. I do not recall exactly why I said yes to this tour; maybe because I did not know at that point that in ten days the total ascent would be 10,500 meters (roughly 34,500 feet). But on the other hand, that’s an interesting challenge for a person with a sedentary job. Now being me, I would love to have a way to track the current altitude plus the combined ascent. GPS can help here, but the best sensor to have for this task appears to be a barometer.

Updated Approach

So I have been suffering a little from writer’s block recently. Well, no, that is not exactly true. The problem was not getting started with a topic but rather sticking with it and continuing to work on it. But there might be a way to get back into the rhythm and that is by finishing something smaller.

Play Framework, Server Sent Events and Internet Explorer

Next week I will be presenting at Scala Days. In my talk I will discuss how to build reactive applications with two-way (near) real-time communication, using the combination of Server Sent Events for providing clients with updates and REST calls for the backchannel. You may already be familiar with two examples of this architecture: BirdWatch and sse-chat. Now I was thinking about potential questions in the Q&A session after the talk. One potential issue that came to mind almost immediately was the support for Internet Explorer. Out of the box, IE does not support Server Sent Events. Personally, I do not care very much about IE support. I have not used it in years before I started researching for this article, and only a low single digit percentage of visitors on my blog use IE. But I understand this can be a showstopper. So if you don’t care about IE support at all, you really don’t need to read any further. Otherwise, bear with me.

BirdWatch: AngularJS vs. ReactJS

Summary: In this article I will present a new version of the BirdWatch application that uses ReactJS on the client side instead of AngularJS. Don’t worry if you liked the previous AngularJS version - I do not intend to replace it. Rather, I want to create another version of the client side web application in order to get a better feeling for the pros and cons of different frameworks and libraries. So think of it as something like the TodoMVC of reactive web applications. Well, not quite yet, but feel free to write another client version for comparison. EmberJS anyone? For this new version I have also rewritten the barchart as a ReactJS component with integrated trend analysis and no dependency on D3.js. Again, there is nothing wrong with D3; I just like to try different approaches to the same problem.

ElasticSearch 1.0.0 - Breaking Changes

ElasticSearch 1.0.0 is out, hooray! Great stuff, congrats to everyone involved. Not that I had any complaints about v0.9, but still, this is a great achievement. One of the changes is some major rework of the Percolation Query API, making it much more powerful than before. Unfortunately, the update broke the percolation query mechanism in the BirdWatch application. But the fix wasn’t very hard. So in today’s article, I will revisit the topic of Percolation Queries by explaining what they are, how the new version has become more powerful and what was needed to fix my application. Please refer to this earlier article if you want to know more about the overall architecture of the BirdWatch application.

Scala.js and ReactJS

In this article I will present a simple reactive web application using Scala.js and ReactJS on the client side. It is based on sse-chat, an application I initially wrote for demonstrating the use of AngularJS with Play Framework. I then rewrote the client for an article about using ReactJS on the client side. In the latest version now, there is an additional client that connects to the same server and utilizes Scala.js to build the web client. I recently gave a talk about this at Ping Conference in Budapest, check it out if you’re interested. I discovered ReactJS through David Nolen’s blog and his excellent OM library which combines ReactJS with ClojureScript. His second article on Om also inspired me to try out an undo functionality with the immutable data structures that Scala.js has to offer. For learning more about ReactJS, I recommend going through the tutorial and also reading my last blog post.

Play Framework and Facebook’s React library

Over the holidays I discovered Facebook’s React, an interesting library for generating reactive user interfaces. I wanted to try it out in a real-world application, and I thought of one such application I still had running as a demo: sse-chat, a little chat application I wrote last summer to learn how to make Play Framework and AngularJS cooperate in a very basic way. So I thought, why not rewrite the client side using React, offering the exact same functionality as the AngularJS version. Both are also available in the new version with no changes to the backend code except for the added route, as both versions can be accessed in parallel.