Update single page app example

Author: weavejester

index.adoc

@@ -1425,24 +1425,24 @@ example we'll limit the application to the bare minimum.
 
 The next step is to create the client code. For this we'll use
 https://github.com/cjohansen/replicant[Replicant] for updating the DOM,
-and https://github.com/r0man/cljs-http[cljs-http] for communicating with
-the server API.
+and https://github.com/duct-framework/client.http[Duct client.http] for
+communicating with the server API.
 
 This requires us to once again update the project dependencies:
 
 .deps.edn
 [,clojure]
 ----
 {:deps {org.clojure/clojure {:mvn/version "1.12.1"}
+        org.duct-framework/client.http {:mvn/version "0.1.0"}
         org.duct-framework/main {:mvn/version "0.1.10"}
         org.duct-framework/module.cljs {:mvn/version "0.5.1"}
         org.duct-framework/module.logging {:mvn/version "0.6.5"}
         org.duct-framework/module.web {:mvn/version "0.12.9"}
         org.duct-framework/module.sql {:mvn/version "0.8.0"}
         org.xerial/sqlite-jdbc {:mvn/version "3.50.3.0"}
         com.github.seancorfield/next.jdbc {:mvn/version "1.3.1048"}
-        no.cjohansen/replicant {:mvn/version "2025.06.21"}
-        cljs-http/cljs-http {:mvn/version "0.1.48"}}
+        no.cjohansen/replicant {:mvn/version "2025.06.21"}}
  :aliases {:duct {:main-opts ["-m" "duct.main"]}}}
 ----
 
@@ -1454,32 +1454,22 @@ file for the client UI.
 ----
 (ns todo.client
   (:require [replicant.dom :as r]
-            [cljs-http.client :as http]
+            [duct.client.http :as http]
             [clojure.core.async :as a :refer [<!]]))
 
-;; Helper functions that add anti-forgery headers.
-(defn delete [url]
-  (http/delete url {:headers {"X-Ring-Anti-Forgery" "1"}}))
-
-(defn post [url params]
-  (http/post url {:headers {"X-Ring-Anti-Forgery" "1"}, :json-params params}))
-
-(defonce todos
-  (js/document.getElementById "todos"))
-
 (defonce store (atom {}))
 
 (defn update-todos []
-  (a/go (let [resp (<! (http/get "/todos"))]
+  (a/go (let [resp (<! (http/get [:todos]))]
           (swap! store assoc :todos (-> resp :body :results)))))
 
 (defn delete-todo [id]
-  (a/go (<! (delete (str "/todos/" id)))
+  (a/go (<! (http/delete [:todos id]))
         (<! (update-todos))))
 
 (defn create-todo []
   (a/go (let [input (js/document.getElementById "todo-desc")]
-          (<! (post "/todos" {:description (.-value input)}))
+          (<! (http/post [:todos] {:description (.-value input)}))
           (<! (update-todos))
           (set! (.-value input) ""))))
 
@@ -1496,30 +1486,35 @@ file for the client UI.
       [:a {:href "#" :on {:click #(delete-todo id)}} "delete"]])
    [:li (create-todo-form)]])
 
+(defonce todos
+  (js/document.getElementById "todos"))
+
 (add-watch store ::render (fn [_ _ _ s] (r/render todos (todo-list s))))
 (update-todos)
 ----
 
-WARNING: In the above example, the '`click`' event is bound to a function.
-This is not considered best practice for Replicant, but used in the
-example code for the sake of brevity.
-
 Here we reach the edge of Duct. This ClojureScript file is not specific
 to our framework, but would be at home in any Clojure project.
 Nevertheless, for the sake of completeness we'll provide some
 explanation of what this file does.
 
-The `delete` and `post` functions add the `X-Ring-Anti-Forgery` header,
-which is needed to get past the anti-forgery protection.
+The `get`, `post` and `delete` functions from the Duct HTTP client
+simplify communication with the server. They communicate using the
+Transit serialization format, and automatically add headers to get
+around the webservers CSRF protection.
 
 The `update-todos`, `delete-todo` and `create-todo` functions all update
-the `state` atom, which contains a data structure that represents the
+the `store` atom, which contains a data structure that represents the
 state of the UI. In this case, it's a list of todo items.
 
-There is a watch attached to the `state` atom. When the state is
+There is a watch attached to the `store` atom. When the store is
 changed, the `todos` DOM element is updated accordingly, with a new
 unordered list of todo items. Replicant is smart enough to update only
 the elements that have changed, making updates efficient.
 
+WARNING: In the example code, the '`click`' event is bound to a
+function. This is not considered best practice for Replicant, but is
+used in this example for the sake of brevity.
+
 Now that we have both a server and client, we can `(reset)` the REPL
 and check the web application at: <http://localhost:3000>