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.
InfoQ: In React there is a sense of bringing classic design considerations to web programming, Pete Hunt makes a several references to cohesion and coupling in his architectural overview for instance. Is this a sign that Javascript has matured enough that the cost of these principles is now sufficiently offset by the virtual machines performance or has there been a change in the culture surrounding user interface programming that has brought these ideas forward?
David: I think people are starting to see the limitations of just JavaScript and jQuery and even more structured solutions like Backbone, Angular, Ember, etc. React is a fresh approach to the DOM problem that seems obvious in hindsight. The response to my post was far greater than I expected so I think the ideas resonated with developers working in the browser.
InfoQ: Are there advantages to immutable data structures that might lead to their adoption, via Mori, by the current javascript frameworks or are new approaches, like React's Virtual DOM, creating different data needs, needs for which they are ideally suited?
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.
InfoQ: ClojureScript is certainly gaining the attention of the Clojure community, but are you aware of many people coming to ClojureScript directly from Javascript?
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.”
Josh Lehman has rewritten the React tutorial in Om and saying ”Om is the most promising ClojureScript library that I have yet come across for building rich interfaces.”