DEV Community

Cover image for RS-X: Reactive State and Expressions for JavaScript and TypeScript
Robert Sanders
Robert Sanders

Posted on

RS-X: Reactive State and Expressions for JavaScript and TypeScript

Managing state and computations in JavaScript applications can be complex. Keeping data, dependent logic, and computations in sync often requires boilerplate and manual updates.

RS-X is a library for managing reactive state and expressions in JavaScript and TypeScript. It can make the parts of a plain object reactive that an expression depends on, so any expression automatically updates when its dependent data changes. While it can be used to drive UI updates, RS-X is framework-agnostic and can be applied equally to business logic, server-side computations, or other reactive workflows.


Key Features

  • Reactive Expressions: Expressions can reference synchronous or asynchronous values and automatically update when the underlying reactive data changes.

  • Reactive Models: RS-X only makes reactive the parts of a model that an expression depends on. Each expression can reference its own model subset, and updates propagate to all dependent expressions.

  • Framework-Agnostic: RS-X works in any JavaScript or TypeScript environment. UI frameworks are optional consumers.

  • Optional UI Integration:

    • Angular integration via rsx-pipe is available.
    • React integration is planned.
    • Planned RS-X UI Framework: RS-X will serve as the core engine for data binding. All data-binding expressions are parsed with the RS-X expression parser. The UI framework will consume models and expressions to perform local UI updates.
  • Automatic Change Detection: Dependent expressions update automatically. Developers can also subscribe to the changed event of an expression for programmatic reactions.

  • Compile-Time Safety (Planned): Future TypeScript plugins will integrate RS-X expressions directly into TypeScript, similar to LINQ in C#, ensuring invalid expressions are caught before runtime and providing IntelliSense/autocomplete for reactive models.


Impact and Use Cases

  • Allows developers to reactively track changes in models and expressions. Dependent expressions update automatically, while programmatic subscribers can still listen to the changed event when needed.

  • Reduces boilerplate in wiring expressions to models. RS-X will make the part of the model it needs reactive.

  • Improves maintainability by keeping the reactive model independent from the code that consumes it. Expressions and subscribers react automatically without needing to manage state manually.

  • Supports reactive workflows independent of any UI framework, letting models and expressions serve as the single source of truth for computations.


Getting Started

Check out the RS-X repository for examples, documentation, and an Angular integration demo on StackBlitz:

NPM Packages

Top comments (0)