Technical Overview

← Documentation
STRVCT

High-level architecture, core design philosophy, and system-wide concepts of the Strvct framework.

Introduction

Strvct is an open-source, local-first Naked Objects framework built in client-side JavaScript. Instead of requiring developers to manually author and maintain separate domain models, UI component trees, form layouts, validators, client-side state stores, persistence mappings, localization dictionaries, and AI agent tool specifications, Strvct derives the complete application interface and operational infrastructure automatically from an annotated domain model.

Applications built with Strvct operate as single-page web applications (SPAs) executing natively in the browser. The system is designed from the ground up for local-first execution: application state is stored locally in IndexedDB object pools, enabling instant, zero-latency user interaction and full offline functionality. When online, local object pools synchronize transparently with versioned cloud stores.

Annotated Domain Model (SvStorableNode Subclasses) Single source of truth declaring slots, subnodes, and metadata annotations Auto-Generated UI Miller column stacks, tabs, & doc sections Local & Cloud Sync IndexedDB pools & SHA-256 blob store Headless Execution Runs in Node.js with zero DOM dependencies Native AI Tool Surface Constant tool size: schema-fetch & patch

Unlike traditional component frameworks (React, Vue, Svelte, Flutter) or compile-time code generators:

  • No Pre-Rendered View Trees: There is no build step that compiles templates into UI components or static layouts.
  • Lazy Runtime View Derivation: Views are instantiated lazily in response to user navigation through the object graph. Each step inspects target node slot annotations to resolve or create the appropriate SvNodeView.
  • Bidirectional Live Synchronization: Active views observe model nodes through deferred, deduplicated notifications. Updates flow bidirectionally between model and view without manual binding logic.
  • Complete Decoupling: Model objects hold zero references to UI classes or browser DOM elements. The entire domain graph runs headlessly in Node.js for testing, batch processing, or server-side workflows.

The Model-First Triad

Strvct organizes applications into three distinct layers connected by an asymmetric notification architecture:

UI Layer SvNodeView Hierarchy Views Observe node slots; Created lazily on navigation; Discarded when off-screen Model Layer SvNode Object Graph Domain Objects Slots, subnodes, annotations; Zero UI references Storage Layer SvPersistentObjectPool IndexedDB / Cloud Monitors mutations; Batches per-loop changes into atomic transactions mutation notification getter, setter, & action calls mutation notification loads & stores Model is the authoritative source of truth. Views and Storage hold weak references to Model nodes; Model holds zero references to Views or Storage in return.

Layer Responsibilities

  1. Model Layer (SvNode Graph):
    • Authoritative source of truth for all domain data and business logic.
    • Composed of objects inheriting from SvNode (or SvStorableNode).
    • Declares instance properties as slots enriched with metadata annotations.
    • Emits change notifications when slots or subnode arrays mutate, but holds no references to views or persistence handlers.
  2. UI Layer (SvNodeView Tree):
    • Renders visual presentation using lazy, auto-generated master-detail Miller column containers (SvStackView, SvNavView, SvTilesView, SvTile).
    • Observes model notifications and pulls updated values on model mutation.
    • Sends user edit commands back to the model via standard slot setters.
  3. Storage Layer (SvPersistentObjectPool):
    • Monitors model mutation notifications automatically.
    • Batches dirty objects at the end of each browser event loop into transactional IndexedDB operations.
    • Syncs versioned delta commits with cloud storage for cross-device availability.

The Multi-Reader Annotation Bridge

The cornerstone of Strvct's architecture is the Slot Annotation System. Instead of raw instance variables, domain properties are declared as slots with metadata annotations.

Slot annotations act as a multi-reader decoupling bridge. Each framework subsystem reads slot metadata independently to perform its job without cross-system dependencies:

                          +---> UI Generation (Property Tiles & Control Types)
                          |
                          +---> Local Storage & Cloud Sync (IndexedDB Records)
                          |
[ Slot Metadata Bridge ] -+---> Notification Engine (Coalesced Sync Passes)
                          |
                          +---> Native AI Tool Surface (JSON Patch Validation)
                          |
                          +---> Accessibility & i18n (ARIA Roles & Translation)
Annotation SettorPurpose & Subsystem Consumer
setSlotType("String")Selects tile UI input control type, runtime type validation, and AI JSON schema generation.
setShouldStoreSlot(true)Directs SvPersistentObjectPool to include property in serialized storage records.
setSyncsToView(true)Instructs model setter to post notification triggers to active observing views.
setCanEditInspection(true)Exposes property in the modifier-click (Option+Click) live Property Inspector.
setIsSubnodeField(true)Exposes complex properties as navigable child nodes in the UI inspector hierarchy.
setFinalInitProto(ClassName)Auto-instantiates default child objects during initialization if absent from storage.

UI Synchronization Engine

Strvct enforces an asymmetric, notification-driven synchronization architecture:

  1. Push Phase (User Action): When a user edits a property in the UI, the view calls the corresponding setter on the model node (e.g., character.setName("Thorin")).
  2. Notification Phase: The generated slot setter verifies the type, updates internal state, and posts a named change notification via SvNotificationCenter.
  3. Pull Phase (Deferred View Sync): Observing views receive the notification and schedule a sync pass with SvSyncScheduler.
  4. Coalescing & Loop Avoidance: SvSyncScheduler deduplicates multiple mutations within the same event loop, executing a single UI re-render pass at the end of the loop. If setter values have converged, sync halts automatically, preventing infinite update loops.
  5. Memory Safety: Notifications use weak-reference observation patterns, allowing unreferenced views and models to be garbage-collected cleanly without manual listener detachment.

Local & Cloud Persistence

Strvct combines local-first speed with seamless cloud synchronization:

1. Local Object Pools (IndexedDB)

  • Application data is divided into Object Pools (one pool per document/aggregate root).
  • Each domain object is stored as a JSON row keyed by poolId and puuid (persistent UUID).
  • Object references within a pool are stored as { "*": puuid }.
  • External cross-pool references are stored as { "**": poolId }.
  • Mutations queue objects automatically for end-of-event-loop atomic IndexedDB commits.

2. SHA-256 Content-Addressable Blob Store

  • Large binary assets (images, audio, files) are stored separately in SvBlobPool.
  • Keys are computed as SHA-256 content hashes, providing automatic binary deduplication.
  • Records store hash references rather than raw binary data, keeping IndexedDB records lean and fast.

3. Versioned Cloud Commits

  • Cloud persistence mirror the same row format as local IndexedDB.
  • Saving a document computes delta rows modified since the last acknowledged pool version and posts an atomic commit.
  • Conflicts are detected deterministically per pool version rather than silently overwriting data.

Content-Addressable Resource Delivery (CAM)

Real-world Naked Objects applications load hundreds of domain classes, view handlers, and style assets into the browser. Traditional ES module loading (hundreds of individual HTTP requests) creates severe network latency, while standard Webpack/Vite bundlers invalidate full chunks on minor file edits.

Strvct solves this with a Content-Addressable Memory (CAM) build and delivery pipeline:

[ Build Stage: ImportsIndexer ]
  Scan _imports.json tree ---> Compute SHA-256 for each file
  ---> Produce _index.json (path -> hash) & _cam.json.zip (compressed content)

[ Runtime Stage: SvResourceManager & SvHashCache ]
  Fetch _index.json ---> Compare against IndexedDB SvHashCache
  ---> If delta ratio > 30%: Download _cam.json.zip in 1 request
  ---> If delta ratio <= 30%: Download only missing hash files

Key Benefits of CAM Delivery:

  • Hash-Based Caching: Assets are addressed and cached in IndexedDB by SHA-256 hash rather than URL path.
  • Zero-Churn Redeployment: Modifying a single source file invalidates only that file's hash in the cache; returning users download only the edited file.
  • Cross-App Shared Caching: Multiple Strvct applications running on the same origin share the local hash cache for common framework classes.
  • Full Debugger Support: JavaScript source files are evaluated dynamically via eval() with embedded sourceURL annotations, providing complete DevTools debugger capabilities (breakpoints, stack traces, step execution).

Architectural Capabilities ("For Free")

Because Strvct centralizes the pipeline from slot annotations to runtime views, several high-value capabilities fall out of the architecture automatically:

  1. Natively AI-Operable Model: Every class exposes a constant-size tool surface (schema-fetch + apply-patch). AI agents inspect schemas and patch live object graphs directly with automatic schema validation.
  2. Headless Execution: Domain models contain zero DOM dependencies and execute natively under Node.js for ultra-fast unit testing, simulations, or server execution.
  3. Automatic Mobile Responsiveness: Navigation columns (SvStackView) automatically collapse into mobile push/pop stacks with interactive breadcrumb headers on narrow viewports.
  4. Live Property Inspector: Modifier-clicking (Option+Click) any tile reveals a live inspector displaying all declared slots, storage flags, and validation states.
  5. Type-Safe Cross-Window Drag & Drop: Tiles support serialization to JSON MIME types for dragging data across browser windows, desktop apps, or Strvct instances.
  6. Universal Accessibility & Localization: ARIA roles, keyboard navigation, focus management, and AI string translation are applied centrally at the tile primitive level.
  • Implementation Overview: Detailed engineering specifications for classes, slots, views, and persistence.
  • Naked Objects: Architectural paper detailing theoretical foundations and case studies.
  • Comparing to React: Guide for React developers exploring Strvct's model-first paradigm.