Introduction to ClojureScript and Its Role in Full-Stack Development

What is ClojureScript?

ClojureScript is a dialect of Clojure that compiles to JavaScript. It brings the same functional programming principles and immutable data structures of Clojure to the frontend, allowing you to write client-side code with the same language features and philosophies.

Key Features of ClojureScript:

• Functional Programming: Leverages Clojure’s functional programming features.
• Immutable Data Structures: Uses immutable data structures that enhance reliability and reduce bugs.
• Interop with JavaScript: Allows interaction with JavaScript libraries and APIs.
• Advanced Tools: Offers advanced features like macros and persistent data structures, enabling powerful and expressive frontend development.

Why Use Clojure and ClojureScript Together?

Using Clojure for the backend and ClojureScript for the frontend offers several benefits:

• Consistency: Maintain a consistent language across both the frontend and backend.
• Shared Code: Share data structures and validation logic between frontend and backend.
• Unified Tooling: Utilize the same tooling, libraries, and development practices across the stack.

Setting Up a Clojure Backend with Ring and a ClojureScript Frontend

1. Setting Up the Clojure Backend

Create a new Clojure project for the backend:

lein new app my-fullstack-app

Navigate to the project directory:

cd my-fullstack-app

Add the Ring and Compojure dependencies in your project.clj:

(defproject my-fullstack-app "0.1.0-SNAPSHOT"
  :description "A full-stack application using Clojure and ClojureScript"
  :dependencies [[org.clojure/clojure "1.11.1"]
                 [ring "1.9.0"]
                 [compojure "1.6.2"]
                 [org.clojure/data.json "2.5.0"]]
  :main ^:skip-aot my-fullstack-app.core
  :target-path "target/%s"
  :profiles {:uberjar {:aot :all}})

Create a file src/my_fullstack_app/core.clj for your backend code:

(ns my-fullstack-app.core
  (:require [ring.adapter.jetty :as jetty]
            [compojure.core :refer [defroutes GET POST]]
            [compojure.route :as route]
            [ring.util.response :as response]
            [clojure.data.json :as json]))

(defn todo-handler [request]
  (response/response (json/write-str [{:id 1 :text "Learn ClojureScript"}])))

(defroutes app-routes
  (GET "/api/todos" [] (todo-handler))
  (route/not-found "Not Found"))

(def app
  app-routes)

(defn -main [& args]
  (jetty/run-jetty app {:port 3000 :join? false}))

In this example:

• /api/todos returns a JSON response with a list of to-do items.
• The -main function starts the Jetty server on port 3000.

2. Setting Up the ClojureScript Frontend

Create a ClojureScript project for the frontend. Use Leiningen with the lein-cljsbuild plugin to manage ClojureScript compilation.

Add ClojureScript and lein-cljsbuild to your project.clj:

(defproject my-fullstack-app "0.1.0-SNAPSHOT"
  :description "A full-stack application using Clojure and ClojureScript"
  :dependencies [[org.clojure/clojure "1.11.1"]
                 [ring "1.9.0"]
                 [compojure "1.6.2"]
                 [org.clojure/data.json "2.5.0"]
                 [org.clojure/clojurescript "1.11.10"]]
  :plugins [[lein-cljsbuild "1.2.1"]]
  :cljsbuild {:builds [{:source-paths ["src"]
                        :compiler {:output-to "resources/public/js/app.js"
                                    :optimizations :simple
                                    :pretty-print true}}]}
  :main ^:skip-aot my-fullstack-app.core
  :target-path "target/%s"
  :profiles {:uberjar {:aot :all}})

Create the frontend files under src/my_fullstack_app/frontend:

src/my_fullstack_app/frontend/core.cljs:

(ns my-fullstack-app.frontend.core
  (:require [cljs-http.client :as http]
            [reagent.core :as r]))

(defonce todos (r/atom []))

(defn fetch-todos []
  (go
    (let [response (<! (http/get "/api/todos"))]
      (reset! todos (:body response)))))

(defn todo-list []
  [:ul
   (for [{:keys [id text]} @todos]
     [:li {:key id} text])])

(defn app []
  [:div
   [:h1 "My To-Do App"]
   [todo-list]])

(defn ^:export init []
  (fetch-todos)
  (r/render [app] (.getElementById js/document "app")))

resources/public/index.html:

<!DOCTYPE html>
<html>
<head>
  <title>My Fullstack App</title>
  <script src="/js/app.js"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    my_fullstack_app.frontend.core.init();
  </script>
</body>
</html>

Communicating Between Frontend and Backend via API

In our example, the frontend communicates with the backend via a RESTful API. The ClojureScript cljs-http library handles HTTP requests in the frontend. The backend (Clojure) serves API endpoints that the frontend can query.

Frontend Code (ClojureScript):

(defn fetch-todos []
  (go
    (let [response (<! (http/get "/api/todos"))]
      (reset! todos (:body response)))))

Backend Code (Clojure):

(defn todo-handler [request]
  (response/response (json/write-str [{:id 1 :text "Learn ClojureScript"}])))

This setup ensures that the frontend can request data from the backend and update the UI accordingly.

Example Project: Building a Simple To-Do App

To demonstrate a complete workflow, we’ll build a simple to-do application. The backend will manage a list of to-dos, and the frontend will display and interact with this data.

Backend Implementation:

Add CRUD operations to the backend for handling to-do items.

src/my_fullstack_app/core.clj:

(def todos (atom [{:id 1 :text "Learn ClojureScript"}]))

(defn get-todos [request]
  (response/response (json/write-str @todos)))

(defn add-todo [request]
  (let [new-todo (-> request :params :text)]
    (swap! todos conj {:id (inc (count @todos)) :text new-todo})
    (response/response (json/write-str @todos))))

(defroutes app-routes
  (GET "/api/todos" [] (get-todos))
  (POST "/api/todos" request (add-todo request))
  (route/not-found "Not Found"))

Frontend Implementation:

Enhance the ClojureScript frontend to add new to-dos.

src/my_fullstack_app/frontend/core.cljs:

(defn add-todo [text]
  (go
    (<! (http/post "/api/todos" {:form-params {:text text}}))
    (fetch-todos)))

(defn todo-input []
  (let [text (r/atom "")]
    (fn []
      [:div
       [:input {:type "text" :value @text :on-change #(reset! text (-> % .-target .-value))}]
       [:button {:on-click #(add-todo @text)} "Add"]])))

(defn app []
  [:div
   [:h1 "My To-Do App"]
   [todo-input]
   [todo-list]])

Deploying the Full-Stack Clojure Application

To deploy the full-stack application, follow these steps:

1. Prepare the Application

Ensure your backend and frontend are working locally. Build the ClojureScript assets:

lein cljsbuild once

2. Configure Deployment

Create a Procfile for deploying to Heroku (or another PaaS):

web: lein run

3. Deploy to Heroku

• Create a new Heroku app:

  heroku create my-fullstack-app
  

• Commit your changes:

  git init
  git add .
  git commit -m "Initial commit"
  

• Push to Heroku:

  git push heroku master
  

• Open your application:

  heroku open
  

Conclusion

In this guide, we’ve covered the process of building a full-stack web application using Clojure for the backend and ClojureScript for the frontend. We set up a simple to-do application, demonstrated communication between frontend and backend, and discussed deployment strategies. By combining Clojure and ClojureScript, you can create robust, scalable web applications while enjoying the benefits of functional programming across your entire stack. Happy coding!