15. The Frontend: A ClojureScript UI

Overview

In this chapter, we will go over the basics of React's virtual DOM and lifecycle and then provide the tools necessary to build a rich user interface for the data application outlined in the previous chapters. We will see how to call JavaScript code from ClojureScript and how to convert between JavaScript and ClojureScript objects.

By the end of this chapter, you will be able to build a rich user interface for a data application.

Introduction

Clojure is a hosted language, which means that it runs on top of another language. In the same way that Clojure runs on top of the JVM, ClojureScript runs on top of JavaScript. More precisely, a ClojureScript program is transpiled into a JavaScript program that can run in the browser, on the server side, and in any environment where JavaScript is supported. For example, consider Node.js, an open source JavaScript server environment that allows us to execute JavaScript programs.

In this chapter, we will learn the basics of ClojureScript and how to create a ClojureScript program that runs in the browser. We will build a small frontend application on top of the Reagent framework that connects to an HTTP endpoint and displays User Interface (UI) components that the user can interact with. We will use Hiccup as a markup language for the UI components and discover how to execute JavaScript code from ClojureScript.

We will build an application using Figwheel, which supports...

Hiccup instead of HTML

Hiccup is a library for representing HTML in Clojure. In Activity 6.01, Generating HTML from Clojure Vectors, you implemented a simplified version of Hiccup. As you'll remember, Hiccup uses:

• Vectors to represent elements
• Maps to represent an element's attributes (including styles)

In a Hiccup vector, the first element is a keyword that specifies the corresponding HTML element:

• :div for a <div> tag
• :span for a <span> tag
• :img for a <img> tag

In Hiccup, an empty <div> is represented by [:div].

The second element is an optional map that represents the element's attributes where the names of the attributes follow the kebab-case convention: we separate the words with one underscore character (on-click instead of onClick).

For example, [:div {:class "myDiv"}] represents <div class="myDiv"></div>.

Notice that in HTML, the style attribute is a string...

The Virtual DOM and Component Lifecycle

When we build an application in React.js, we don't deal directly with the DOM, which is the browser's rendering mechanism and object model. Instead, React exposes a virtual DOM to the developer and keeps the implementation details hidden from them. This is what makes React so powerful. In a nutshell, when developing a React application, the developer writes React components that return data structures and the React frameworks automatically update the DOM and render the component on the UI.

Moreover, React is smart enough to calculate the smallest amount of DOM changes that are required in order to update the state of the UI, which makes React applications highly performant.

If a complex component's behavior is required by the application, such as doing something special as soon as the component is mounted or just before the component is updated, React provides lifecycle methods that the component can interact with.

Exercise...

Summary

In this chapter, you have learned the basics of how to build a frontend application in ClojureScript using Reagent, a wrapper around React.js.

We built a couple of Reagent components using the Hiccup markup language, which uses Clojure collections to define the HTML structure and properties. The state of the application is stored in a Reagent atom that you interacted with through the REPL.

We saw how to call JavaScript code from ClojureScript and how to convert between JavaScript and ClojureScript objects. You used these interop features to fetch image data from an HTTP server and convert the data into a ClojureScript object.

We've reached the end of the book. You've seen a lot of new things since the first pages of Chapter 1, Hello REPL!. Beyond the syntactic basics, you've learned a lot about functional programming and, even more importantly, how to think in a functional way. It's one thing to know what immutability is and something else entirely...