Autumn.js — A Deterministic, Low-Latency Frontend Engine

Autumn.js is a reactive, deterministic, multi-threaded frontend runtime designed for extremely large datasets and real-time UIs. It avoids the traditional VDOM model and instead uses a reactive DAG, a custom scheduler, and GPU-aware rendering paths to guarantee predictable performance.

It is optimized for scenarios where:

• The UI must remain stable under heavy load
• Data pipelines exceed millions of elements
• The main thread cannot stall
• Sorting, filtering, and scrolling occur simultaneously

---

Core Concepts

1. Reactive DAG (Directed Acyclic Graph)

• Signals map directly to atomic nodes in a DAG
• Updates are deterministic
• No component re-renders
• Downstream computations re-run only when their inputs change
• DOM becomes a leaf node, not the engine of recomputation

Contrast with React, where component re-renders cascade through the tree.

2. Frame-Deterministic Scheduler

Autumn.js maintains a four-phase loop:

1. Input
2. Animation
3. Render
4. Background (worker tasks)

This ensures:

• No GC surprises
• Predictable frame durations
• Render commits always happen in the same order
• Sorting/filtering never interrupts scrolling frames

3. Multi-Threaded Data Pipeline

Autumn.js uses:

• SharedArrayBuffer
• Atomics
• Typed arrays
• Worker “lanes”

This allows:

• Sorting and filtering off the main thread
• Zero-copy access to results
• Stable update cycles
• Background tasks without blocking animation frames

4. Custom Virtualization

• Browser height limits do not apply
• Stable row window and GPU-transformed container
• All calculations done in typed memory
• Millions of rows scroll smoothly with no DOM churn

---

Example: Integrating Autumn.js in an App

import {
  useAutumnSignal,
  AutumnEffect,
  AutumnComponent,
} from "../../autumn-core/core/autumn";

// Signals
const sortKey = useAutumnSignal("id");
const filterText = useAutumnSignal("");

// Background worker pipeline
const worker = new Worker(new URL("./pipeline-worker.js", import.meta.url), {
  type: "module",
});

worker.postMessage({
  rows,
  sharedBuffer,
});

// Rendering with AutumnComponent
export const GridView = AutumnComponent(() => {
  const dataView = new Grid({
    columns: COLUMNS,
    rows,
    sortKey,
    filterText,
  });

  return (
    <div className="grid-container">
      {dataView.render()}
    </div>
  );
});

// Effects
AutumnEffect(() => {
  worker.postMessage({
    type: "filter",
    query: filterText(),
  });
});

Notes:

• AutumnComponent does not re-render; it binds reactive nodes to DOM leaves
• AutumnEffect defines edges in the DAG — no implicit reactivity

---

Performance Characteristics

Scrolling

• Virtual window height never changes
• GPU transform moves the window
• No DOM mutations while scrolling
• Maintains 60–120fps on stable hardware

Filtering & Sorting

• Done in Web Workers
• Results stored in SharedArrayBuffer
• Main thread only updates row indices
• No garbage created in hot paths

Memory Behavior

• Object pools for cell instances
• Recyclable DOM node strategy
• Typed arrays for all row-level metadata
• Eliminates GC interruptions

---

Architecture Overview

Application Layer
  UI components: grids, dashboards, controls
Signals & Reactivity
  Atomic DAG nodes, deterministic propagation
Scheduler Engine
  Input → Animation → Render → Background
Renderer Layer
  DOM commits, GPU transforms, zero-churn updates
Data & Memory Layer
  Typed arrays, SharedArrayBuffers, object pools

Each layer is standalone and observable.

---

Why It Works

Autumn.js avoids every performance trap common in frameworks:

• No VDOM
• No component re-render cycles
• No diffing
• No unbounded object creation
• No layout thrash
• No uncontrolled GC

The system is data-oriented, not component-oriented.

---

Installation

# Clone the repo
git clone https://github.com/renderhq/autumnjs.git
cd autumnjs

# Install dependencies
yarn install
# or
bun install

# Start the development server
yarn dev

---

Running a Grid Example

import { GridView } from "./GridView";
function App() {
  return <GridView />;
}

---

Questions You Might Be Asked

1. How does Autumn.js achieve deterministic rendering? Answer: By enforcing a fixed 4-phase frame loop and preventing state changes during render. Signals update → scheduler commits → DOM patched → workers run in background. No mid-frame updates or unpredictable re-renders occur.

2. How do workers sort/filter without blocking the UI? Answer: All datasets live in SharedArrayBuffer-backed typed arrays. Workers compute new row orders by writing indices into the shared buffer. The main thread reads these indices without copying data or allocating objects.

---

License

MIT — includes examples, benchmark harness, DAG inspector, FPS overlays