Reagent Development Tooling

Overview
Background
Key Concepts
Implementation
References
Notes

Overview

Reagent development tooling encompasses the build systems, hot-reloading solutions, and debugging utilities essential for productive ClojureScript/React development. Shadow-cljs has emerged as the modern standard, replacing Figwheel as the primary development server, while providing superior npm integration and simplified configuration. This tooling stack enables rapid iteration with instant feedback through hot module replacement and REPL-driven development.

Background

The Reagent ecosystem originally relied on Figwheel (later Figwheel Main) for hot-reloading, paired with Leiningen or Boot for project management. Around 2018-2019, shadow-cljs gained popularity due to its native npm package support, simpler configuration, and faster compilation. Today, shadow-cljs is the recommended choice for new Reagent projects, particularly those integrating with the JavaScript ecosystem.

Key Concepts

Shadow-cljs

A ClojureScript build tool that compiles to JavaScript with first-class npm support:

;; shadow-cljs.edn
{:source-paths ["src"]
 :dependencies [[reagent "1.2.0"]]
 :builds
 {:app {:target :browser
        :output-dir "public/js"
        :asset-path "/js"
        :modules {:main {:init-fn app.core/init}}}}}

Hot Module Replacement

Shadow-cljs automatically reloads changed namespaces without losing application state:

(defn ^:dev/after-load reload []
  (reagent.dom/render [app] (.getElementById js/document "app")))

REPL Integration

Connect to running applications for interactive development:

npx shadow-cljs cljs-repl app

Preloads

Development-only namespaces loaded before application code:

:devtools {:preloads [devtools.preload day8.re-frame-10x.preload]}

Implementation

Project Initialization

npx create-cljs-project my-reagent-app
npm install react react-dom

Development Workflow

# Start development server with hot-reloading
npx shadow-cljs watch app

# Run tests
npx shadow-cljs compile test && node out/test.js

# Production build with optimizations
npx shadow-cljs release app

Editor Integration

Emacs: CIDER with cider-jack-in-cljs selecting shadow-cljs
VS Code: Calva extension with shadow-cljs support
IntelliJ: Cursive with external REPL connection

Debugging Tools

;; deps.edn or shadow-cljs.edn
{:dependencies [[binaryage/devtools "1.0.7"]
                [day8.re-frame/re-frame-10x "1.5.0"]]}

References

Notes

Shadow-cljs eliminates the need for cljsjs packages by supporting npm directly
Use :dev/before-load and :dev/after-load metadata for reload lifecycle hooks
The release build applies Google Closure advanced optimizations for production
Consider shadow-cljs.edn for simpler projects, deps.edn integration for monorepos