Published on march 7, 2023
The team behind the collaborative whiteboard tldraw recently published a library that enables incremental computing in JavaScript. Signia seeks to overcome the fundamental performance limitations of tldraw’s chosen UI and reactive framework for delivering better interactive applications that provide a better user experience. However, Signia can be used independently or in conjunction with any UI framework.
The derived data would have to be recalculated whenever their data dependencies changed. In the case of large derived collections, these recomputations could be costly. Occasionally, derived data may be recomputed when they could be retrieved from a cache instead.
One of the key components of the value proposition of highly interactive single-page web applications like tldraw is the user experience. A key component of the user experience is the responsiveness to user inputs, which is tied directly to the amount of computation that is triggered on the main thread as a result.
There is a part of the computation that occurs due to the framework in use. The performance inefficiencies associated with the framework may have a noticeable impact on the user experience at some level of scale, and these issues must be addressed.
It is common for developers to use reactive data libraries (e.g., jotai, recoil, zustand) to reduce the amount of unnecessary computation performed by the framework. An alternative is to use UI frameworks that already incorporate reactive data capabilities and perform less unnecessary computations by design.
As part of the computation, it is necessary to keep dependent data synchronized with their dependencies. Data dependent on each other can be computed lazily (when needed) rather than eagerly (when their dependencies change); once rather than every time a dependency changes (e.g., through topological sorting of the reactivity graph); or more efficiently. In incremental computing, dependent data is computed at a faster rate.
Signia’s documentation provides an example of derived data that could benefit from incremental computation. Consider an array arr of 10,000 values and a derived variable y derived from arr.map(f). In the event that arr is pushed a new value val, a naive method of recalculating y would be to rerun the map operation over all 10,001 values. An incremental computing approach consists of appending f(val) to the cached mapped array of 10,000 values. Consequently, the naive approach results in one single run of f versus 10,001. In general, the incremental approach can be applied to
The following operations may be performed: filtering, reducing, sorting, and many others (see Self-adjusting computation, Umut A. Acar, 2005).
In Signia, developers can define atoms (independent data) and computed data (derived from atoms), as well as their respective setters and getters.
In addition to these reactive APIs, Signia also provides incremental computing APIs that store a history of input changes. The API user can then incrementally compute the updated derived value based on the cached derived value and the change history. The documentation of Signia provides an example that utilizes the patch format of Immer’s immutable state library. Changes are stored as operations (e.g., add, replace, remove) that correspond to incremental computations (e.g., splice).
The concept of incremental computing is not new. It is possible to use JSON Patch to avoid sending a whole document when only a portion has been modified. Combined with HTTP PATCH, it facilitates standards-compliant partial updates to HTTP APIs. D3’s visualization library allows developers to specify incrementally how a visualization should be updated when input data is entered, updated, and exited.
Signia is open-source software distributed under the MIT license. Contributions and feedback are welcome and should follow the guidelines for contributions.
