Homebase React

Use a datalog DB to manage react application state.

Supported languages, frameworks and DBs:

• JS + React + Datascript
• CLJS + Reagent + Datascript
• Datahike support coming soon

Javascript + React

This is the Clojure docs site. Go here for JS + React docs.

ClojureScript + Reagent

Start by adding homebase-react.

Optionally add datalog-console and its corresponding chrome extension to inspect the DB in your browser.

Quick Start

(ns homebase.dev.example.reagent.counter
  (:require
   [datascript.core :as d]
   [homebase.reagent :as hbr]
   [datalog-console.integrations.datascript :as datalog-console]))

(def db-conn (d/create-conn {}))
(d/transact! db-conn [[:db/add 1 :count 0]]) ; Transact some starting data.
(hbr/connect! db-conn) ; Connect homebase.reagent to the database.
(datalog-console/enable! {:conn db-conn}) ; Also connect the datalog-console extension for better debugging.

(defn counter []
  (let [[entity] (hbr/entity db-conn 1)] ; Get a homebase.reagent/Entity. Note the use of db-conn and not @db-conn, this makes it reactive.
    (fn []
      [:div
       "Count: " (:count @entity) ; Deref the entity just like a reagent/atom.
       [:div
        [:button {:on-click #(d/transact! db-conn [[:db/add 1 :count (inc (:count @entity))]])} ; Use d/transact! just like normal.
         "Increment"]]])))

Live demo

API

• homebase.reagent

Performance

Our reactive query functions like hbr/entity and hbr/q will only trigger re-renders when their results change.

In the case of hbr/entity we track which attributes get consumed (:attr @entity) and only dispatch updates when those attributes are transacted.

hbr/q queries rerun on every transaction. If the result is different we re-render. We're looking into differential datalog and incremental view maintenance, but for typical datasets of tens of thousands of datoms the current performance is great. DOM updates tend to be much more costly, so just rerunning the queries still performs well as long as we don't repaint the DOM.

Alternatives

• If your prefer d/pull over d/entity take a look at Posh. It supports less of the d/q API, but provides more tools for tuning performance.