Om: Enhancing Facebook's React with Immutability
David Nolen has released Om, a ClojureScript interface for Facebook’s React. David’s blog post introducing Om describes how the combination can yield vast improvements in performance, using the, now seemingly, standard todo application. The improvement is attributed to two key factors:
- Using immutable data structures for the application state means that reference equality can be used for the shouldComponentUpdate implementation of the underlying React library. This improves the performance of React’s Virtual DOM diff operations, a process performed to detect changes that need to be rendered by the browser. This results in the application's performance being two to three times quicker than using standard data types, according to David.
- requestAnimationFrame is used to delegate the timing of repainting the browser's view to the browser, thereby batching view effecting changes into fewer redraws. This second addition appears to be behind David's tweet of a 30X-40X increase in performance. In this second benchmark the end state is the same as the start, so if Om is able to perform all the state changes, before the browser requests a new frame, React’s Virtual DOM will calculate that there is in fact no change to make. Calculating that there is no change required is, of course, considerably faster than requesting redraws for every state change.
However, David is keen to point out that his effort isn’t necessarily about achieving high performance. From his post:
These benchmarks are not designed to prove that Om is the fastest UI component system in the world. These benchmarks are designed to demonstrate that it's important to avoid implementation decisions that defy global optimization or leave so little guidance that users will inevitably make these same problematic design decisions themselves.
InfoQ had the chance to talk to David about Om and how Clojurescript adoption is progressing.
InfoQ: Do you still have major features to add or are you just looking for some time to mature what is already there?
David: Om is a simple and more functional layer over React. While the public API is still under development I do not foresee significant feature additions - Om is meant to be a foundation for a more functional approach to user interface programming, not a framework.
David: React’s approach already delivers considerable benefit, but it gets to really shine when you leverage immutable data structures, because that means React reconciliation process has to do less work. We’ve seen a lot interest in immutable data structures just from the Om announcement. In addition, immutable data structures also open up the door for implementing powerful undo functionality trivially, whether for the user or the developer.
David: ClojureScript is solidly focused on serving the needs of the Clojure community. However I think there’s a growing interest in the broader web development community as our approach has some interesting advantages as demonstrated by projects like Om.
As David says above, his announcement has received quite a large reaction from the community. A few people have written up their experience putting Om to work.
Fredrik Dyrkell posted code samples showing the translation between pure React, to ClojureScript and finally to Om, closing with, “In summary, I am really excited about React in general and together with Clojurescript in particular”
Adam Solove has given an overview of working with Om to create a traditional browser UI that has to cooperate with a stateful mapping library and concluded, “What I learned: Om is a practical way to build web user interfaces in a functional style, and a lot of fun.”