Runtime

Runtime (TypeScript)

The eQuantic.UI Runtime is the library that brings the application to life in the browser. It is responsible for transforming the virtual tree generated by the compiled code into real DOM elements and reacting to state changes.

🔄 The Reconciler

Unlike frameworks that recreate the entire DOM, the eQuantic.UI Reconciler compares the current page with the desired new version and applies only the minimum necessary changes.

Diffing Algorithm:

1. Type Comparison: If a node has changed its tag (e.g., div to span), it is replaced entirely.
2. Attribute Update: Only modified attributes are changed in the DOM.
3. Child Management: The reconciler recursively traverses the list of children.

🗝️ Keyed Identity

With the introduction of Keyed Diffing, the reconciler now supports the key property.

• If two nodes in different positions have the same key, the framework understands that the element has been moved, preserving the browser's internal state (such as the cursor position in an input or the scroll state).

🧠 Event and Memory Management

To prevent memory leaks, the runtime uses an event tracking system based on WeakMap.

Advantages of WeakMap:

• Event listeners are mapped directly to the HTMLElement.
• When an element is removed from the DOM and there are no more references to it, the browser's Garbage Collector can automatically clear the event metadata, ensuring that the application's memory consumption remains stable even in long sessions.

💧 Hydration (SSR)

The runtime supports the "Hydration" process, where it takes control of HTML already rendered by the server (SSR). Instead of destroying and recreating, the runtime only attaches the necessary event listeners to the existing elements, ensuring an instantaneous initial load.