![Page 1: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/1.jpg)
RE-FRAME
![Page 2: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/2.jpg)
LET'S MAKE A CLOCK (WOW!)
![Page 3: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/3.jpg)
TO UNDERSTAND RE-FRAME, YOU MUST BE ABLE TO LIVE WITHOUT IT.
![Page 4: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/4.jpg)
BOOThttps://github.com/boot-clj/boot
![Page 5: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/5.jpg)
BOOT TEMPLATESboot -d seancorfield/boot-new new -t
tenzing -n <name> [+a <option>]*
![Page 6: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/6.jpg)
$ cd <projects dir>$ boot -d seancorfield/boot-new new -t tenzing -n clock-reagent -a +reagent$ cd clock-reagent$ boot dev# Open Chrome on localhost:3000$ atom .
![Page 7: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/7.jpg)
<body> <div id="container"></div> <script type="text/javascript" src="js/app.js"></script> </body>
![Page 8: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/8.jpg)
(ns clock-reagent.app (:require [reagent.core :as r]))
(defn clock-view [] [:h1 "clock"])
(defn init [] (r/render-component [clock-view] (.getElementById js/document "container")))
![Page 9: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/9.jpg)
(ns clock-reagent.app (:require [reagent.core :as r]))
(def db (r/atom (js/Date.)))
(defn clock-view [] [:h1 (.toLocaleTimeString @db)])
(defn init [] (r/render-component [clock-view] (.getElementById js/document "container")))
![Page 10: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/10.jpg)
(ns clock-reagent.app (:require [reagent.core :as r]))
(def db (r/atom (js/Date.)))
(defn tick! [] (reset! db (js/Date.)))
(defn clock-view [] [:h1 (.toLocaleTimeString @db)])
(defn init [] (.setInterval js/window tick!) (r/render-component [clock-view] (.getElementById js/document "container")))
![Page 11: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/11.jpg)
RE-FRAME
![Page 12: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/12.jpg)
$ cd ..$ boot -d seancorfield/boot-new new -t tenzing -n clock-reframe -a +reagent$ cd clock-reframe$ boot dev# Open Chrome on localhost:3000$ atom .# Edit build.boot, adding [re-frame "0.9.4"] dependency
![Page 13: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/13.jpg)
(ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]))
(defn clock-view [] [:h1 "clock"])
(defn init [] (re/render-component [clock-view] (.getElementById js/document "container")))
![Page 14: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/14.jpg)
6 DOMINOES ...event dispatch ->event handling ->effect handling ->query handling ->view rendering ->DOM update -> ...
![Page 15: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/15.jpg)
... AND THEIR FUNCTIONSevent dispatch -> rf/dispatch-sync, rf/dispatchevent handling -> rf/reg-event-db, rf/reg-event-fxeffect handling -> re-frame, rf/reg-fxquery handling -> rf/reg-subview rendering -> rf/subscribeDOM update -> react
![Page 16: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/16.jpg)
(defn init [] (rf/dispatch-sync [:initialize]) (re/render-component...
(rf/reg-event-db :initialize (fn [] {:date (js/Date.)}))
![Page 17: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/17.jpg)
(defn clock-view [] (let [t @(rf/subscribe [:local-time])] [:h1 t]]))
(rf/reg-sub :local-time (fn [db _] (-> db :date (.toLocaleTimeString))))
![Page 18: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/18.jpg)
(defn clock-view [] (let [t @(rf/subscribe [:local-time])] [:h1 t]]))
(rf/reg-sub :local-time (fn [db _] (-> db :date (.toLocaleTimeString))))
![Page 19: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/19.jpg)
(defn init [] (rf/dispatch-sync... (.setInterval js/window #(rf/dispatch [:tick]) 1000) (r/render-component...
(rf/reg-event-db :tick (fn [db _] (assoc-in db [:date] (js/Date.))))
![Page 20: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/20.jpg)
(ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]))
;; EVENT HANDLERS(rf/reg-event-db :initialize (fn [] {:date (js/Date.)}))
(rf/reg-event-db :tick (fn [db _] (assoc-in db [:date] (js/Date.))))
;; QUERY (aka SUBSCRIPTIONS)(rf/reg-sub :local-time (fn [db _] (-> db :date (.toLocaleTimeString))))
;; VIEWS(defn clock-view [] (let [t @(rf/subscribe [:local-time])] [:h1 t]]))
;; LAUNCH POINT(defn init [] (rf/dispatch-sync [:initialize]) (.setInterval js/window #(rf/dispatch [:tick]) 1000) (r/render-component [clock-view] (.getElementById js/document "container")))
![Page 21: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/21.jpg)
NOW, LET'S MAKE A GAME.
![Page 22: RE-FRAME · (ns clock-reframe.app (:require [re-frame.core :as rf] [reagent.core :as re]));; EVENT HANDLERS (rf/reg-event-db:initialize (fn [] {:date (js/Date.)})) (rf/reg-event-db](https://reader033.vdocument.in/reader033/viewer/2022042300/5ecab68def419d3180618be1/html5/thumbnails/22.jpg)
...