lifeart / glimmer-next

GXT is `glimmer-vm` runtime alternative, only 7kb gzipped
https://g-next.netlify.app
MIT License
26 stars 3 forks source link

Reactivity concept #41

Open lifeart opened 4 months ago

lifeart commented 4 months ago

Reactivity

lifeart commented 4 months ago

Comparing to existing Lamport clocks model in GlimmerVM we eliminate tag re-validation phase, and literally executing only values needs to be updated.

Benefits comparing to Lamport clock - is:

Benefits to have update-only VM:

Lookup stage looks like

// DEDUPLICATED SET OF MERGED_CELLS
const MERGED_CELLS_TO_INVALIDATE = new Set(); 

// ACTUALLY CHANGED CELLS
TAGS_TO_INVALIDATE.forEach((CELL) => {
  OPCODES_FOR_CELL(CELL).forEach((opcode) => {
    execute(opcode);
  });
  RELATED_MERGED_CELLS(CELL).forEach((RELATED_CELL) => {
    MERGED_CELLS_TO_INVALIDATE.add(RELATED_CELL);
  });
});

// DERIVED CELLS
MERGED_CELLS_TO_INVALIDATE.forEach((CELL) => {
  OPCODES_FOR_CELL(CELL).forEach((opcode) => {
    execute(opcode);
  });
});
lifeart commented 4 weeks ago

Reactivity in GXT: A Simplified Approach

GXT introduces a streamlined reactivity system inspired by Glimmer's @tracked but with a focus on explicit DOM updates and minimal overhead. This system allows you to build dynamic UIs where changes in data automatically propagate to the view, without the complexity of traditional invalidation-based approaches.

Core Concepts

Key Features

Example

import { cell, formula } from '@lifeart/gxt';

const count = cell(0); // Define a Cell to hold the count
const doubled = formula(() => count.value * 2); // Derive the doubled value

// ... in your template ...

<span>{{count}}</span>
<span>{{doubled}}</span>

// ...

count.value++; // Updating the count will automatically update the DOM

In this example, updating the count Cell will trigger a re-evaluation of the doubled Formula and an update to the DOM elements displaying both values.

Benefits

This reactivity system is a core part of GXT's philosophy of providing a lightweight and performant framework for building modern web applications.