> Markdown version of [/videos/229-using-backend-languages-for-frontends-why-clojurescript-is-an-awesome-idea?t=128](https://www.wearedevelopers.com/videos/229-using-backend-languages-for-frontends-why-clojurescript-is-an-awesome-idea?t=128). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Using backend languages for frontends: Why ClojureScript is an awesome idea!

What if you could build robust frontends without JavaScript ecosystem churn? Discover how ClojureScript unifies your stack with functional immutability, shared backend code, and radically less boilerplate.

- **Speakers:** Tobias Schröder
- **Event:** World Congress 2021
- **Published:** July 1, 2021
- **Duration:** 43:02
- **URL:** https://www.wearedevelopers.com/videos/229-using-backend-languages-for-frontends-why-clojurescript-is-an-awesome-idea

## Summary

Shifting away from JavaScript-heavy frontend architectures, developers can utilize ClojureScript to build robust, full-stack web applications based entirely on functional programming. By extending Clojure to the frontend, engineering teams gain a unified ecosystem characterized by functional immutability, simplicity, and Lisp-based homoiconicity—meaning code is treated directly as data. This seamless transpilation to JavaScript enables powerful backend-to-frontend code sharing while completely dodging the ecosystem churn and complicated build tooling typically associated with modern web development.

The mechanics of a ClojureScript frontend rely on highly decoupled, data-driven libraries tailored for state stability. Using `deps.edn` for straightforward dependency management alongside Shadow-CLJS for simplified compiling and immediate REPL feedback sets a frictionless foundation. On the UI layer, the Re-frame architecture operates over React and Reagent, enforcing a strict six-step pipeline from event dispatch to DOM manipulation without leaking side effects. To complete the code-as-data philosophy deeply into the presentation layer, tools like Hiccup translate Clojure data structures directly into HTML elements.

Adopting functional ecosystems in production environments, such as large-scale e-commerce, reveals significant boilerplate reductions compared to object-oriented languages like Java. When handling massive, unpredictable JSON payloads, tools like Clojure Spec excel at validating and extracting only necessary attributes, avoiding the heavy class definitions required elsewhere. While the transition natively introduces a steep syntax learning curve—specifically managing nested parentheses—popular community tooling like 'rainbow brackets' easily mitigates this burden, forcing developers to adopt cleaner, more modular coding patterns that endure long-term.

**Keywords:** clojurescript frontend development, clojure functional programming, re-frame UI architecture, shadow-cljs build compilation, code-as-data homoiconicity, react reagent integration, hiccup HTML templates, deps.edn configuration, clojure spec validation, immutable app state management, JVM backend interoperability, full-stack code sharing, lisp syntax tooling, JSON payload filtering, javascript transpilation

## Chapters

1. **Using Clojure for full-stack web application development** (02:08) — How a single language enables seamless code sharing across backend and frontend boundaries.
1. **Key benefits of learning the Clojure programming language** (03:42) — Why simplicity, strict immutability, and Java interoperability make this Lisp dialect powerful.
1. **Advantages of adding ClojureScript for frontend projects** (05:25) — How data-driven architecture and simplified build tools improve the frontend development experience.
1. **Using higher-order functions to manipulate data collections** (07:31) — How core functional programming methods like map, filter, and reduce process lists.
1. **Core data types and collection structures in Clojure** (09:41) — Understanding the syntax for numeric values, strings, keywords, sets, and maps.
1. **Writing custom functions and defining variables in Clojure** (12:39) — How nested parentheses evaluate inner expressions and build basic programmable logic.
1. **Transpiling ClojureScript logic into standard JavaScript code** (15:27) — Comparing basic functionality differences when translating structural Lisp statements to JavaScript output.
1. **Configuring dependencies with deps.edn and shadow-cljs** (17:08) — Setting up project environments and managing compilation targets for a frontend workspace.
1. **Managing application state with the Re-frame library** (19:19) — Following the unidirectional six-step data flow from event dispatching to DOM rendering.
1. **Live demonstration of a ClojureScript shopping application** (22:44) — A walkthrough of a functional checkout interface managing dynamic shopping cart state.
1. **Initializing Reagent components and application startup events** (26:47) — Triggering database queries and binding the DOM rendering logic on application load.
1. **Generating dynamic HTML markup with the Hiccup library** (29:42) — Using Clojure keywords and standard map collections to define component structures without JSX.
1. **Processing Ajax requests and data subscriptions in Re-frame** (31:58) — Handling remote API responses and broadcasting state updates to reactive listener components.
1. **Utilizing keywords as functions to extract nested data** (34:25) — Applying a native language feature to safely process nested dictionaries without errors.
1. **Q&A on using Clojure versus other backend patterns** (37:25) — Discussing how strictly defined data constraints justify choosing Lisp over Java architectures.

## Related Moments

- [Exploring frontend development choices beyond standard JavaScript frameworks](https://www.wearedevelopers.com/videos/390-debugging-static-web-apps) (from "Debugging Static Web Apps")
- [Tracking open source community trends in JavaScript native frameworks](https://www.wearedevelopers.com/videos/1288-wearedevelopers-live-scammer-payback-with-python-grok-goes-unhinged-the-future-of-chromium-and-mo) (from "WeAreDevelopers LIVE: Scammer Payback with Python, Grok Goes Unhinged, The Future of Chromium and mo")
- [Layering frontend frameworks using progressive decoupling strategies](https://www.wearedevelopers.com/videos/266-decoupling-101-why-decouple-when-not-to-progressive-decoupling-and-success-stories-in-decoupling) (from "Decoupling 101 - Why decouple, when not to, progressive decoupling and success stories in decoupling")
- [Approaching Java development with a Clojure mindset](https://www.wearedevelopers.com/videos/103-java-with-a-clojure-mindset) (from "Java with a Clojure mindset")
- [Lessons learned from adopting a Clojure mindset](https://www.wearedevelopers.com/videos/103-java-with-a-clojure-mindset) (from "Java with a Clojure mindset")
- [Evaluating the operational trade-offs of modern javascript frameworks](https://www.wearedevelopers.com/videos/1347-wearedevelopers-live-rendering-in-the-browser-the-state-of-css-and-accessibility-and-more) (from "WeAreDevelopers LIVE - Rendering in the Browser, The State of CSS and Accessibility and more")

## Related Articles

- [The Best JavaScript Framework to Learn](https://www.wearedevelopers.com/magazine/229-the-best-javascript-framework-to-learn)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [Dev Digest 131 - AI'm not sure about OSS](https://www.wearedevelopers.com/magazine/472-dev-digest-131-ai-m-not-sure-about-oss)
- [Dev Digest 136 - No JS(on) of mine](https://www.wearedevelopers.com/magazine/482-dev-digest-136-no-js-on-of-mine)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Working Student Frontend Development](https://www.wearedevelopers.com/jobs/ext/1185791-working-student-frontend-development) at **ZEISS Group**