Repository files navigation

The React state management library for write-heavy applications

Supported languages, frameworks and DBs:

• JS + React + Datascript (jump)
• CLJS + Reagent + Datascript (jump)
• Datahike support coming soon

As data and our need to annotate and organize it grows, so does our need for supporting state inwrite-heavy applications.

To solve this problem, modern write-heavy applications such as Superhuman, Roam Research, and Facebook Messenger built their own embedded data layers to enable these more sophisticated user experiences.

Homebase-react enables developers to access the same embedded datalog database as Roam Research through React hooks. You no longer have to build out a team or learn specialized tools like Clojure in order to build a delightful write-heavy application.

Homebase is executing on the vision of data usage, portability, and management we had when building Firebase. We never got there. I'm excited!

—James Tamplin, Founder/CEO of Firebase

Datalog is the future of end-user programming, personal productivity software, p2p software, etc.

—Chet Corcos, Founding Engineer of Notion

Start by installinghomebase-react.

# NPMnpm install homebase-react --save# Yarnyarn add homebase-react

Optionally install thedatalog-consolechrome extension to inspect thehomebase-react DB in your browser.

⭐️ 📖Read the JS docs ⚛️ ⭐️

import{useCallback}from'react'import{HomebaseProvider,useEntity,useTransact}from'homebase-react'constRootComponent=()=>(// Create a DB and set some starting data<HomebaseProviderconfig={{initialData:[{counter:{id:1,count:0}}]}}><App/></HomebaseProvider>)constApp=()=>{// Get entity id = 1const[counter]=useEntity(1)const[transact]=useTransact()return(<buttononClick={()=>{// Increment and save the counttransact([{counter:{id:1,count:counter.get('count')+1}}])}>{/* Render the count */}Increment{counter.get('count')}</button>)}

Live demo

Start by addinghomebase-react.

Optionally adddatalog-console and its correspondingchrome extension to inspect the DB in your browser.

⭐️ 📖Read the CLJS docs ƛ ⭐️

(nshomebase.dev.example.reagent.counter  (:require   [datascript.core:as d]   [homebase.reagent:as hbr]   [datalog-console.integrations.datascript:as datalog-console]))(defdb-conn (d/create-conn {}))(d/transact! db-conn [[:db/add1:count0]]); 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.(defncounter []  (let [[entity] (hbr/entity db-conn1)]; 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/add1:count (inc (:count @entity))]])}; Use d/transact! just like normal."Increment"]]])))

Live demo

1. Improve developer tools: custom chrome formatters, DB admin console extension
2. Rewrite React ↔ Homebase cache
   1. Support async DB access (for Datahike)
   2. Reactive query planning (better perf on pages with lots of live reads)
3. SwapDatascript out forDatahike
   1. Immutability
   2. History / Change Tracking
4. Persist to IndexedDB
5. Local-first conflict resolution for offline caching and sync between multiple devices

Homebase React is currently not a good choice for read-heavy applications (e.g. Twitter, ecommerce). We plan to support these query patterns with ourplatform eventually.

There isn't much in the way of React friendly datalog DB based state management for Javascript, but there's at least one alternative if you're a Clojure dev.

• If you preferd/pull overd/entity take a look atPosh. It supports less of thed/q API, but provides more tools for tuning performance.

yarn installyarn dev

Openhttp://localhost:3000

yarn installyarntest

Welcome and thank you! Writing docs, patches and features are all incredibly helpful and appreciated.

We only ask that you provide test coverage for code changes, and conform to ourcommit guidelines.

• Chris Smothers (@csmothers) –Homebase
• JB Rubinovitz (@rubinovitz) –Homebase