Reactivity & Optimistic UI

Today, users demand near-instant feedback from their applications, expecting smooth and seamless interactions. Traditional asynchronous operations can sometimes slow down this experience. That's the reason why SignalDB uses reactivity and makes it easy to achieve an Optimistic UI.

Understanding Optimistic UI

Optimistic UI is a design pattern where the application UI is updated immediately based on the expected result of an action, without waiting for a server's confirmation. It's all about improving the perceived performance of the application and delivering a more responsive user experience.

Key benefits of Optimistic UI are an improved User Experience (UX) and a general improved responsiveness of an application. Immediate feedback enhances user confidence in the application. The application feels more faster, since it will not wait for server confirmation and this means there's no noticeable lag for the user.

SignalDB's Role in Promoting Optimistic UI

SignalDB's reactive architecture, combined with its memory storage, forms the backbone for implementing Optimistic UI. The database allows instant updates to the UI based on anticipated changes, which are then synchronized with actual data once it's processed.

Signals and Reactivity

SignalDB harnesses signals, derived from functional reactive programming, to manage reactivity. The resurgence of signals, particularly after the popularity of solidjs in 2023, places SignalDB in a prime position.

1. Integration with Signal Libraries: SignalDB's design remains neutral to any particular signal library, offering integration through reactivity adapters. This compatibility ensures an up-to-date UI in tandem with data changes.
2. Reactivity Adapters: With these adapters, SignalDB can instantly query documents within a collection reactively. They seamlessly integrate with signal libraries, ensuring auto-updates to reactive queries when data changes.

By providing a smooth, responsive user experience, SignalDB ensures that user interactions remain at the forefront of modern web design and functionality.

Data Persistence and Optimistic UI

Where a collection keeps its data is decided by its data adapter: the DefaultDataAdapter keeps it in memory, while other data adapters read it from storage or run the queries in a Web Worker. Keeping the data across sessions or reloads is the job of storage adapters, which persist it in localStorage, IndexedDB, OPFS or the file system. When coupled with Optimistic UI, the user's experience remains unaffected even while a write is still on its way to storage.

Also check out the core concepts about reactivity.

Reactivity Libraries

We provide prebuilt reactivity adapters for existing reactivity libraries. If an adapter is missing, feel free to request it by opening an issue at Github or write one at your own. See createReactivityAdapter for more information.

For some libraries, it wasn't possible to implement a onDispose method in the adapter. That means that you have to cleanup the cursor manually after the reactive context was closed. There are examples on the specific adapter documentation pages. Make sure that you implement it properly, since not doing this can lead to memory leaks.

Scope checking is only supported by a few libraries. Scope checking means, that SignalDB is not able to check if a cursor was created from a reactive scope ((find/findOne called in an effect function)) and applies the required event handlers used to provide the reactivity. To avoid memory leaks, use an adapter with scope checking or pass { reactive: false } to your options
(e.g. <collection>.find({ … }, { reactive: false })).

Library	Reactivity adapter	Automatic Cleanup	Scope check
@preact/signals-core	✅	❌	❌
@reactively/core	✅	✅	❌
@webreflection/signal	❌	-	-
alien-signals	✅	❌	❌
Angular Signals	✅	❌	❌
Maverick-js Signals	✅	✅	✅
Meteor Tracker	✅	✅	✅
MobX	✅	✅	❌
oby	✅	✅	✅
Qwik	❌	-	-
S.js	✅	✅	❌
signal-polyfill	❌	-	-
signia	❌	-	-
sinuous	✅	✅	❌
Solid Signals	✅	✅	✅
sprae (see #858)	✅	❌	❌
Svelte Runes	✅	✅	✅
ulive	❌	-	-
usignal	✅	❌	❌
Vue.js refs	✅	❌	❌