Forem: mogera551

No Boilerplate, State Hooks, or Virtual DOM: Structural Paths Usher in a New Era of Frontend Development

mogera551 — Thu, 10 Jul 2025 14:08:19 +0000

Basic Concept
This framework considers UI and state as fundamentally different representations of the same information, treating the structural path as the only reliable source of truth for both UI and state and elevating it to a first-class object. By leveraging existing technologies such as Proxy, it aims to solve many challenges faced in modern web frontend development.

A “structural path” here refers to a full path that points to the structural position of data. To express abstract references, wildcards are used for list elements.
Example:
user = { name: "Alice" };
=> user.name
users = [ { name: "Alice" }, { name: "Bob" } ]
=> users.*.name // Points to Alice or Bob—not “all,” but specifically indicates the data position.

Problems Solved

Fundamental Solution to the Complexity of State Management
By making the structural path the single source of truth, consistency between UI and state is guaranteed, dramatically reducing complex state management logic. This is especially beneficial for large-scale application development.
Elimination of UI-State Synchronization Issues
By closely tying UI and state via the structural path, synchronization mismatches between the two are fundamentally resolved. Although the link is tight, UI and state are associated by contract (the structural path) and, in line with the Dependency Inversion Principle, are considered loosely coupled.
Reduction of State Hooks, Boilerplate, and Improved Developer Experience
Treating the structural path as a first-class object makes data referencing and updates more intuitive, reducing redundant code. By leveraging Proxy’s set trap, state changes can be detected and trigger updates, making state hooks unnecessary. This allows developers to focus more on essential logic.
No Need for Virtual DOM and Potential Performance Gains
When structural paths directly bind to UI elements, intermediate layers such as a virtual DOM become unnecessary, enabling more efficient DOM operations. Because UI and state are connected 1:1 via structural paths, changes to the state can pinpoint-update the relevant UI, and vice versa. This fine-grained update per structural path promises significant performance benefits.
Easier Debugging, Reasoning, and Predictability
Clearly defined structural paths make it easier to track application state changes, facilitating debugging and making code behavior more predictable.
Reduced Cognitive Load
With a single concept (structural path) unifying UI and state, there’s less for developers to learn, reducing both the learning curve and cognitive burden. When UI and state are described within a single component file, using the same structural path for both eliminates context switching, greatly reducing cognitive load. Additionally, using structural paths as a common language in team development significantly eases team-wide cognitive load.
Enhanced Declarative Expression
Structural paths clarify which data structure the UI represents, further strengthening the declarative nature of UI descriptions. Especially with getters, abstract structural paths using wildcards can be used, enabling even more declarative definitions.

Implementation Outline

Data expressed in the UI (conditionals, loops, text interpolation, attribute binding) are specified using structural paths.
State is managed by a class, with state as properties, derived state as getters, and state updates as methods.
Referencing and updating in derived state definitions and update methods use structural paths.
The state management class is extended with Proxy; the get trap resolves structural paths and the set trap detects update triggers.
UI templates and state classes are packaged in a single HTML file and operate as components.
The UI template is parsed to obtain UI elements targeted by structural paths. When expanding a loop, the block inside is similarly parsed, and the UI elements targeted by structural paths are obtained. The acquired structural paths and UI are managed as data binding information.
When an update trigger occurs, the update target is determined based on the data binding information.
When expanding a loop in the UI, a loop context is created and stacked.
The loop context is associated with any data binding or event handler within the loop.
When referencing data bindings or executing event handlers, the corresponding loop context is referred to for structural path resolution.
Even in nested loops, loop contexts are stacked, so any desired loop context can be referenced.
Parent and child components reference parts of the parent’s state, associating the parent’s structural path with the child’s and resolving references and updates through path conversion.
By making dependencies between parent and child components a contract via the structural path, the Dependency Inversion Principle is followed, enabling loose coupling.
The introduction of parent-child components enables divide-and-conquer and greatly alleviates scalability concerns.

Implementation Example

<template>
  <!-- UI -->
  <ul>
  {{ for:users }}
    <li>
      {{ users.*.name }}, {{ users.*.ucName }}
      {{ if:users.*.isInactive }}
        <button data-bind="onclick:activate">activate</button>
      {{ endif: }}
    </li>
  {{ endfor: }}
  </ul>
</template>

<script type="module">
export default class {
  // State: users.*.name indicates Alice, Bob
  users = [ { name:"Alice", active:true }, { name:"Bob", active:false } ];

  // Derived state: users.*.ucName indicates ALICE, BOB
  // Within a loop, the structural path below can be resolved by the loop context
  get "users.*.ucName"() {
    return this["users.*.name"].toUpperCase();
  }

  // Derived state: users.*.isInactive indicates true or false
  // Within a loop, the structural path below can be resolved by the loop context
  get "users.*.isInactive"() {
    return !this["users.*.active"];
  }

  // State update: updates users.*.active via structural path
  // Within a loop, only the users.*.active matching the loop context is changed, and the corresponding UI is updated
  activate() {
    this["users.*.active"] = true;
  }
}
</script>

Implementation Example (Parent/Child)

Parent Component

<template>
  <!-- UI -->
  <ul>
  {{ for:users }}
    <user-comp data-bind="state.user: users.*"></user-comp>
  {{ endfor: }}
  </ul>
</template>

<script type="module">
export default class {
  users = [ { name:"Alice", active:true }, { name:"Bob", active:false } ];
  get "users.*.ucName"() {
    return this["users.*.name"].toUpperCase();
  }
  get "users.*.isInactive"() {
    return !this["users.*.active"];
  }
}
</script>

Child Component

<template>
  <li>
  {{ user.name }}, {{ user.ucName }}
  {{ if:user.isInactive }}
    <button data-bind="onclick:activate">activate</button>
  {{ endif: }}
  </li>
</template>

<script type="module">
export default class {
  user = {};
  activate() {
    this["user.active"] = true;
  }
}
</script>

Constraints

Since the structural path is the only reliable source, using objects as arrays indexed by string keys (like associative arrays) is inappropriate; associative arrays should be treated as objects.
UI and state must use the same data structure. However, by utilizing array filter functions, converting to key-value arrays, and using derived state via getters, most UI structures can be represented.
Due to the single-source-of-truth principle for structural paths, nested loops must always be elements of the original loop. Nested loops with unrelated structural paths cannot be created.
Structural paths for large data sets become lengthy, but they are self-descriptive, finite within a component, follow certain rules, and are easy to analyze. This also enables AI suggestions and IDE support (with separate implementation).
By splitting components and delegating part of the state, structural paths can be localized and shortened.
To uphold the “only reliable source” principle, introducing aliases, scoped variables, or shorthand notations is considered inappropriate.

Structive vs. Vue: A Radar Chart Code Comparison

mogera551 — Thu, 12 Jun 2025 13:59:13 +0000

What is Structive?

Structive is a buildless framework that adopts single-file-based web components. While it may seem simple at first glance, it features structure-driven templates and simplified state management, enabling you to effortlessly build declarative and reactive UIs.

What is Structure-Driven?

It's a style for building applications using structural paths for UI, state, derived state, state updates, and parent-child communication. A structural path indicates the position of data within a hierarchical structure, using a wildcard * for list elements.
For example, with data like users = [ { name:"Alice" }, { name:"Bob" } ], the structural path for the name property of an element in the users list would be users.*.name.

https://github.com/mogera551/Structive

https://github.com/mogera551/Structive-Example

Vue's Radar Chart Example

Vue has a famous example: a radar chart.
You can adjust the values of each axis on the radar chart with sliders, and add or remove axes. The chart updates in real-time as values change, which is quite impactful. We'll implement the same functionality in Structive and compare the code to highlight Structive's unique characteristics. The Structive code we'll discuss is identical to what you can find here.

Let's Compare

File Structure

Both frameworks use single-file components. Vue's example is split into three components (main part, radar chart part, axis title part). Structive, on the other hand, handles state derivation for list elements easily, so it's all contained within a single file.

Template Overview

Both are HTML-based with a declarative syntax.

Vue's Case

The chart and label sections are componentized.

Structive's Case

It's written as a single component without further componentization. It also uses the same structural paths as the state for for blocks, embedding, and attribute binding, aiming for a structure that minimizes logic in the template.

Differences in data paths in the UI:

Vue

<label>{{stat.label}}</label>
<span>{{stat.value}}</span>

Structive

<label>{{ stats.*.label }}</label>
<span>{{ stats.*.value }}</span>

`for` Loop

Vue's Case

It uses the v-for directive. Within the loop, data is accessed using a scoped variable. The axis title is sub-componentized and looped. Also, event handlers within the loop specify the list element as an argument.

Structive's Case

It uses a for block. For list elements within the loop, it specifies a structural path with a wildcard (*) instead of a scoped variable. Additionally, for event handlers within the loop, it only specifies the method name of the state class that performs the state update.

Vue

<axis-label
  v-for="(stat, index) in stats"
  :stat="stat"
  :index="index"
  :total="stats.length"
>
</axis-label>

<div v-for="stat in stats">
  <label>{{stat.label}}</label>
  <input type="range" v-model="stat.value" min="0" max="100">
  <span>{{stat.value}}</span>
  <button @click="remove(stat)" class="remove">X</button>
</div>

Structive

{{ for:stats }}
   <text data-bind="
    attr.x:stats.*.labelPoint.x;
    attr.y:stats.*.labelPoint.y;
  ">{{ stats.*.label }}</text>
{{ endfor: }}

{{ for:stats }}
  <div>
    <label>{{ stats.*.label }}</label>
    <input type="range" data-bind="value|number:stats.*.value" min="0" max="100">
    <span>{{ stats.*.value }}</span>
    <button data-bind="onclick:onRemove" class="remove">X</button>
  </div>
{{ endfor: }}

Attribute Binding and Event Handlers

Let's examine how DOM attributes are bound.

Vue's Case

Binding uses :property-name. For two-way binding, v-model is used. Event handlers are prefixed with @ and can specify arguments. Similar binding is possible for SVG tags.

Structive's Case

All attribute bindings are written within the data-bind attribute. The format is property-name:state-name. For input tags, it automatically becomes two-way. You can specify a type conversion filter for input (data-bind="value|number:stats.*.value"). Event handlers are also written in the data-bind attribute. You can use the @preventDefault modifier to omit calling e.preventDefault() within the event handler. When binding to an attribute within a tag, you specify attr.attribute-name:state-name. SVG tags can be bound similarly to HTML tags. Structural paths are specified for state names.

Vue

<polygon :points="points"></polygon>
<text :x="point.x" :y="point.y">{{stat.label}}</text>
<input type="range" v-model="stat.value" min="0" max="100">
<button @click="remove(stat)" class="remove">X</button>
<input name="newlabel" v-model="newLabel">
<button @click="add">Add a Stat</button>

Structive

<polygon data-bind="attr.points:points"></polygon>
<text data-bind="
  attr.x:stats.*.labelPoint.x;
  attr.y:stats.*.labelPoint.y;
">{{ stats.*.label }}</text>
<input type="range" data-bind="value|number:stats.*.value" min="0" max="100">
<button data-bind="onclick:onRemove" class="remove">X</button>
<input name="newlabel" data-bind="value:newLabel">
<button data-bind="onclick:onAdd@preventDefault">Add a Stat</button>

State Management Overview

Vue's Case

State is defined using variables within the <script setup> in three separate SFC (Single File Component) files. In the parent component, reactive state is declared using ref and reactive. In child components, defineProps is used to define the state to be used. Additionally, computed is used to automatically calculate coordinates based on changes in the number of elements. Event handlers call functions specified in the UI. The arguments passed to these functions are the variables specified in the UI.

Structive's Case

State is defined using a class within the <script type='module'> in a single SFC file. State is declared as properties, and derived state using getters achieves a similar effect to Vue's computed, but it's characterized by defining them using structural paths (e.g., stats.*.point). Event handlers that update the state are defined as methods. The arguments passed to these methods include the Event object and, if called from within a loop, the loop index. preventDefault() can be omitted by specifying the @preventDefault data attribute modifier in the UI. Framework-provided APIs like $getAll can be called via this.

State Declaration

Vue's Case

Variables are declared using ref and reactive within the <script setup> tag. In child components, state is defined using defineProps.

Structive's Case

A state class is defined and exported within the <script type="module"> tag. State is declared as properties of the class. No ref or reactive is specifically needed.

Vue

<script setup>
const newLabel = ref('')
const stats = reactive([...]);
</script>

<script setup>
const props = defineProps({
  stat: Object,
  index: Number,
  total: Number
})
</script>

<script setup>
const props = defineProps({
  stats: Array
})
</script>

Structive

<script type="module">
export default class {
  newLabel = '';
  stats = [...];
}
</script>

State Derivation

Vue's Case

computed is used to define automatically calculated properties. Recalculations for points (polygon vertex coordinates) and point (label display coordinates) are performed based on changes in stats.

Structive's Case

JavaScript getters are used to define virtual properties for state derivation. These include the polygon vertex coordinate property stats.*.point, the label display coordinate property stats.*.labelPoint, the points property for setting the <polygon/> tag's points attribute, and the stats.json property for JSON representation of stats.
Structive automatically tracks dependencies for state referenced by virtual properties. If a referenced state is updated, it's automatically recalculated. For points, you can easily get all elements of stats.*.point as an array by calling the $getAll API. For stats.json, updates to stats.*.value are not automatically tracked, so you register the dependency using the $trackDependency API. Within the definition of a virtual property in a loop context (using a wildcard structural path), you can reference the implicit index variable ($1).

Structive's Virtual Properties

A key feature of virtual properties is the ability to define properties virtually for structural paths at any hierarchy level. Within the definition, you can reference structural paths as calculation targets, and by tracking the referenced structural paths as dependencies, automatic calculations are performed. These can then be used in the UI just like regular structural paths. Because it can handle abstract structural paths using the wildcard *, the code's declarativeness is significantly enhanced.

Vue

// Calculates the polygon's coordinate array and formats it for the polygon tag's points attribute
const points = computed(() => {
  const total = props.stats.length
  return props.stats
    .map((stat, i) => {
      const { x, y } = valueToPoint(stat.value, i, total)
      return `${x},${y}`
    })
    .join(' ')
})

// Calculates label coordinates
const point = computed(() =>
  valueToPoint(+props.stat.value + 10, props.index, props.total)
)

Structive

export default class {
  // JSON display
  get "stats.json"() {
    this.$trackDependency("stats.*.value"); // Track stats.*.value
    return JSON.stringify(this.stats);
  }

  // Define label coordinates
  get "stats.*.labelPoint"() {
    // $1 is the index variable
    return valueToPoint(100 + 10, this.$1, this.stats.length);
  }

  // Define polygon vertex coordinates
  get "stats.*.point"() {
    // $1 is the index variable
    // Can reference path "stats.*.value", which becomes a dependency to track
    return valueToPoint(this["stats.*.value"], this.$1, this.stats.length);
  }

  // Join and format the array of coordinates for the polygon tag's points attribute
  get points() {
    // Get all elements of path "stats.*.point" using $getAll
    // Path "stats.*.point" is a tracked dependency
    const points = this.$getAll("stats.*.point", []);
    // Format for points attribute
    return points.map(p => `${p.x},${p.y}`).join(" ")
  }
}

State Updates

Let's look at the state update process for adding and deleting elements.

Vue's Case

Event handlers for state updates are defined as functions. You can use variables specified in the UI as arguments. Mutable array operations like push and splice are used.

Structive's Case

Event handlers for state updates are defined as methods of the state class. For event handlers within a loop, the loop index ($1) is passed automatically as an argument, so you don't need to pass the index variable from the UI. Within the process, new arrays are created using concat or toSpliced and then assigned to the state property. Assignment to a state property triggers the update. preventDefault is unnecessary because it's specified as a modifier (@preventDefault) in the UI's attribute binding.

Vue

function add(e) {
  e.preventDefault()
  if (!newLabel.value) return
  stats.push({
    label: newLabel.value,
    value: 100
  })
  newLabel.value = ''
}

function remove(stat) {
  if (stats.length > 3) {
    stats.splice(stats.indexOf(stat), 1)
  } else {
    alert("Can't delete more!")
  }
}

Structive

export default class {
  onAdd(e) {
    if (!this.newLabel) return;
    this.stats = this.stats.concat({ label: this.newLabel, value: 100});
    this.newLabel = '';
  }

  onRemove(e, $1) {
    if (this.stats.length > 3) {
      this.stats = this.stats.toSpliced($1, 1);
    } else {
      alert("Can't delete more!");
    }
  }
}

Summary

By comparing the two, Structive's characteristics should now be clear.
Here are Structive's key features:

In the UI, structural paths are specified everywhere.
It uses for blocks.
Attribute binding is defined in the data-bind attribute.
Within for blocks, an asterisk * is used in structural paths.
For events, only the handler's method name is specified.
State management is done using classes.
State is handled with properties, derived state with getters, and state updates with methods.
Structural paths can be used within getters and methods.
The index is automatically passed as an argument to methods within loops, which is convenient.
State derivation getters can be used as virtual properties and can be specified for structural paths at any hierarchy level.
It has less boilerplate code and no state hooks.

Finally

I would greatly appreciate any feedback or messages.

Stop the i, j, k Confusion: A Clearer Approach to Loop Index Naming

mogera551 — Wed, 11 Jun 2025 01:30:12 +0000

Introduction

When naming loop index variables in JavaScript, common choices include i, j, k, or simply index. However, these naming conventions can become ambiguous or a source of confusion as nesting deepens.

This article proposes a simple naming convention to solve these problems, detailing its specific benefits and how to utilize it.

Proposed Naming Convention: `$1, $2, $3`

The proposed method is very simple:

Name index variables as $1, $2, $3 according to the loop's depth.

For example, you would write it like this:

for (let $1 = 0; $1 < array.length; $1++) {
  for (let $2 = 0; $2 < array[$1].length; $2++) {
    for (let $3 = 0; $3 < array[$1][$2].length; $3++) {
      // ...process
    }
  }
}

Benefits of This Naming Convention

1. Low Cognitive Load

Since the naming is mechanical, you don't need to ponder "what should I name it?" and there's no room for indecision. Not having to deliberate on naming improves development efficiency.

2. Index Variables Are Immediately Obvious

Just by looking at the variable name, it's intuitively clear that it's an index variable, reducing stress when reading through code.

3. Nesting Hierarchy Becomes Clear

Using numerical indicators like $1, $2, $3 explicitly shows the depth of loop nesting, allowing for quick comprehension of the code structure. This is especially effective when dealing with multi-dimensional arrays or deeply nested structures.

4. Prevents Variable Name Conflicts

It's less likely to conflict with common variable names, helping to avoid issues like shadowing or overwriting. You can use it confidently even in complex scopes.

5. Consistency in Team Development

It makes it easier to unify naming conventions across the entire team, streamlining code reviews and collaborative work.

Comparison with Existing Naming Conventions

Traditional Method

for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < arr[i].length; j++) {
    for (let k = 0; k < arr[i][j].length; k++) {
      // Which variable for which loop?
    }
  }
}

With traditional naming conventions like this, as nesting deepens, it becomes difficult to understand which variable refers to which loop level.

Proposed Method

for (let $1 = 0; $1 < arr.length; $1++) {
  for (let $2 = 0; $2 < arr[$1].length; $2++) {
    for (let $3 = 0; $3 < arr[$1][$2].length; $3++) {
      // Nesting depth is clear
    }
  }
}

This method makes the nesting hierarchy immediately clear and allows for intuitive comprehension of the code structure.

Good Compatibility with Tools

Generalizing this rule offers the following benefits:

Static analysis tools can easily identify the role of variables, improving error detection accuracy.
Code editors and IDEs facilitate auto-completion and refactoring.
Variable tracking during debugging becomes easier.

Furthermore, tool support is straightforward, contributing to overall code quality improvement.

Application to Other Languages and Fields

This naming convention has the potential to solve similar problems in many programming languages beyond JavaScript. It can be applied as a means to organize loop indices in other languages like Python, Java, and C++.

It also offers significant advantages in scenarios where complex nested code is frequently written, such as in algorithmic problems and competitive programming.

Conclusion

If you're using i, j, k without much thought, a clearly structured naming convention like $1, $2, $3 offers greater benefits and is more effective. We encourage you to try it out based on this article.

Specifications of Structive: A Framework That Makes State Management a Breeze

mogera551 — Tue, 06 May 2025 01:43:11 +0000

What is Structive?

Structive is a framework built on single-file Web Components that offers a structure-driven template syntax designed to eliminate as much boilerplate and state-hook overhead as possible, while still providing a fully declarative UI and reactive state management.

Learn more:
– https://github.com/mogera551/Structive
– https://github.com/mogera551/Structive-Example

Entry Point

Your entry point is an HTML file, and you’ll need to use an import map to alias your modules:

<script type="importmap">
{
  "imports": {
    "structive": "path/to/cdn/structive.js",
    "main": "./components/main.st.html"
  }
}
</script>

<app-main></app-main>

<script type="module">
import { config, defineComponents } from "structive";

config.enableMainWrapper = false;
config.enableShadowDom   = false;
config.enableRouter      = false;

defineComponents({ "app-main": "main" });
</script>

Script

Component Registration & Root Tag

Use defineComponents to map your custom element tag names to their .st.html files. Then include the root component tag (here <app-main>) in your <body>.

Configuration Options

Currently Structive does not ship with a built-in router or wrapper, so set:

config.enableMainWrapper = false;
config.enableRouter      = false;
config.enableShadowDom   = false; // or true if you prefer Shadow DOM

Roadmap

Routing and automatic component-loading (“autoload”) support are coming soon.

Components

Each component lives in its own single file, with three sections:

<!-- 1. UI Template -->
<template>
</template>

<!-- 2. CSS -->
<style>
</style>

<!-- 3. State Class -->
<script type="module">
</script>

We’ll focus on the UI template and the state class.

Structural Paths

Both your template and your state class use structural paths to bind data. Paths use dot notation and support a wildcard * to represent array elements:

Full path: user.profile.name
Wildcard path: products.*.name

In the template, * refers to the current item inside a for block. In your state class, you can also declare derived state getters using wildcards.

UI Template

Your <template> can include:

for blocks for iteration
if blocks for conditional rendering
Interpolation for embedding values
Attribute binding for linking state to DOM properties, classes, attributes, and events

You can also chain filters onto paths (e.g. |locale to format numbers).

<template>
  <ul>
    {{ for:products }}
      <li>{{ products.*.name }} — {{ products.*.price|locale }}</li>
    {{ endfor: }}
  </ul>

  {{ if:user.isLoggedIn }}
    Welcome, {{ user.profile.nickName }}!
  {{ else: }}
    Please log in.
  {{ endif: }}

  Enter your name: 
  <input type="text" data-bind="value:user.profile.name">

  <button data-bind="onclick.popup">Click me</button>
</template>

`for` Block

Start with {{ for:LIST_PATH }}, end with {{ endfor: }}. The path must resolve to an array. You don’t declare your own loop variable—inside, use structural paths. An implicit index variable $1 is provided; deeper loops get $2, $3, etc.

{{ for:users }}
  {{ users.*.profile.name }}
{{ endfor: }}

{{ for:makers }}
  <div>
    No: {{ $1|inc,1 }} Maker: {{ makers.*.name }}
  </div>
  {{ for:makers.*.products }}
    <div>
      Product No: {{ $2|inc,1 }} —  
      {{ makers.*.products.name }}  
      ({{ makers.*.products.*.price|locale }})
    </div>
  {{ endfor: }}
{{ endfor: }}

`if` Block

Use {{ if:CONDITION_PATH }} … {{ endif: }}, with optional {{ else: }}. The path must return a boolean. You may apply filters, but not raw expressions.

{{ if:user.isLoggedIn }}
  Hello, {{ user.profile.nickName }}!
{{ else: }}
  Please log in.
{{ endif: }}

<!-- Raw JS expressions are not allowed -->
{{ if:user.age > 18 }}     <!-- ❌ -->
{{ if:user.age|gt,18 }}     <!-- ✅ -->

Interpolation

Embed state values directly in text with {{ PATH }}. Filters can be chained.

{{ user.profile.nickName }}
{{ user.profile.nickName|uc }} <!-- upper-case -->

{{ for:states }}
  <div>
    {{ states.*.name }}, {{ states.*.population|locale }}
  </div>
{{ endfor: }}

Attribute Binding

Link state paths to DOM element properties, classes, attributes, and events—all via data-bind. Supports two-way binding for inputs.

Property Binding

Certain DOM props are auto two-way: value, checked, etc.

<input type="text" data-bind="value:user.profile.name">

{{ for:products }}
  <div>
    {{ products.*.name }}
    <input type="text" data-bind="value:products.*.inventory">
  </div>
{{ endfor: }}

Conditional Class Binding

Toggle a CSS class based on a boolean path.

.adult { color: red; }

<div data-bind="class.adult:user.isAdult">
  <!-- adds “adult” class when user.isAdult === true -->

Event Binding

Map element events to methods on your state class. Use on-prefixed method names for clarity.

<button data-bind="onclick:onAdd">Add</button>

Custom Attribute Binding

Use attr. prefix when you need to set arbitrary HTML/SVG attributes.

<polygon data-bind="attr.points:points"></polygon>

State Class

Your state lives in a default-exported JS class. Define all your state as class properties.

<script type="module">
export default class {
  fruits = [
    { name: "apple" },
    { name: "banana" },
    { name: "cherry" }
  ];
  count = 0;
  user = {
    profile: {
      name: "Alice",
      age: 30
    }
  };
}
</script>

Event Handling

Define methods on your class to handle events. Prefix them with on to distinguish them from utility methods.

{{ count }}
<button data-bind="onclick:onIncrement">Increment</button>

export default class {
  count = 0;
  onIncrement() {
    this.count++;
  }
}

Inside a for loop, handlers receive the index as a second argument:

{{ for:users }}
  {{ users.*.name }}
  <button data-bind="onclick:onClick">Click</button>
{{ endfor: }}

export default class {
  users = [
    { name: "Alice" },
    { name: "Bob" },
    { name: "Charlie" }
  ];
  onClick(e, $1) {
    alert("Clicked index = " + $1);
  }
}

You can also update the looped item’s state by using a wildcard path:

{{ for:users }}
  <div>
    {{ users.*.name }}
    <button data-bind="onclick:onToggle">Select</button>
  </div>
{{ endfor: }}

export default class {
  users = [
    { name: "Alice", selected: false },
    { name: "Bob",   selected: false },
    { name: "Charlie", selected: false }
  ];
  onToggle(e, $1) {
    this["users.*.selected"] = !this["users.*.selected"];
  }
}

Update Triggers

Any assignment to a class property via a structural path automatically re-renders the bound DOM. For arrays, use immutable methods (concat, toSpliced, etc.) rather than push/pop.

{{ count }}
<button data-bind="onclick:onIncrement">Increment</button>

{{ for:users }}
  <div>
    {{ users.*.name }}
    <button data-bind="onclick:onDelete">Delete</button>
  </div>
{{ endfor: }}

export default class {
  count = 0;
  onIncrement() {
    this.count += 1;
  }

  users = [
    { name: "Alice",   selected: false },
    { name: "Bob",     selected: false },
    { name: "Charlie", selected: false }
  ];
  onDelete(e, $1) {
    this.users = this.users.toSpliced($1, 1);
  }
}

Derived State Creation

Use getters named with structural paths to compute derived values. Whenever their dependencies change, the UI updates automatically via dependency tracking.

{{ user.profile.name }}  <!-- e.g. “Alice” -->
{{ user.profile.ucName }}<!-- “ALICE” -->
<input type="text" data-bind="value:user.profile.name">

export default class {
  user = {
    profile: {
      name: "Alice",
      age: 30
    }
  };
  get "user.profile.ucName"() {
    return this["user.profile.name"].toUpperCase();
  }
}

Derived Structural Paths with Wildcards

You can also create a wildcard-based derived state, as if each array element had a virtual property:

{{ for:users }}
  {{ users.*.ucName }},
  <input type="text" data-bind="value:users.*.name">
{{ endfor: }}

export default class {
  users = [
    { name: "Alice", selected: false },
    { name: "Bob",   selected: false },
    { name: "Charlie", selected: false }
  ];
  get "users.*.ucName"() {
    return this["users.*.name"].toUpperCase();
  }
}

Summary of Development

Use the same structural paths in your state class and UI template
Perform all updates via structural paths
Create derived state with getters named as paths
Inside loops, use implicit indices ($1, $2, …)

Finally

Any feedback or messages would be greatly appreciated!

Beyond React/Vue? A Novel Approach to Zero-Boilerplate UI–State Sync

mogera551 — Sun, 04 May 2025 15:59:56 +0000

A Proposal for a New State Management Method to Drastically Simplify Frontend Framework State Management

!!! ATTENTION !!!
This proposal aims for near-zero boilerplate but does not consider specific frontend framework implementations.

Want to see it in action? Check out the prototype repository or try the live demo, live demo, demo.

I will explain step by step.

Make State Management Class-Based.

State management is class-based, and state is managed with properties.
All state updates are done via assignment, detected by a Proxy's set trap, which issues update triggers. If there are multiple state updates, efficiency is improved by batching, such as accumulating updated properties and executing them together.

class State {
  count = 0;
  increment() {
    this.count = this.count + 1;
  }
}

class StateHandler {
  set(target, prop, value, receiver) {
    try {
      return Reflect.set(target, prop, value, receiver);
    } finally {
      trigger(prop, value); // Update trigger
    }
  }
}

proxy = new Proxy(new State, new StateHandler);

Accessing Data with Hierarchical Structures.

Access to state with hierarchical structures is done using full paths.
Enforcing full paths creates a single point of access that can be reliably trapped by a Proxy. The set trap can detect updates at the granularity of individual paths. Complex multi-level Proxies become unnecessary.
Accessing full paths is parsed by a get trap to access the corresponding data element.
Note: The get trap shown here is conceptual and does not represent the actual implementation. For getters, speed is improved through caching, path parsing caches, and pre-analysis.

class State {
  user = {
    profile: {
      name: "Alice",
      email: "alice@domain",
    }
  }
  changeName(name) {
    this["user.profile.name"] = name; // trigger("user.profile.name")
  }
}

class StateHandler {
  get(target, prop, receiver) {
    const segments = prop.split(".");
    if (segments.length > 1) {
      // access by fullpath
      const lastName = segments.pop();
      const parentProp = segments.join(".");
      return this.get(target, parentProp, receiver)[lastName];
    } else {
      return Reflect.get(target, prop, receiver);
    }
  }
}

Enforce Full Paths in the UI as well.

In the UI, too, descriptions use full paths, just like the state.
This makes the things pointed to by the UI and the state consistent via full paths.
This means that when a change to a state's full path is detected, the UI can be updated precisely.
Conversely, it becomes possible to notify changes from the UI update back to the state's full path.
As a result, the structure of the UI and the state becomes consistent.

{{ user.profile.name }}
{{ user.profile.email }}

class State {
  user = {
    profile: {
      name: "Alice",
      email: "alice@domain",
      licenses: [ "driving", "US CPA" ],
    }
  }
  changeName(name) {
    this["user.profile.name"] = name; // trigger("user.profile.name")-> UI:{{ user.profile.name }}
  }
}

function trigger(path, value) {
  // Identify and update UI nodes
}

UI Limitations and Syntax

To match the structure of the UI and state, a custom syntax is more suitable because views are better if they are simple to parse.
Note: JSX allows flexible HTML description, making it difficult to handle and less suitable.
With repetition, conditional branching, embedding, and attribute binding, I believe the approximate UI structure can be represented.
Full paths can be specified for each of these.

{{ for:user.profile.licenses }}
{{ endfor: }}

{{ if:user.isLogin }}
{{ else: }}
{{ endif: }}

{{ user.profile.name }}

<button data-bind="disabled:user.isLogout">

Derived State

You can create derived state using getters in the state class.
During execution, the full paths ("user.profile.name") referenced inside the getter can be obtained, allowing dependency tracking. If the referenced full path ("user.profile.name") is updated, the derived state can be updated automatically.
In the UI, too, it can be accessed like a regular full-path property.

{{ user.profile.name }} {{ user.profile.ucName }}

class State {
  user = {
    profile: {
      name: "Alice",
      email: "alice@domain",
      licenses: [ { name:"driving" }, { name:"US CPA" } ],
    }
  }
  get "user.profile.ucName"() {
    return this["user.profile.name"].toUpperCase();
  }
}

Lists

For full paths to lists, an asterisk is used.
Index variables within loops are implicitly provided as $1, $2, etc., according to the loop nesting.
They can be used in repetition, conditional branching, embedding, and attribute binding.
If the loop context is the same, an asterisk is used in the path instead of $1.
Changes to lists are made by immutably generating a new array and assigning it. During changes, list differences are detected to consider performance.

{{ for:user.profile.licenses }}
  <div>
    index={{ $1 }}
    {{ user.profile.license.*.name }}
    <button data-bind="onclick:delete">delete</button>
  </div>
{{ endfor: }}

class State {
  user = ...
  delete(e, $1) {
    this["user.profile.licenses"] = this["user.profile.licenses"].toSpliced($1, 1);
  }
}

Derived State for List Elements

Derived state for list elements can be created using getter properties.
If the loop context is the same, access using an asterisk ("user.profile.license.*.name") is possible, allowing for a highly declarative description using an abstract path instead of a specific property.
Also, like regular derived state, dependency tracking is possible.
Access from the UI side can be described the same way as regular properties.

{{ for:user.profile.licenses }}
  <div>index={{ $1 }} {{ user.profile.license.*.ucName }}</div>
{{ endfor: }}

class State {
  user = {
    profile: {
      name: "Alice",
      email: "alice@domain",
      licenses: [ { name:"driving" }, { name:"US CPA" } ],
    }
  }
  get "user.profile.license.*.ucName"() {
    return this["user.profile.license.*.name"].toUpperCase();
  }
}

Maintainability

Because both the UI and state are written with full paths, the scope of influence can be easily isolated by searching for paths.
You just need to search for the same full path in both the UI and state.
Locations with dependencies are concentrated in getters, making management easier.

Reduced Cognitive Load

Because both the UI and state are written with full paths and refer to the same structure, less context switching is required, which is expected to significantly reduce cognitive load.

Team Development

Because of full paths, all developers on the team can understand that they are pointing to the same thing, which may eliminate discrepancies in information sharing.

Drawbacks

It selects applications that can be adapted because it requires the UI and structure to be consistent.
However, by skillfully using derived state like getters, this limitation might be mitigated.

Based on the above, by introducing a common language of full paths and linking the UI and state with them, much boilerplate and many state hooks become unnecessary, enabling the practice of very simple state management.

Below application samples:

<template>
  <svg width="200" height="200">
    <g>
      <polygon data-bind="attr.points:points"></polygon>
      <circle cx="100" cy="100" r="80"></circle>
      {{ for:stats }}
        <text data-bind="
          attr.x:stats.*.labelPoint.x;
          attr.y:stats.*.labelPoint.y;
        ">{{ stats.*.label }}</text>
      {{ endfor: }}
    </g>
  </svg>
  {{ for:stats }}
  <div>
    <label>{{ stats.*.label }}</label>
    <input type="range" data-bind="value|number:stats.*.value" min="0" max="100">
    <span>{{ stats.*.value }}</span>
    <button data-bind="onclick:onRemove" class="remove">X</button>
  </div>
  {{ endfor: }}
  <form id="add">
    <input name="newlabel" data-bind="value:newLabel">
    <button data-bind="onclick:onAdd@preventDefault">Add a Stat</button>
  </form>
</template>

<style>
polygon {
  fill: #42b983;
  opacity: 0.75;
}

circle {
  fill: transparent;
  stroke: #999;
}

text {
  font-size: 10px;
  fill: #666;
}

label {
  display: inline-block;
  margin-left: 10px;
  width: 20px;
}

#raw {
  position: absolute;
  top: 0;
  left: 300px;
}
</style>

<script type="module">
export function valueToPoint(value, index, total) {
  const x = 0;
  const y = -value * 0.8;
  const angle = ((Math.PI * 2) / total) * index;
  const cos = Math.cos(angle);
  const sin = Math.sin(angle);
  const tx = x * cos - y * sin + 100;
  const ty = x * sin + y * cos + 100;
  return {
    x: tx,
    y: ty
  };
}

export default class {
  newLabel = '';
  stats = [
    { label: 'A', value: 100 },
    { label: 'B', value: 100 },
    { label: 'C', value: 100 },
    { label: 'D', value: 100 },
    { label: 'E', value: 100 },
    { label: 'F', value: 100 }
  ];

  get "stats.json"() {
    return JSON.stringify(this.stats);
  }

  get "stats.*.labelPoint"() {
    return valueToPoint(100 + 10, this.$1, this.stats.length);
  }

  get "stats.*.point"() {
    return valueToPoint(this["stats.*.value"], this.$1, this.stats.length);
  }

  get points() {
    const points = this.$getAll("stats.*.point", []);
    return points.map(p => `${p.x},${p.y}`).join(" ")
  }

  onAdd(e) {
    if (!this.newLabel) return;
    this.stats = this.stats.concat({ label: this.newLabel, value: 100});
    this.newLabel = '';
  }

  onRemove(e, $1) {
    if (this.stats.length > 3) {
      this.stats = this.stats.toSpliced($1, 1);
    } else {
      alert("Can't delete more!");
    }
  }
}
</script>

<template>
  <div class="container">
    <div>
      <table class="table table-striped">
        <colgroup>
          <col class="col-md-3">
          <col class="col-md-3">
          <col class="col-md-2">
          <col class="col-md-2">
          <col class="col-md-2">
        </colgroup>
        <thead>
          <tr>
            <th class="text-center">State</th>
            <th class="text-center">Capital City</th>
            <th class="text-center">Population</th>
            <th class="text-center">Percent of Region's Population</th>
            <th class="text-center">Percent of Total Population</th>
          </tr>
        </thead>
        <tbody>
          {{ for:regions }}
            {{ for:regions.*.states }}
              <tr>
                <td class="text-center">{{ regions.*.states.*.name }}</td>
                <td class="text-center">{{ regions.*.states.*.capital }}</td>
                <td class="text-right" data-bind="
                  class.over : regions.*.states.*.population|ge,5000000;
                  class.under: regions.*.states.*.population|lt,1000000;
                ">{{ regions.*.states.*.population|locale }}</td>
                <td class="text-right">{{ regions.*.states.*.shareOfRegionPopulation|percent,2 }}</td>
                <td class="text-right">{{ regions.*.states.*.shareOfPopulation|percent,2 }}</td>
              </tr>
            {{ endfor: }}
            <tr class="summary">
              <td class="text-center" colspan="2">{{ regions.* }}</td>
              <td class="text-right">{{ regions.*.population|locale }}</td>
              <td></td>
              <td class="text-right">{{ regions.*.shareOfPopulation|percent,2 }}</td>
            </tr>
          {{ endfor: }}
        </tbody>
        <tfoot>
          <tr class="summary">
            <td class="text-center" colspan="2">Total</td>
            <td class="text-right">{{ population|locale }}</td>
            <td></td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</template>  

<style>
  body {
    margin-left: 10px;
  }

  .over {
    color: red;
  }

  .under {
    color: blue;
  }

  tr.summary td {
    background-color: white;
    font-weight: bold;
  }
</style>

<script type="module">
import { allStates } from "states";

const summaryPopulation = (sum, population) => sum + population;

export default class {
  stateByRegion = Map.groupBy(allStates, state => state.region);
  regions = Array.from(new Set(allStates.map(state => state.region))).toSorted();

  get "regions.*.states"() {
    return this.stateByRegion.get(this["regions.*"]);
  }

  get "regions.*.states.*.shareOfRegionPopulation"() {
    return this["regions.*.states.*.population"] / this["regions.*.population"] * 100;
  }

  get "regions.*.states.*.shareOfPopulation"() {
    return this["regions.*.states.*.population"] / this.population * 100;
  }

  get "regions.*.population"() {
    return this.$getAll("regions.*.states.*.population", [ this.$1 ]).reduce(summaryPopulation, 0);
  }

  get "regions.*.shareOfPopulation"() {
    return this["regions.*.population"] / this.population * 100;
  }

  get population() {
    return this.$getAll("regions.*.population", []).reduce(summaryPopulation, 0);
  }

}
</script>

Your Feedback Is Welcome!

I've shared an idea for a new state management approach. This is still an evolving concept, and I believe it can be further improved with the wisdom of the community.

Are you interested in this approach?
Would you like to try implementing it, or have you tried something similar before?
Do you have concerns about performance or scalability?
How could this idea be further developed?

Please share your thoughts in the comments. If you try out this idea, I'd love to hear about your experience. If you have PRs or implementation examples, please share links to your repositories!

Let's make frontend development better together.

Declarative Routing with importmap: A New Proposal for File-based Web Components

mogera551 — Sun, 20 Apr 2025 13:20:38 +0000

Introduction

In modern frontend development, routing is typically handled by dedicated libraries like React Router or Vue Router, which map route paths to components. However, for lightweight frameworks or architectures based on Web Components and file-based structures, such traditional routing solutions can feel overly complex or redundant.

This article proposes a new approach: using the browser-native importmap to define routing in a declarative and structural way, without writing additional routing code.

The Problem with Traditional Routing

In file-based Web Component architectures, the following problems often arise:

Route definitions and component imports are separated, increasing maintenance cost.
Path-to-component mappings are often hardcoded in JS files.
Even small projects require installing and configuring a routing library.

The Proposal: Use `importmap` as a Routing Table

importmap is a standard feature for ES Modules that maps module specifiers to URLs. By leveraging this feature, we can map route paths directly to component file URLs.

Example `importmap`:

<script type="importmap">
{
  "imports": {
    "routes:": {
      "/": "./components/home-page.js",
      "/users": "./components/user-list.js",
      "/products/:id": "./components/product-detail.js"
    },
    "components:navbar": "./components/navbar.js"
  }
}
</script>

Using a "routes:" namespace makes it easy to structurally organize routing paths and component sources.

Mapping Route Paths to Custom Elements

defineComponents({
  "home-page": "/",
  "user-list": "/users",
  "product-detail": "/products/:id",
  "navbar-component": "components:navbar"
});

The defineComponents() function checks whether the path (e.g., "/users") exists in importmap.imports["routes:"], and if it does, uses the mapped URL to import and register the corresponding Web Component.

This enables writing simple, declarative component mappings without explicitly referencing the "routes:" namespace.

Routing Engine: Minimal Implementation

Here's a basic example of how the router works internally:

const routeMap = new Map();
const importMap = document.querySelector('script[type="importmap"]').textContent;
const routes = JSON.parse(importMap).imports["routes:"] || {};

function defineComponents(mapping) {
  for (const [tag, path] of Object.entries(mapping)) {
    if (routes[path]) {
      routeMap.set(path, tag);
    } else {
      // Non-routing component (immediate import)
      import(path).then(mod => customElements.define(tag, mod.default));
    }
  }
  initRouter();
}

function initRouter() {
  window.addEventListener("popstate", () => {
    const currentPath = location.pathname;
    for (const [route, tag] of routeMap.entries()) {
      if (matchRoute(route, currentPath)) {
        loadComponent(tag, routes[route]);
        break;
      }
    }
  });
  window.dispatchEvent(new Event("popstate"));
}

function loadComponent(tag, modulePath) {
  import(modulePath).then(mod => {
    if (!customElements.get(tag)) {
      customElements.define(tag, mod.default);
    }
    const mount = document.querySelector("main");
    mount.innerHTML = "";
    mount.appendChild(document.createElement(tag));
  });
}

function matchRoute(pattern, path) {
  return pattern === path; // basic exact match
}

This code:

Records the route-to-tag mappings via defineComponents()
Listens to popstate for browser navigation events
Dynamically imports and mounts the matched Web Component

Further enhancements could include support for dynamic parameters (:id), link click interception with pushState, and 404 fallback handling.

Advantages

Centralized route definitions using standard importmap
No need for external routing libraries
Readable, declarative component-to-path mappings
Easily extensible with dynamic routes or localization
Ideal for small SPAs, static sites, or custom Web Component-based frameworks

Summary

By using importmap as a routing table, we can eliminate the need for verbose router configurations and embrace a structural, declarative approach to Web Component routing. Combined with minimal runtime logic, this strategy enables lightweight SPAs and file-driven UI frameworks to scale cleanly.

Whether you're building a static app, a custom element-based SPA, or experimenting with new architectures, this pattern offers a refreshing alternative to traditional routing libraries.

Forem: mogera551

No Boilerplate, State Hooks, or Virtual DOM: Structural Paths Usher in a New Era of Frontend Development

Structive vs. Vue: A Radar Chart Code Comparison

What is Structive?

What is Structure-Driven?

Vue's Radar Chart Example

Let's Compare

File Structure

Template Overview

Vue's Case

Structive's Case

for Loop

Vue's Case

Structive's Case

Attribute Binding and Event Handlers

Vue's Case

Structive's Case

State Management Overview

Vue's Case

Structive's Case

State Declaration

Vue's Case

Structive's Case

State Derivation

Vue's Case

Structive's Case

Structive's Virtual Properties

State Updates

Vue's Case

Structive's Case

Summary

Finally

Stop the i, j, k Confusion: A Clearer Approach to Loop Index Naming

Introduction

Proposed Naming Convention: $1, $2, $3

Benefits of This Naming Convention

1. Low Cognitive Load

2. Index Variables Are Immediately Obvious

3. Nesting Hierarchy Becomes Clear

4. Prevents Variable Name Conflicts

5. Consistency in Team Development

Comparison with Existing Naming Conventions

Traditional Method

Proposed Method

Good Compatibility with Tools

Application to Other Languages and Fields

Conclusion

Specifications of Structive: A Framework That Makes State Management a Breeze

What is Structive?

Entry Point

Script

Component Registration & Root Tag

Configuration Options

Roadmap

Components

Structural Paths

UI Template

for Block

if Block

Interpolation

Attribute Binding

Property Binding

Conditional Class Binding

Event Binding

Custom Attribute Binding

State Class

Event Handling

Update Triggers

Derived State Creation

Derived Structural Paths with Wildcards

Summary of Development

Finally

Beyond React/Vue? A Novel Approach to Zero-Boilerplate UI–State Sync

A Proposal for a New State Management Method to Drastically Simplify Frontend Framework State Management

Make State Management Class-Based.

Accessing Data with Hierarchical Structures.

Enforce Full Paths in the UI as well.

UI Limitations and Syntax

Derived State

Lists

`for` Loop

Proposed Naming Convention: `$1, $2, $3`

`for` Block

`if` Block

The Proposal: Use `importmap` as a Routing Table

Example `importmap`: