What is React?
Build your SPA in ClojureScript!
Master Reagent and Re-frame with my ClojureScript Frontend Signature Course.
- 3 frontend modules
- 72 detailed lessons
- 19 hours of video
Summary: React is a view library for web pages that makes DOM rendering in a functional style really easy. React makes web programming fun again.
React is a library from Facebook that implements what it calls the Virtual DOM. It's a neat concept: instead of manipulating the DOM directly, which is error prone and relies on mutable state, you instead output a value called the Virtual DOM. The Virtual DOM is then diffed with the current state of the DOM, which generates a list of DOM operations that would make the current DOM look like the new one. Those operations are applied quickly in a batch.
It's a little hard to explain in prose, so I made a video:
The Virtual DOM approach has some very important advantages.
One render method
The Views in most MVC frameworks need to have methods for two situations (at least): the initial rendering and subsequent renderings. In React, these are actually the same. A View (called a Component in React) only has to define how it looks at any time, be it the first time it's rendered or after many changes. React figures out what needs to change in the actual DOM.
Never out of sync
There are some very pervasive bugs when you are trying to keep changes to a Model in sync with the DOM. The easiest thing, and most secure thing, is to re-build the entire thing. This can get slow. Otherwise, you have to manually code your View to handle every situation correctly, which is error-prone and time-consuming. React solves the general problem of diffing and works with any HTML.
Less flicker
Because the DOM changes are batched up, they can be applied with a single repaint of the DOM. This is possible but very difficult to do by hand otherwise.
Functional views
The end result is that your render method becomes a pure function from state to a Virtual DOM value. And we like pure functions. They're better at managing complexity, easier to code, and easier to debug.
Less view state
Very often MVC Views need to keep track of a lot of state themselves. There are a lot of DOM elements to keep track of, which Models they're listening to, and very often some hints about what the DOM might contain. Some of this is necessary and some of this is just incidental to the framework. React eliminates most if not all of the incidental state, leaving a small amount of manageable Component State.
Component lifecycle
React components are managed in what's called the Component lifecycle. It dictates what component methods are called when. You usually don't need more than the render method. But they're key to making things that weren't designed for React work seamlessly within it.
Makes hard things easy
When you have a great abstraction, features that were hard to get right suddenly become easy. Syncing data to the server, undo, and live previews suddenly become straightforward to implement.
Works great with immutable data structures
React works great with ClojureScript's immutable data structures. Because immutable data never changes, knowing if a Component has to rerender is mostly just a pointer equality check. This eliminates huge amounts of calculations, making ClojureScript uniquely suited to benefit from React. In fact, the React team, inspired by ClojureScript, has created their own immutable data structures to get the same advantage.
Embraced by the ClojureScript community
There are several React wrapper libraries in ClojureScript. The most notable one is Om, but each one has its advantages. This talk is about the three earliest ones (Om, Reagent, and Quiescent). It discusses what each one is best at. Two newer wrappers are Rum (created by the same person who wrote Datascript) and Brutha (created by th e person behind Compojure and the maintainer of Ring). Of course, LispCast Single Page Applications with ClojureScript and Om teaches Om.
Conclusions
React is a great fit for ClojureScript. It enables functional programming in the View, where typically the code is a procedural, stateful mess. It lets us create reusable components that manage their own state and HTML. And ClojureScript's immutable data structures make it faster to render than other frameworks. Hard features, like undo, become easy. In short, React makes web programming fun again.
If you're interested in getting started with ClojureScript and React, I recommend LispCast Single Page Applications with ClojureScript and Om. You'll build an Om application from the ground up, with functional components, local state, and an interactive GUI. The course is the fastest and most effective way to learn to build Om applications.