Are there any DOM manipulation libraries in ClojureScript?
Sign up for weekly Clojure tips, software design, and a Clojure coding challenge.
Summary: ClojureScript has some nice DOM manipulation options, including jQuery and more idiomatic libraries.
- Macros. A lot of processing can be done at compile time. For instance, parsing and interpreting of selector strings can be done during compilation.
- The functional nature of ClojureScript. jQuery does a lot to make sure that chaining works very smoothly. ClojureScript's functional programming and threading macros make this less important. A lot of the functionality is built-in to Clojure.
- ClojureScript protocols. Protocols allow you to extend the functionality of existing types. That means if you want to add "methods" to all DOM nodes, you can. This gives you that jQuery-object feeling without boxing everything up.
LispCast Single Page Applications with ClojureScript and Om does not use the DOM manipulation approach because Om uses React to build views. But DOM manipulation is still a common frontend technique.
If you are familiar with jQuery, jayq will be very familiar. It is simply a jQuery wrapper library. I've used this before in production and it has a lot going for it. One, it's just jQuery, which a lot of people know. Two, the selector engine jQuery uses is one of the most full-featured. You get full access to that. Three, jQuery is probably cached in everyone's browser already, so there's likely no download. The downside? It is just jQuery. It's mutable objects and encourages that same jQuery style of programming.
Dommy is nice. It's got functions for selecting DOM nodes, manipulating
them, and listening to events. It takes advantages of ClojureScript's
macros. For instance, the selectors are parsed at compile time and
converted directly into standard DOM selection code. So the code
(sel1 "#container") gets converted directly into
document.getElementById("container"). That makes it much faster than
jQuery, though not as full-featured. This is the one I recommend for
selecting DOM elements and binding to events.
If you need to create DOM nodes, dommy won't do that for you. You'll need a library like hipo. Hipo converts hiccup syntax into native DOM creation code at compile time. That means your hiccup templates are as fast as possible. Pair this with dommy and you have a complete solution.
Aims to be jQuery-like but also idiomatic ClojureScript. It has xpath as well as CSS selectors, DOM manipulation, and an event system based on Google Closure's events.
If you're interested in learning ClojureScript, albeit with Om, not one of the above libraries, you should give Lispcast Single Page Applications with ClojureScript and Om a look. It teaches you how to build an application from the gound up using functional programming. The course includes animations, exercises, and code casts to make it the fastest and most effective way to learn to build apps in ClojureScript with Om.