Listing 1: Werte via vars benennen

=> (def x 1)
==> #'cljs.user/x

=> (inc x)
==> 2

=> x
==> 1

Listing 2: Projektstruktur in ClojureScript

hello-world
      src
           hello_world
                 core.cljs
      deps.edn (macOS/Linux)
      cljs.jar (Windows)
      index.html

Listing 3: JavaScript-Datei laden

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script src="out/main.js" type="text/javascript"></script>
    </body>
</html>

Listing 4: JavaScript Promises in src/hello_world/promises.cljs

(ns hello-world.promises)

(enable-console-print!)

(defn fetch-data+ []
  (println "Fetching data using a promise...")
  (js/Promise. (fn [resolve]
                 (js/setTimeout #(resolve 42) 5000))))

(defn main []
  (-> (fetch-data+)
      (.then #(println "Processing data:" %))))

(main)


Listing 5: core.async Beispiel in src/hello_world/async.cljs

(ns hello-world.async
    (:require  [cljs.core.async :refer [chan put! take!]]))

(enable-console-print!)

(defn fetch-data [ch]
    (println "Fetching data using core.async...")
    (js/setTimeout #(put! ch 42) 5000))

(defn main []
    (let [ch (chan)]
      (fetch-data ch)
      (take! ch #(println "Processing data:" %))))

(main)


Listing 6: Startpunkt der Anwendung in src/cljs/counter/core.cljs

src/cljs/counter/core.cljs
   (ns counter.core
      (:require [reagent.core :as reagent]
                [re-frame.core :as re-frame]
                [counter.events :as events]
                [counter.views :as views]))

    (defn ^:dev/after-load mount-root []
      (re-frame/clear-subscription-cache!)
      (reagent/render [views/main-panel] (.getElementById js/document "app")))

   (defn init []
     (re-frame/dispatch-sync [:initialize-db])
     (mount-root))

Listing 7: Den Appzustand initialisieren in src/cljs/counter/db.cljs

src/cljs/counter/db.cljs
   (ns counter.db)

    (def default-db
      {:counter 0})

Listing 8: Event Handler in src/cljs/counter/events.cljs

src/cljs/counter/events.cljs
     (ns counter.events
       (:require [re-frame.core :refer [reg-event-db]]
                 [counter.db :as db]))

     (reg-event-db :initialize-db
       (fn [_ _]
         db/default-db))

     (reg-event-db :set-counter
      (fn [db [_ counter]]
         (assoc db :counter counter)))

src/cljs/counter/subs.cljs
    (ns counter.subs
      (:require [re-frame.core :refer [reg-sub]]))

    (reg-sub :counter
      (fn [db]
        (:counter db)))

Listing 9: Subscriptions auf den Appzustand definieren in src/cljs/counter/subs.cljs

src/cljs/counter/subs.cljs
    (ns counter.subs
      (:require [re-frame.core :refer [reg-sub]]))

    (reg-sub :counter
      (fn [db]
       (:counter db)))


Listing 10: HTML generieren mit Hiccup in src/cljs/counter/views.cljs

src/cljs/counter/views.cljs
     (ns counter.views
       (:require [re-frame.core :refer [dispatch subscribe]]
                 [counter.subs :as subs]))

     (defn main-panel []
       (let [counter @(subscribe [:counter])]
         [:div
          [:div counter]
          [:button {:on-click #(dispatch [:set-counter (inc counter)])}
           "Count"]
          [:button {:on-click #(dispatch [:set-counter 0])}
           "Reset"]]))




