Om, no DOM
While researching UX strategies for a hybrid mobile app, I stumbled upon a post by Christophe Coenraets, whom I remembered from the days when he was an Adobe technology evangelist. Today, still evangelizing, albeit for another employer, Christophe has moved on, like the rest of the world, to open standards, browser technologies. Said post dealt with the implementation of page transitions in a mobile client without mutating the DOM. I thought to myself, how sweet. But how sweet indeed to see this written in Clojurescript, for here is a language with a functional mindset that naturally embraces that which does not mutate.
tl;dr A Clojurescript port of a mobile-friendly, hardware-accelerated UI widget originally implemented in React.js.
The goal I wanted to achieve with my port was deceptively simple: replicate the exact same user experience, styling and performance, but in idiomatic Clojurescript. It was a fun little experiment, and I’ll let you, dear reader, be the judge. To the left is Christophe’s demo, to the right is mine. Can you spot the difference? I certainly can’t, and that’s the whole point. What is instructive to compare, on the other hand, is the source code driving the implementations. So go ahead, dive in the code. To the left is Christophe’s repo, to the right is mine.
The only thing left for me to do in the context of this post is to jot down a couple of observations.
- Why Clojurescript over Javascript? Plenty of answers elsewhere, but here’s what does it for me: clean syntax, namespaces, a macro system, multimethods, asynchronicity via CSP, an innovative build tool.
- Christophe uses a custom-made mechanism for the CSS transitions, sidestepping the facility that React.js provides. I didn’t encounter the reported issue, so I’m using React’s high-level interface, ReactCSSTransitionGroup.
- Om is low in syntactic sugar and may therefore strike a little baroque to newcomers. There’s protocols, js interop and advanced idioms. Om was the first React wrapper in the Clojure world, spearheaded by David Nolen, who paved the way for several other wrappers which may be easier to use. I wouldn’t know, because Om serves me well.
- How to read Clojurescript if you have never seen it before? Read it upside down, from bottom to top. The source code is read in a single pass by the compiler, so symbols must be defined before they can be referenced (unless they are explicity declared).
Please let me know what you think.