citrusbyte/oncilla


Client-side database for real-time and optimistic UI

License: ISC

Language: TypeScript

Keywords: client-side, database, javascript, optimistic-ui, reactjs, real-time, typescript


Oncilla logo

Client-side database for easy to implement real-time and optimistic UI.

ISC license npm version npm bundle size Unpolished

Oncilla DB sits between your UI logic (i.e. React components) and your server and synchronizes the data between the two. It rerenders your views when new data arrives, and sends updates to the server in the background, allowing your UI to stay responsive. No matter what happens, whether errors or network connectivity issues arise, Oncilla will work to keep the data between your UI and the server in sync.

Diagram: Oncilla sits between React/Vue.js/Angular and a server database

Great developer experience. Oncilla DB takes on complexity so that your code is as simple as possible. In React components, accessing and changing the data is synchronous and almost as easy as React’s useState. Features like prefetching, real-time updates, optimistic UI become trivial to enable.

Great user experience. Oncilla DB also takes on complexity so that you need not choose between your velocity and the user experience. Great user experience is the default.

Wide flexibility. You can use Oncilla DB with any view and persistence tooling you want. It comes at a cost of a bit more initial configuration, but that is something you setup once and forget. At the moment the primary supported tooling is React for the view and WebSockets for the server, and you still need to implement your database queries.

Stable, but unpolished. Oncilla DB is stable and used in production. That said, it’s a passion project limited by practicality, so many corners are as of yet unpolished, expect to contribute whenever you hit some corner cases or find missing advanced functionality.

Usage

See the setup guide for initial configuration.

Access and modify data with Oncilla with synchronous access.

const [task, updateTask] = useData("tasks", taskId);
if (task === "loading") return <Spinner />;
return (
  <div>
    <input
      value={task.title}
      onChange={e => updateTask(prev => ({ ...prev, title: e.target.value }))}
    />
  </div>
);

A preview of how you access the information about the status of the synchronization, like whether the user is offline and whether any changes are not saved yet:

const connectivity = useConnectivity();
return (
  <div>
    {connectivity === "offline" && <div>Offline. Changes will be saved when you go online.}
    <MyView />
  </div>;
);

Alternatives

Oncilla DB has been heavily inspired by PouchDB, CouchDB, and the Offline First thinking.

PouchDB brings a lot of battle-tested power to the table, but it relies on the CouchDB protocol for replication. Oncilla allows you to define your own replication protocol that will fit your API, or use a small Oncilla WebSocket protocol that is easy to implement in whichever backend.

Another solid option is Apollo Client 2.5 with React Apollo 3. At the time of writing React Apollo 3 is nearing the release. Although Apollo is very GraphQL-oriented, there are some features on the side that allow it to talk over non-GraphQL HTTP.

About Theorem

Theorem

This software is lovingly maintained and funded by Theorem. From whiteboarding new concepts to long-term support, Theorem works with startups and large multi-national enterprises to develop new applications, software, services, and platforms to achieve the best results and deliver Full Stack Innovation™

At Theorem we believe in and support open-source software.

Theorem and the Theorem logo are trademarks or registered trademarks of Theorem, LLC.


The oncilla is a small tiger cat on the IUCN Red List.

Photo of an Oncilla

Project Statistics

Sourcerank 4
Repository Size 895 KB
Stars 9
Forks 0
Watchers 16
Open issues 1
Dependencies 854
Contributors 6
Tags 23
Created
Last updated
Last pushed

Top Contributors See all

Denis Sokolov David Kershaw dependabot[bot] abelino Alex McLain Nathan Quarles

Packages Referencing this Repo

oncilla
Client-side database for real-time and optimistic UI
Latest release 5.3.1 - Updated - 9 stars

Recent Tags See all

v5.3.1 September 03, 2019
v5.3.0 August 02, 2019
v5.2.0 July 23, 2019
v5.1.0 July 18, 2019
v5.0.0 July 15, 2019
v4.1.0 July 11, 2019
v4.0.0 July 09, 2019
v4.0.0 July 09, 2019
v3.1.0 July 08, 2019
v3.0.0 July 05, 2019
v2.4.0 July 04, 2019
v2.3.2 July 03, 2019
v2.3.1 July 03, 2019
v2.3.0 July 02, 2019
v2.2.0 June 06, 2019

Something wrong with this page? Make a suggestion

Last synced: 2019-09-04 21:12:15 UTC

Login to resync this repository