A case for ClojureScript when developing data-heavy single page applications

Introduction

You’ve started to write your first React application — great! You’re amazed how simply you can create and reuse components and all is good with the world. You then begin to write more components, and decide to try and manage your component state in containers, passing around props to child components to maintain simplicity (as per Thinking in React). This works fine for a while… but then things start to get a bit messy. Your data is dispersed throughout your application and it becomes a juggling act to keep everything organised.

Clojure(Script)

I won’t attempt to give Clojure justice by describing it here; I would recommend reading this if you want to find out more about the language a bit more in depth. But to summarise:

  1. It’s a functional language
  • Functions are treated as first-class citizens.

Re-Frame

Re-Frame is a “buzzword compliant” framework for developing SPAs in ClojureScript, that uses Reagent (a “minimalistic interface between ClojureScript and React”). Re-Frame aims to leverage the benefits of using ClojureScript (as mentioned above) for state management by introducing a perpetual loop of consequential actions (where one triggers the next, that triggers the next, and so on). If you are familiar with Redux this loop of actions will be familiar to you, but I will quickly summarise each individual action here briefly:

  1. Event handling — A registered event handler listens for this event and “catches” it. Here we describe in a declarative manner the changes (and any side effects) to be made to the application database.
  2. Effect handling — Here the side effects are dealt with (this is the part where the functional programmers put their fingers in their ears, close their eyes and sing loudly). The important bit to note here is we compute and return the new application state. Think of it like a reducer that is elegantly able to deal with side-effects.
  3. Querying — We define how we extract data from the application date to send to the view (in the form of a subscription).
  4. The View — The view function receives the updated application state and so generates a different output.
  5. DOM — The changes in our view ultimately result in changes being made to the DOM.

To Summarise

Redux is pushing the JavaScript ecosystem in the right direction when it comes to data management. This style of programming enables you to be deterministic and consistent when dealing with application data. But, JavaScript is the wild west of programming languages — anything goes and there’s little stopping you from making questionable decisions.

Nordic digital sales consultancy. We help companies get more revenue and more customers in the digital era.