Designing Active Tags

The System Answer

In Part I, the web stack problems were framed as a reachability issue: small teams get buried under glue, repeated plumbing, and state chaos. Part II is the answer. Active Tags is a compile-first, deterministic workflow-orchestration runtime for DOM components.

Built on a simple explicit virtual machine, it kills ad-hoc glue and delivers operable, reusable behavior in mixed-stack websites without framework lock-in.

Execution kills glue through deterministic pipelines and shifts behavior into reusable library calls. Reuse supports HTML superset reuse and portable components; pipelines traverse structure, not hardcoded IDs, whether markup is server-rendered, server-injected, or runtime-loaded from shared repos.

Minimal Runtime Shape

The article’s reference shape, kept here for quick local reading.

<div
  data-activetag
  at-name="tutorial-counter"
  at-at="import:tutorial-job.js">
</div>

import { install, SERVICE_ID } from "/vendor/m7-js-lib-active-tags/dist/activeTags.standalone.v1.0.min.js";

const lib = install({
  conf: {
    boot: {
      observeDom: true,
      events: true,
      intervals: true,
    },
    job: {
      config: {
        importEnabled: true,
        importPath: ["/vendor/m7-js-lib-active-tags/examples/"],
      },
    },
    engine: {
      hooks: {
        onStage(trace) {
          console.log("stage", trace);
        },
        onTicketDone(trace) {
          console.log("done", trace.summary);
        },
      },
    },
  },
});

const AT = lib.service.get(SERVICE_ID);
if (!AT) throw new Error(`missing ActiveTags service '${SERVICE_ID}'.`);

await AT.start();

// illustrative shape
pipeline: {
  submit: {
    run: [
      "getData",
      "assert",
      "validate",
      "groom",
      "@target.find:selector=.someDiv,reset=true",
      "@dom.patch:textContent=${buffer:value}"
    ],
    error: [
      "@error.dump"
    ]
  }
}

How the Failures Get Solved

1. Boundary Collapse.

   Move behavior governance out of ad-hoc markup and into deterministic runtime policy. Markup stays semantic, runtime behavior compiles from layered config, and inline values remain last-mile overrides.

2. Glue-Driven Architecture.

   Replace god-functions and stitched handler blobs with deterministic stage pipelines. Controllers enqueue work; the engine and VM execute it. Each stage does one job and failure handling stays centralized.

3. State Governance Gaps.

   Make ownership and arbitration explicit. Each discovered data-activetag node maps to a job, and discovery plus observer lifecycle keeps state coherent through DOM churn.

4. Poor Operability.

   Structured traces, stable runtime anchors, and ticket lifecycle visibility shift debugging from archaeology to diagnosis.

5. Non-Linear Scale Failure.

   Reduce scale pressure by cutting glue and enforcing deterministic execution boundaries. Complexity still grows, but it grows in an operable shape.

6. Framework Dependency Debt.

   Framework lifecycles are external business risk. Active Tags is framework-capable, not framework-imposed, so adoption stays incremental instead of all-or-nothing.

What Active Tags Does Not Claim to Solve

• backend observability infrastructure
• business or domain model design
• transport and retry strategy for every API shape
• full-system complexity across every layer

It solves the UI state-governance layer with deterministic runtime behavior and observable execution.

The Point

Part I defined the problems. Part II maps each problem to the specific mechanism that fixes it. This is the system answer: deterministic governance, reduced glue, explicit boundaries, and operable runtime behavior in the browser.

Part III moves from theory to practice with a concrete tutorial walkthrough based on the repository example.

Series Navigation

• Active Tags
• Part I: The Problem
• Part III: Practical Walkthrough