Programs

A program is a single unit of code which runs inside a DOM element to provide an interactive component.

Reactive.Mount(() => {
  const ui = Dom(() => {
    const count = Reactive.State(Maths.Integer)(0);

    Layout.Row(() => {
      Button.Integer.Decrement(count, () => {
        Content.Text("decrement");
      });
      Content.Text(count);
      Button.Integer.Increment(count, () => {
        Content.Text("increment");
      });
    });
  });
  return { content: ui.content };
}, { content: { root: document.getElementById('app') } });
A counter program mounted into the page

The top level

The program function declares its state with Reactive.State and describes the view by calling components. Mounting it runs the function once and renders the result into the target element.

Everything the program needs is inside that one function. It reads count to show it in the middle, and the two buttons step it up and down. The update loop derives how to update the display when count changes, so the function only describes the view.

The update loop

Reactive runs the program, shows the result, and waits. When a value is set, it runs the program again and reconciles the new result against what is already on the page. That is the entire loop.

1

Run

The program function executes top to bottom, reading state and emitting the view it describes.

2

Render

The driver projects that emitted view onto the page, building it the first time.

3

Set

An event sets a value. The change is queued and another run is scheduled.

4

Re-run

The whole program runs again; the driver patches only what actually changed.

Steps 3 and 4 repeat for the life of the application: every set schedules a fresh run, and every run ends in a patch. The program is always a plain, from-scratch description of the page for the current state, and the driver alone touches the DOM.

Re-running the whole program

Running the entire program on every change keeps the model simple: one code path, automatic subscriptions, and a single fixed order of execution. The view is always a direct function of the state that produced it.

Keeping that cheap is stable identity. Each piece of state and each emitted element gets an identity from its position in the program, so across runs Reactive can match this run's output to the last one: state persists in place, and the driver updates only the attributes and text that differ instead of rebuilding the page. Re-running everything stays cheap because almost everything is reused, with room to make it cheaper later by skipping parts of the program whose inputs held steady.