DEV Community: Robert Sanders

Side Effects: Angular Signals vs rs-x

Robert Sanders — Wed, 18 Mar 2026 14:24:16 +0000

The Problem

You want to react to state changes and run some code as a side effect.

Every reactive library solves this. But how they solve it changes a lot about your code.

Angular Signals — `effect()`

effect(() => {
  console.log('price changed:', price());
});

✅ Simple to read

⚠️ Re-runs when any signal read inside changes

⚠️ Requires Angular's runtime and compiler

⚠️ Lifecycle managed separately from your data

rs-x — The Sequence Expression

const expr = rsx(
  '(trackPrice(price), trackQty(quantity), price * quantity)'
)(model);

(a, b, c) is standard JavaScript.

The comma operator evaluates left to right and returns the last value.

rs-x parses it exactly as a JS engine would — no new syntax, no compiler.

Fine-Grained by Default

rsx('(trackPrice(price), trackQty(quantity), price * quantity)')(model)
//       ↑ tracks price       ↑ tracks quantity        ↑ return value

Change	Re-runs
`model.price = 150`	`trackPrice` only
`model.quantity = 5`	`trackQty` only
Both change	Both re-run

Each segment tracks its own dependencies — independently.

Conditional Side Effects

rsx('(count > limit && onOverflow(count), count)')(model)

&& short-circuits — standard JavaScript behaviour.

onOverflow is only called when the guard is truthy.

count is still tracked as the return value regardless.

Lifecycle — Zero Ceremony

const expr = rsx('(notify(status), status)')(model);

// Later...
expr.dispose(); // ← every side effect cleaned up automatically

	Angular Signals	rs-x
Register	`effect(() => {...})`	part of the expression string
Cleanup	`DestroyRef` / manual	`expr.dispose()`
Scope	Angular component	the expression itself
Syntax	Framework API	standard JavaScript

Cross-Property Tracking

// trackView watches userId
// formatName watches profile.name
// Each is independent

rsx('(trackView(userId), formatName(profile.name))')(model)

Change userId → trackView re-runs, formatName does not

Change profile.name → formatName re-runs, trackView does not

The Philosophy

No new API surface. No compiler. Just JavaScript expressions, tracked reactively.

Side effects are co-located with the data they read.

Their lifecycle is owned by the expression, not your application code.

When the expression is disposed — the side effects go with it.

Learn More

📖 Side effects deep dive → https://rsxjs.com/docs/core-concepts/side-effects

▶️ Live playground → https://rsxjs.com/playground

⭐ rs-x on GitHub → github.com/robert-sanders-software-ontwikkeling/rs-x

Reactive Data Without the Async Headaches

Robert Sanders — Wed, 04 Mar 2026 23:06:40 +0000

Modern frontend development often turns into a battle with async code:

async/await
subscriptions
dependency arrays
memoization
race conditions
unnecessary recomputations

What if you could simply describe your data and let the system
handle the rest?

That's exactly the idea behind rs-x.

To demonstrate it, I built a small demo that tracks the real-time
position of the International Space Station (ISS).

👉 Live demo: https://robert-sanders-software-ontwikkeling.github.io/rs-x/demo

The Idea

The demo polls a public ISS API and exposes the data as part of a
reactive model. ⚠️ Note > If many people open the demo simultaneously, the public ISS API may return Too Many Requests errors due to rate limits.

It returns:

timestamp
latitude
longitude
altitude
velocity

At the same time the model contains an expensive computation to
demonstrate how rs-x handles dependencies.

The key idea:

Only recompute what actually depends on changed data.

The Demo

The API is polled every few seconds using RxJS.

const $ = api.rxjs;
const rsx = api.rsx;

const issRaw$ = $.interval(2000).pipe(
  $.startWith(0),
  $.switchMap(() =>
    $.from(
      fetch('https://api.wheretheiss.at/v1/satellites/25544')
        .then((r) => r.json())
    )
  ),
  $.map((data) => ({
    ts: Number(data.timestamp ?? 0),
    lat: Number(data.latitude ?? NaN),
    lon: Number(data.longitude ?? NaN),
    altKm: Number(data.altitude ?? NaN),
    velKph: Number(data.velocity ?? NaN),
  })),
  $.shareReplay({ bufferSize: 1, refCount: true })
);

Derived Reactive Data

Next we derive a stream that only emits when the ISS position
meaningfully changes.

const geoInputs$ = issRaw$.pipe(
  $.map((x) => ({
    latQ: Math.round(x.lat * 100) / 100,
    lonQ: Math.round(x.lon * 100) / 100,
  })),
  $.distinctUntilChanged(
    (a, b) => a.latQ === b.latQ && a.lonQ === b.lonQ
  )
);

This prevents unnecessary recomputation.

The Reactive Model

Now we define the model.

const model = {
  iss: issRaw$,
  geo: geoInputs$,

  heartbeat: 0,
  expensiveRuns: 0,

  expensiveGeoScore(lat, lon) {
    model.expensiveRuns++;

    let acc = 0;
    for (let i = 0; i < 3_000_000; i++) {
      acc += Math.sin(i);
    }

    const score =
      Math.round((Math.abs(lat) * 1.7 + Math.abs(lon) * 0.9) * 100) / 100;

    return score;
  },
};

The function intentionally simulates a CPU-heavy computation.

A Completely Declarative Expression

Finally we describe the data we want.

return rsx(`
({
  heartbeat,

  issTs: iss.ts,
  altKm: iss.altKm,
  velKph: iss.velKph,

  lat: iss.lat,
  lon: iss.lon,

  geoScore: expensiveGeoScore(geo.latQ, geo.lonQ),

  expensiveRuns
})
`)(model);

That's it.

What Happens When Data Changes?

Two independent updates happen in the demo.

ISS position updates

When the ISS position changes:

The expensive computation runs again.

Heartbeat updates

A separate part of the model changes every few seconds.

setInterval(() => {
  model.heartbeat++;
}, 5000);

This does not trigger the expensive computation.

Why?

Because the expression only depends on:

geo.latQ
geo.lonQ

rs-x tracks these dependencies automatically.

Why This Matters

In many systems you need to manually manage recomputation:

useMemo
useEffect
dependency arrays
caching
manual optimization

With rs-x the rule is simple:

Describe your data and its relationships.

The runtime builds a reactive dependency graph and recomputes only
what is required.

The Mental Model

Think of it like a spreadsheet.

If cell A1 changes:

only cells that depend on A1 update
unrelated cells remain untouched

rs-x brings this model to JavaScript expressions.

The Result

The demo creates a reactive computation graph that:

handles async streams
tracks dependencies automatically
avoids unnecessary recomputation
keeps code declarative and simple

No async orchestration.

No manual dependency tracking.

Just describe the data.

Support the Project

If you like rs-x, consider supporting the project:

https://github.com/sponsors/robert-sanders-software-ontwikkeling

It helps me continue building open source tools for developers.

javascript #reactiveprogramming #rxjs #opensource #webdevelopment

Software Engineering After AI

Robert Sanders — Thu, 26 Feb 2026 14:19:18 +0000

About a year ago, I started experimenting with using AI to develop software.

At first, I wasn’t very impressed. I had quite high expectations, partly influenced by the media. But then I began to realize that you have to guide the AI by asking the right questions. Don’t expect the AI to generate readable, maintainable code if you simply say, “Can you implement feature X for me?” It will just do that (sometimes incorrectly) and generate one big blob of code.

Writing code with AI is similar to agile development: you work in small steps. In the diagram below, you can see the workflow I used. I added a brain icon to indicate where human interaction is especially important. You need to be able to ask the right questions to push the AI in the right direction. Without proper guidance, the AI quickly get lost.

Sometimes the AI is simply not able to solve your problem. In those cases, you have to implement it yourself.

I was quite impressed with the results. I built a user interface with React (I normally use Angular) and implemented a fairly complex application in just two weeks. Along the way, I also learned a lot about React. Normally, this would have taken me months. I was able to keep the code manageable by constantly refactoring, and I used AI here as well to speed up the process.

Lesson learned:

Vibe coding without deep domain knowledge is an illusion. Without solid software engineering fundamentals, you are not guiding the AI — you are wandering with it. The quality of the outcome is directly proportional to the quality of the questions you ask.
Mastery of a specific language or framework is becoming less critical. I don’t need to be a React expert to build a solid React application. What matters far more is architectural thinking, system design, and a strong understanding of web fundamentals and UX principles etc. These are the skills that allow you to evaluate, refine, and direct the AI toward the right solution.
The role of the software engineer is evolving. We are becoming conductors of intelligent systems. Instead of writing every line of code, we orchestrate, refine, and shape the output. This shift demands experience, judgment, and the right mindset. The future belongs to engineers who understand systems deeply and can collaborate effectively with AI.

You can see the result here: https://robert-sanders-software-ontwikkeling.github.io/rs-x/

For more information see rs-x opensource project: https://github.com/robert-sanders-software-ontwikkeling/rs-x

Managing the React useState hell

Robert Sanders — Sun, 15 Feb 2026 12:44:13 +0000

React depends heavily on immutable data to detect changes.
You define state explicitly, and React re-renders when references change.

import React { useState } from 'react';

type ChangEvent = React.ChangeEvent<HTMLInputElement>;

const  Sum: React.FC = () => {
    const [a, setA] = useState(20);
    const [b, setB] = useState(20);

    const onAChange = (e: ChangEvent) => {
        const  value = Number(e.target.value);
        setA(value);
    };

    const onBChange = (e: ChangEvent) => {
        const  value = Number(e.target.value);
        setB(value);
    };

    const sum = state.a + state.b;

    return (
        <>
            <div>
                <input  onChange={onAChange}  />
                <input  onChange={onBChange}  />
            </div>
            <div>
                {a} + {b} = {sum}
            </div>
        </>
    );
};

In this example, we only have two pieces of state, and it is still manageable.

But when the state in your component starts to grow, it becomes difficult to manage. You begin losing track of which parts of state exist and how they interact.

A Structured Approach

To improve this, you can reorganize your code:

Define an interface for your state
Define a class that builds a new state based on changes
Use a single useState call
Use a state builder to construct new state instances

This separates state-building logic from the component and gives you a clear overview of your state structure.

import React { useState } from 'react';

interface  IAppSTate {
    a: number;
    b: number;
}

export  class  AppStateBuilder {
    constructor(private  _state: IAppSTate) { }

    public  get  state(): IAppSTate {
        return  this._state;
    }

    public  setA(a: number): this {
        this._state = {
            ...this._state,
            a
        };
        return  this;
    }

    public  setB(b: number): this {
        this._state = {
            ...this._state,
            b
        };
        return  this;
    }
}

type ChangEvent = React.ChangeEvent<HTMLInputElement>;

const  Sum: React.FC = () => {
    const [state, setState] = useState<IAppSTate>(
        { a:  10, b:  20 }
    );

    const onAChange = (e: ChangEvent) => {
        const  value = Number(e.target.value);
        setState((prevState) =>  
            new AppStateBuilder(prevState).setA(value).state
        );
    };

    const onBChange = (e: ChangEvent) => {
        const  value = Number(e.target.value);
        setState((prevState) => 
            new  AppStateBuilder(prevState).setB(value).state
        );
    };

    const sum = state.a + state.b;

    return (
        <>
            <div>
                <input  onChange={onAChange} />
                <input  onChange={onBChange} />
            </div>
            <div>
                {state.a} + {state.b} = {sum}
            </div>
        </>
    );
};

This reduces complexity by separating state construction logic from UI logic.
However, this approach still has a major drawback.

If your state contains nested objects, arrays, or maps, updating state becomes increasingly complex. You must constantly ensure that you create new references for every modified branch of the object tree.

This leads to more spreading, more copying, and more room for mistakes.

A Third Approach: Reactive Models using (RS-X)

Instead of manually rebuilding immutable state trees, you can use a reactive model approach.

With RS-X:

You create a stable reference to your model (using React.useRef)
You make the model reactive
You update fields directly
The UI updates automatically

Example:

import React { useRef, useState } from 'react';
import { useRsxModel } from  '@rs-x/react'

interface  IAppSTate {
    a: number;
    b: number;
}

type ChangEvent = React.ChangeEvent<HTMLInputElement>;

const  Sum: React.FC = () => {
    const  modelRef = useRef<IAppSTate>({ a:  10, b:  20 });
    const  state = modelRef.current;
    useRsxModel<IAppSTate, IAppSTate>(state);

    const onAChange = (e: ChangEvent) => {
        state.a = Number(e.target.value);
    };

    const onBChange = (e: ChangEvent) => {
        state.b = Number(e.target.value);
    };

    const sum = state.a + state.b;

    return (
        <>
            <div>
                <input  onChange={onAChange} />
                <input  onChange={onBChange} />
            </div>
            <div>
                {state.a} + {state.b} = {sum}
            </div>
        </>
    );
};

References:

Make Reactivity easy

Robert Sanders — Sun, 15 Feb 2026 09:01:00 +0000

Many UI frameworks make reactivity feel unnatural.

React relies heavily on immutability so it can detect changes efficiently using reference checks.

That works, but it also means you often end up writing lots of copying/spreading code just to update state.

Angular is moving toward a more reactive model with Signals.

Signals are powerful, but they still introduce a new API and a different way of thinking:

Wrap values
Use set() / update()
Add extra wiring (effect() / useEffect()) especially around async flows

But most developers don’t naturally think in “signals”.

We think in:

data models
operations
plain TypeScript / JavaScript
and simply assigning values when something changes

A More Natural Approach

What if reactivity was not something you had to learn…

…but something that felt like a natural extension of JavaScript?

That is the goal of RS-X:

Make reactivity feel like part of TypeScript itself — similar to how LINQ made SQL-like queries feel native in C#.

You shouldn’t need a special API for async vs sync data either.

Just write your model, mix promises and values, and let the framework handle the rest.

Example

const model = {
  a: Promise.resolve(10),
  b: 20,
  c: BehaviorSubject(30)
};

const expression = rsx`a + b + c`(model);

expression.changed.subscribe(() => {
  console.log(expression.value);
});

//Will trigger change even
model.a = Promise.resolve(50);
model.b = 60;
model.c.next(70);

Check out the RS-X project on github

RS-X: simplifying reactive programming in React

Robert Sanders — Tue, 10 Feb 2026 10:24:30 +0000

RS-X is a reactive framework that enables you to think in a more declarative way about your data and operations:

You define your data model
You define your operations via expressions
You bind the expressions to your data model
You can now just manipulate the data, and the expressions will update automatically

With RS-X, you don’t need to wire everything through useState, useEffect, or derived state.

Your data model itself becomes reactive, and React simply renders the result.

What changes with RS-X in React

Instead of thinking in terms of:

syncing state
effects
memoized selectors

You work directly with your data model.

When the model changes:

dependent expressions update automatically
React re-renders only where needed

No extra glue code.

Why this is different

No need to mirror your data into React state
No useEffect chains to keep things in sync
No derived state bugs
You update the model → the UI follows

RS-X tracks dependencies at the expression level, not the component level.

Async is first-class

RS-X also handles asynchronous data naturally:

Promises in your model are resolved reactively
Expressions update when async values arrive
No loading-state orchestration required

How it fits into React

RS-X doesn’t replace React — it simplifies what React has to manage.

React stays focused on rendering.

RS-X handles:

reactivity
dependency tracking
expression evaluation

Why I built this

I wanted:

reactive data without a global store
fewer hooks and less boilerplate
a model-driven way of thinking
predictable updates without over-rendering

React support makes that approach practical in real applications.

You can see it in action on StackBlitz: React demo

Feedback is very welcome.

— Robert

References

Using RS-X with React 🎉

Robert Sanders — Tue, 10 Feb 2026 09:26:27 +0000

With RS-X, you don’t need to wire everything through useState, useEffect, or derived state.

Your data model itself becomes reactive, and React simply renders the result.

What changes with RS-X in React

Instead of thinking in terms of:

syncing state
effects
memoized selectors

You work directly with your data model.

When the model changes:

dependent expressions update automatically
React re-renders only where needed

No extra glue code.

Why this is different

No need to mirror your data into React state
No useEffect chains to keep things in sync
No derived state bugs
You update the model → the UI follows

RS-X tracks dependencies at the expression level, not the component level.

Async is first-class

RS-X also handles asynchronous data naturally:

Promises in your model are resolved reactively
Expressions update when async values arrive
No loading-state orchestration required

How it fits into React

RS-X doesn’t replace React — it simplifies what React has to manage.

React stays focused on rendering.

RS-X handles:

reactivity
dependency tracking
expression evaluation

Why I built this

I wanted:

reactive data without a global store
fewer hooks and less boilerplate
a model-driven way of thinking
predictable updates without over-rendering

React support makes that approach practical in real applications.

You can see it in action on StackBlitz: React demo

Feedback is very welcome.

— Robert

References

Showing the Power of RS-X with a “Scary” Credit-Risk Formula

Robert Sanders — Thu, 05 Feb 2026 09:12:00 +0000

When I explain RS-X, I like to use examples that look way more complicated than necessary.

This helps us to test the power of RS-X. For this post, I want to use a credit-risk formula. With this formula, I can demonstrate the following features:

Mix synchronous and asynchronous data effortlessly.
Modular expressions: support for splitting up a monolithic expression into sub-expressions.
Automatic updating of the expression value when bound data changes. You can use your data model as the source of truth. Changing your data model will automatically update the value of the expression.

The formula (monolithic version)

Here’s a “scary” credit-risk formula in JavaScript with model:

//Model
export interface ICustomer {
    age: number;
    income: number;
    employmentYears: number;
}

// Credit info
export interface ICredit {
    score: number;
    outstandingDebt: number;
}

// Market parameters
export interface IMarket {
    baseInterestRate: number;
}

// Risk parameters
export interface IRisk {
    volatilityIndex: number;      // e.g., market volatility
    recessionProbability: number; // e.g., probability of economic downturn
}

// Risk calculation parameters
export interface IRiskCalcParameters {
    readonly market: IMarket;
    readonly risk: IRisk;
}

// Make it asynchronous to simulate API calls for fetching data.
export interface IRiskModel {
    readonly customer: BehaviorSubject<ICustomer>;
    readonly credit: BehaviorSubject<ICredit>;
    readonly riskParameters: BehaviorSubject<IRiskCalcParameters>;
}

//Nonolithic scary formula
(
    (credit.score < 600 ? 0.4 : 0.1) +
    (credit.outstandingDebt / customer.income) * 0.6 -
    (customer.employmentYears * 0.03) +
    (customer.age < 25 ? 0.15 :
     customer.age < 35 ? 0.05 :
     customer.age < 55 ? 0.00 :
     0.08) +
    (riskParameters.risk.volatilityIndex * 0.5 +
     riskParameters.risk.recessionProbability * 0.5) +
    (riskParameters.market.baseInterestRate * 2)
) >= 0.75 ? 'HIGH' : (
(
    (credit.score < 600 ? 0.4 : 0.1) +
    (credit.outstandingDebt / customer.income) * 0.6 -
    (customer.employmentYears * 0.03) +
    (customer.age < 25 ? 0.15 :
     customer.age < 35 ? 0.05 :
     customer.age < 55 ? 0.00 :
     0.08) +
    (riskParameters.risk.volatilityIndex * 0.5 +
     riskParameters.risk.recessionProbability * 0.5) +
    (riskParameters.market.baseInterestRate * 2)
) >= 0.45 ? 'MEDIUM' : 'LOW'
);

This looks scary, or not 😄. So let's split it up into sub-expressions to make it more readable.

Treat your data as living inputs

The data model is simple:

customer info
credit info
market/risk parameters

These values might change independently or arrive asynchronously. RS-X doesn’t care. You just plug them into expressions, and updates flow automatically.

No listeners. No subscriptions. No recalculateRiskScore() calls.

From monolith to modular

Big formulas are messy and inefficient if calculated as a single block. RS-X lets you naturally split formulas into sub-expressions for efficiency and readability. Each sub-expression only recalculates when its inputs change.

Base personal risk

const basePersonalRisk = expressionFactory.create(model, `
    (credit.score < 600 ? 0.4 : 0.1) +
    (credit.outstandingDebt / customer.income) * 0.6 -
    (customer.employmentYears * 0.03)
`) as IExpression<number>;

Explanation: Calculates baseline risk from credit score, debt/income ratio, and employment history.

Age-based risk adjustment

const ageBasedRiskAdjustment = expressionFactory.create(_model, `
    customer.age < 25 ? 0.15 :
    customer.age < 35 ? 0.05 :
    customer.age < 55 ? 0.00 :
    0.08
`) as IExpression<number>;

Explanation: Modifies risk slightly based on age. Keeping it separate makes it readable and reusable.

Market risk (async-friendly)

const marketRisk = expressionFactory.create(_model, `
    (riskParameters.risk.volatilityIndex * 0.5) +
    (riskParameters.risk.recessionProbability * 0.5)
`) as IExpression<number>;

Explanation: Market data arrives asynchronously, but RS-X updates automatically when it changes.

Interest rate impact

const interestRateImpact = expressionFactory.create(_model, `
    riskParameters.market.baseInterestRate * 2
`) as IExpression<number>;

Explanation: Updates automatically if base interest rate changes.

Composing the risk score

const riskScore = expressionFactory.create({
    basePersonalRisk,
    ageBasedRiskAdjustment,
    marketRisk,
    interestRateImpact
}, `
    basePersonalRisk + ageBasedRiskAdjustment + marketRisk + interestRateImpact
`);

Explanation: Combines sub-expressions into a total score. Only recalculates when inputs change.

const riskClassification = expressionFactory.create({
    riskScore: riskScore as IExpression<number>,
    thresholds: { highRisk: 0.75, mediumRisk: 0.45 }
}, `
    riskScore >= thresholds.highRisk
        ? 'HIGH'
        : riskScore >= thresholds.mediumRisk
            ? 'MEDIUM'
            : 'LOW'
`);

Explanation: Converts numeric score to HIGH/MEDIUM/LOW categories. Thresholds are reactive data — updates propagate automatically.

Why this matters

This pattern isn’t just for credit risk. You can use it for:

pricing rules
validation logic
feature flags
scoring models
UI state
basically anything you can imagine

Final thought

RS-X supports modular expressions that enables you to split up complex monolithic expression in reusable sub expressions
async and sync data mix effortlessly
updates propagate automatically and efficiently
You can just use your data model as source of true

With RS-X, you can think in a more declarative way about your data and operations:

You define your data model
You define your operations via expressions
You bind the expressions to your data model
You can now just manipulate the data, and the expressions will update automatically

You can see this in action with the demos on StackBlitz:

References:

RS-X GitHub
NPM packages:

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

Robert Sanders — Wed, 04 Feb 2026 19:07:40 +0000

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:

DEV Community: Robert Sanders

Side Effects: Angular Signals vs rs-x

The Problem

Angular Signals — effect()

rs-x — The Sequence Expression

Fine-Grained by Default

Conditional Side Effects

Lifecycle — Zero Ceremony

Cross-Property Tracking

The Philosophy

Learn More

Reactive Data Without the Async Headaches

The Idea

The Demo

Derived Reactive Data

The Reactive Model

A Completely Declarative Expression

What Happens When Data Changes?

ISS position updates

Heartbeat updates

Why This Matters

The Mental Model

The Result

Support the Project

Tags

javascript #reactiveprogramming #rxjs #opensource #webdevelopment

Software Engineering After AI

Managing the React useState hell

A Structured Approach

A Third Approach: Reactive Models using (RS-X)

Make Reactivity easy

A More Natural Approach

Example

RS-X: simplifying reactive programming in React

What changes with RS-X in React

Why this is different

Async is first-class

How it fits into React

Why I built this

References

Using RS-X with React 🎉

What changes with RS-X in React

Why this is different

Async is first-class

How it fits into React

Why I built this

References

Showing the Power of RS-X with a “Scary” Credit-Risk Formula

The formula (monolithic version)

Treat your data as living inputs

From monolith to modular

Base personal risk

Age-based risk adjustment

Market risk (async-friendly)

Interest rate impact

Composing the risk score

Why this matters

Final thought

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

Key Features

Impact and Use Cases

Getting Started

NPM Packages

Angular Signals — `effect()`