What is ClojureScript, and why do you need it?

Born out of the rich heritage of Clojure, a dynamic, functional programming language for the Java Virtual Machine, ClojureScript brings the power of Clojure to front-end development. Let’s delve into ClojureScript and why it has become a compelling choice for modern web development.

Introduction to ClojureScript: A Clojure Compiler Targeting JavaScript

ClojureScript is a dialect of the Clojure programming language that compiles to JavaScript. Seems like Rich Hickey took all the benefits of Clojure and applied them to the front-end development sphere. 

Clojure Script enables developers to write client-side web applications using the same principles of simplicity, immutability, and functional programming that have made Clojure popular on the backend. Moreover, ClojureScript shares many syntactic and semantic similarities with Clojure, making it easy for developers familiar with Clojure to add ClojureScript to their expertise.

Syntax

ClojureScript inherits Clojure's Lisp-inspired syntax, which emphasizes using parentheses for function calls and data structures and makes learning ClojureScript easy for Lisp fans. It also adopts Clojure's core features, including immutable data structures, first-class functions, and macros. Additionally, ClojureScript provides seamless interoperation with JavaScript, allowing developers to call JavaScript functions and libraries directly from ClojureScript code.

Ecosystem 

The ClojureScript ecosystem is already extensive and constantly evolving, with new libraries, frameworks, and tools being developed by the community to enhance the capabilities of ClojureScript applications and improve the developers’ experience.

Here are some of the key technologies and tools commonly used with ClojureScript:

Advantages of ClojureScript

The primary competitor of ClojureScript is Javascript, both designed to make stunning interfaces with smooth user experience, but still different in their core. This competition brought the idea to highlight the benefits of ClojureScript, helping you to choose between the popular and the evolving. 

Functional paradigm

Like Clojure, ClojureScript is a fully functional programming language that emphasizes immutability, simplicity of pure functions, and their composition. Switching to a different paradigm is unnecessary when working with the front end, especially if you're already using Clojure on the backend.

This approach contributes to code readability, resulting in the robustness of the developed applications, enhanced developer productivity, and code maintainability.

Interactive development

ClojureScript has full REPL (Read-Eval-Print Loop) support, allowing for quick and comfortable testing and improvement of code. With tools like Figwheel and shadow-cljs, the development cycle is nearly continuous, enabling you to see the actual changes brought by newly written code immediately. This makes the development process more iterative, allowing developers to test and refine code in real-time, and that’s the obvious reason why people learn ClosureScript. This freedom and ability to experiment facilitate finding the most optimal solutions for the project's needs and goals.

Going all-in with Clojure was a no-brainer for me. It let me cover backend and frontend with tools like re-frame, FigWheel, and Shadow.

Marten Sytema

CaterMonkey

Clojure in Product.

Would you do it again?

Listen on
Spotify Podcast

Listen on
Spotify Podcast

Listen on
Spotify Podcast

Listen to podcast

JavaScript interoperability

Another benefit of ClojureScript is its seamless integration with the JavaScript ecosystem and libraries and its ability to fully utilize its APIs and export functions written in ClojureScript for use in a JavaScript environment. Combining parts written in JavaScript and ClojureScript within one project is easy, which even broadens the development opportunities. There are also no restrictions on using Vanilla React components or creating components, for example, with the Reagent library. 

Here’s an example of integrating a JavaScript function into ClojureScript:

1;;; Clojure 2(ns my.namespace.xyz) 3 4;; Exported function 5(defn ^:export multiply [a b] ;; function multiply(a, b) { 6(* a b)) ;; return a * b; 7;; }

1/// JS 2my.namespace.xyz.multiply(21, 2); // => 42

Improved language design

ClojureScript addresses common pain points and eliminates most of the drawbacks and confusing aspects of JavaScript design, such as inconsistent type comparisons, truthy/falsy inconsistency, null/undefined/NaN problems, unintended type conversions, passing values versus passing refs, inconsistent equality checking, and more. Such language design improvements lead to more reliable and maintainable code.

Let’s take comparison operators as an example. While JavaScript has developers to clarify whether they need to compare just values or both values and types, ClojureScript offers much more comprehensible logic. Here are the JS comparison operators:

1 /// JavaScript 2 3 1 == '1' // true 4 1 == [1] // true 5 1 === '1' // false 6 1 === [1] // false 7 0 == false // true 8 '' == "" == false // true 9 null == false // true 10 undefined == false // true 11 NaN == false // true 12 '0' == true // true 13 'false' == true // true 14 [] == true // true 15 {} == true // true 16 function() {} == true // true

And now, let’s look at how comparison is handled in ClojureScript:

1 ;;; Clojure 2 3 (= 1 "1") ;; false 4 (= 1 [1]) ;; false 5 (= 0 false) ;; false 6 (= "" false) ;; false 7 (= nil false) ;; false 8 (= "0" true) ;; false 9 (= "false" true) ;; false 10 (= [] true) ;; false 11 (= {} true) ;; false 12 (= (fn [] nil) true) ;; false

High performance

ClojureScript's optimizations for performance and efficiency are based on the Google Closure Compiler for JavaScript compilation. These very efficient optimizations allow the generated code to execute several times faster than Vanilla JavaScript.

For example, ClojureScript's immutable data structures and functional programming paradigm make it easier for the compiler to determine which parts of the code are unreachable and can be safely eliminated. This optimization reduces the size of the generated JavaScript bundle, leading to faster load times and improved runtime performance.

core.async

ClojureScript provides one of the best solutions to JavaScript's asynchronous code and callback problems. <span style="font-family: courier new">core.async</span> channels (similar to those in the Go language) allow writing asynchronous code to be more intuitive and manageable as if you had to block calls and multiple execution threads at your disposal.

Full-stack compatibility

ClojureScript and Clojure offer convenient functionality that allows you to use the same code on the backend with Clojure and on the front end with ClojureScript. This is achieved through the extension .cljc and reader conditionals #?(). Let’s look at a quick example:

1 (defn reader-conditional-showcase [] 2 #?(:clj [1 2 3] 3 :cljs [4 5 6]))

This function returns the vector <span style="font-family: courier new">[1 2 3]</span> if called through Clojure and <span style="font-family: courier new">[4 5 6]</span> when called through ClojureScript. And you can use this anywhere, even when declaring namespace dependencies:

1 (ns reader-conditional-showcase 2 (:require #?(:clj [my.namespace.abc] 3 :cljs [my.namespace.xyz]) 4 [my.namespace.common]))

These technologies' features help you spare development effort, reduce duplication, and make the code more manageable and maintainable. 

Real-world examples

As ClojureScript is gaining popularity, more and more projects and large companies are successfully using it. Let’s look at some examples: 

Despite not being a consumer-facing application, Walmart Labs has been known to use Clojure and ClojureScript in some of its backend services and web applications. Their development team has contributed to the Clojure ecosystem and has spoken about their experiences with the language at various conferences.

Pitch is collaborative presentation software that aims to revolutionize how teams create and share presentations. Its front-end development uses ClojureScript to build a modern and interactive user interface. ClojureScript's functional programming features and seamless JavaScript interoperability allow Pitch to deliver a performant and feature-rich application.

Find a Game, a social network for lavish sportsmen and sports clubs had stable and high application performance as a primary requirement, so we used Clojure to reduce the time needed to develop a mobile app while improving code readability.

Although not all companies using Clojure and ClojureScript share their specific challenges and how these technologies helped address them, we are confident they all have experienced their productivity, performance, and code maintainability benefits.

When you need ClojureScript

ClojureScript can be a great choice for a variety of project development scenarios. Here are some situations where you might consider using ClojureScript:

Choosing ClojureScript for your project development depends on your team's preferences, requirements, and technical considerations. ClojureScript can become a powerful and productive tool if it aligns with your project's goals and development philosophy.

Conclusion

ClojureScript has numerous advantages for front-end development, and these advantages only increase when paired with Clojure on the backend. With its unique features, performance benefits, functional programming paradigm, immutability, simplicity, and code expressiveness, we see it as a robust and pragmatic choice for full-stack web development.

When starting a new project or rewriting the front end of an existing one, we would always choose ClojureScript for its comfort, stability, and, most importantly, the practicality it offers compared to alternatives, thanks to its convenient and understandable toolkit and a large number of libraries.

If you have an idea for the project and are deciding on the stack to implement it, feel free to contact us and get all the answers regarding ClojureScript usage. We are always glad to help bring your ideas to life.