Todos Example - Om + Om-Tools vs. Reagent

om.cljs

(ns todos-example.core
  (:require [om.core :as om :include-macros true]
            [om-tools.dom :as dom :include-macros true]
            [om-tools.core :refer-macros [defcomponent]]))

(def app-state (atom {}))

(def firebase-root "https://cljs-todos.firebaseio.com/todos")
(def r (js/Firebase. firebase-root))

(defn clj-val [v]
  (js->clj (.val v) :keywordize-keys true))

(.on r "value" (fn [snapshot]
                  (let [todos (clj-val snapshot)]
                    (swap! app-state assoc :todos todos))))

(defn get-child [id]
  (.child r (clj->js id)))

(defn delete-todo [id]
  (.remove (get-child id)))

(defn update-completed [id]
  (.update (get-child id) (clj->js {:completed (not completed)})))

(defn create-todo [owner]
  (let [text (om/get-state owner :text)
        todo {:description text
              :completed false}
        js-todo (clj->js todo)]
    (.push r js-todo)
    (om/set-state! owner :text "")))

(defcomponent todo-item [fb-todo owner]
  (render [_]
    (let [id (first fb-todo)
          todo (last fb-todo)
          checked (:completed todo)]
      (dom/li
        (dom/input {:type "checkbox"
                    :checked checked
                    :on-change #(update-completed id checked)})
        (:description todo)
        (dom/button {:on-click #(delete-todo id)} "Delete")))))

(defcomponent new-todo [_ owner]
  (init-state [_]
    {:text ""})
  (render-state [_ {:keys [text]}]
    (dom/div
      (dom/label "Add New Todo")
      (dom/br nil)
      (dom/input {:type "text"
                  :value text
                  :on-change #(om/set-state! owner :text (.. % -target -value))
                  :on-key-down #(when (= (.-key %) "Enter")
                                  (create-todo owner))}))))

(defcomponent todos-list [app owner]
  (render [_]
    (dom/div 
      (dom/h1 "Todo List")
      (dom/ul
        (om/build-all todo-item (:todos app)))
      (om/build new-todo nil))))

(defn main []
  (om/root todos-list app-state
    {:target (. js/document (getElementById "app"))}))

reagent.cljs

(ns app-todos.core
  (:require [reagent.core :as reagent :refer [atom]]))

(enable-console-print!)
(def app-state (atom {}))

(def firebase-root "https://cljs-todos.firebaseio.com/todos")
(def r (js/Firebase. firebase-root))

(defn- clj-val [v]
  (js->clj (.val v) :keywordize-keys true))

(.on r "value" (fn [snapshot]
                       (let [todos (clj-val snapshot)]
                         (swap! app-state assoc :todos todos)
                         )))

(defn push [todo]
  (.push r (clj->js todo)))

(defn get-child [id]
  (.child r (clj->js id)))

(defn delete-todo [id]
  (.remove (get-child id)))

(defn update-completed [id completed]
  (.update (get-child id) (clj->js {:completed (not completed)})))

(defn create-todo [text]
  (let [todo {:description @text :completed false}
        js-todo (clj->js todo)]
    (.push r js-todo)
    (reset! text "")))

(defn todo-item [fb-todo]
  (let [id (first fb-todo)
        todo (last fb-todo)
        completed (:completed todo)]
    [:li
      [:input {:type "checkbox"
              :checked completed
              :on-change #(update-completed id completed)}]
      (:description todo)
      [:button {:on-click #(delete-todo id)} "remove"]]))

(defn new-todo []
  (let [text (atom "")]
    (fn []
      [:div
        [:label "Add New Todo"]
        [:br]
        [:input {:type "text"
                :value @text
                :on-change #(reset! text (-> % .-target .-value))
                :on-key-down #(when (= (.-key %) "Enter")
                                (create-todo text))}]])))

(defn todos-list []
  [:div
   [:h1 "Todo List"]
   [:ul
    (for [fb-todo (:todos @app-state)]
      [todo-item fb-todo])]
   [new-todo]])

(defn page-component [] 
  (reagent/create-class {:render todos-list}))

;; initialize app
(reagent/render-component [page-component]
                          (.getElementById js/document "app"))