DEV Community: Igor Sukharev

Introduction to any framework begins with writing a simple component. Most often, this component will be a "click counter". It’s a kind of "hello world" in the world of frontend development. That’s why I’ve chosen it as the basis for this material.

A long time ago, I wondered: is it possible to create frontend applications as easily as in React, but without re-renders and hidden layers for state computation and DOM updates, using only native JavaScript constructs?

Finding the answer to this question and refining the API took me several years of experimentation, rewriting everything from scratch, understanding the essence of the approach, and universalizing the method.

So, without further ado, I want to present the code for this component. Below, I’ll show three versions of the same component.

Version 1

import { update } from '@fusorjs/dom';

const ClickCounter = (props) => {
  let state = props.count || 0;

  const self = (
    <button click_e={() => {state++; update(self);}}>
      Clicked {() => state} times
    </button>
  );

  return self;
};

click_e sets an event handler, while _ separator allows you to configure numerous useful parameters, such as click_e_capture_once, ensuring compatibility with the W3C standard.

The component's function is called once when it is created, and updates occur upon clicking. Additionally, we have "lifted the state up" from the library itself, allowing any state management strategy to be employed.

Here is how using this component looks:

import { getElement } from '@fusorjs/dom';

const App = () => (
  <div>
    <ClickCounter />
    <ClickCounter count={22} />
    <ClickCounter count={333} />
  </div>
);

document.body.append(getElement(<App />));

Next, I thought that my component looks pretty good, but creating it in React would require roughly the same amount of code. Is there a way to make it more concise?

Version 2

Here, I simplify the process of setting a state variable using JavaScript's ability to destructure object arguments in a function, while assigning default values. Additionally, I take advantage of the fact that the second parameter of an event handler function can receive a reference to the object that triggered the event.

const ClickCounter = ({ count = 0 }) => (
  <button click_e={(event, self) => {count++; update(self);}}>
    Clicked {() => count} times
  </button>
);

Now I was satisfied. It turned out much more compact than in React. Especially if you add useCallback, to be fair, since our function component runs only once and doesn’t recreate the event handler.

Sooner or later, the realization hit me...

Version 3

After all, we have a universal syntax for setting parameters on all component attributes, so why not add one more parameter: update?

const ClickCounter = ({ count = 0 }) => (
  <button click_e_update={() => count++}>
    Clicked {() => count} times
  </button>
);

Now this is just the perfect version. I’m willing to bet that no other framework can create a more compact, reusable component with state management. If you know of one, please share it in the comments.

Here’s a working example of our component.

Conclusion

This exercise helped to realize that simple components containing event handlers don’t need reactive state management systems like useState, Signals, Redux, or Mobx. Regular variables are enough for them.

Here’s another example of such a component:

const UppercaseInput = ({ value = "" }) => (
  <input 
    value={() => value.toUpperCase()}
    input_e_update={(event) => (value = event.target.value)}
  />
);

In React terms, this is called a "managed input" component. You can try it out here in an alternative style (not JSX).

To reduce resource consumption, reactive states should be used only where necessary. For example, when several components in different parts of the DOM use the same data that needs to be updated.

This can easily be achieved by setting a single callback prop called mount, which is as simple as using useState in React. Here's a detailed example explaining this.

These links might also be helpful to you:

Thanks for your attention!

Fusor - Bare minimum DOM creation and updating. Everything else is up to you. With just a little JavaScript, it can replace any big framework.

Igor Sukharev — Tue, 06 May 2025 09:53:15 +0000

Igor Sukharev

May 6 '25

Signals, Routing, Reactivity, Fusor Application

#webdev #javascript #react #solidjs

Comments

2 min read

Fusor - Bare minimum DOM creation and updating. Everything else is up to you. With just a little JavaScript, it can replace any big framework.

Igor Sukharev — Tue, 06 May 2025 07:46:00 +0000

Igor Sukharev

May 6 '25

Signals, Routing, Reactivity, Fusor Application

#webdev #javascript #react #solidjs

Comments

2 min read

Signals, Routing, Reactivity, Fusor Application

Igor Sukharev — Tue, 06 May 2025 07:42:50 +0000

In this post, I will describe how to set up modern routing and use Signals to disable selected links reactively.

Signals are simply an implementation of the observable pattern. While we could use any library for this purpose, we will create our own to ensure better visibility and understanding.

export class Observable {
  #callbacks = new Set();
  notify() {
    for (const fn of this.#callbacks) fn();
  }
  subscribe(callback) {
    this.#callbacks.add(callback);
    return () => this.#callbacks.delete(callback); // unsubscribe
  }
}

Next, we will need to create a routing library for our application. Implementing routing in modern browsers is easy and doesn't require any third-party libraries.

import {update} from '@fusorjs/dom';
import {Observable} from './observable';

const observable = new Observable();
let route = location.hash;

window.addEventListener(
  'popstate',
  () => {
    route = location.hash;
    observable.notify();
  },
  false,
);

export const getRoute = () => route;
export const mountRoute = (self) => observable.subscribe(() => update(self));

Next, we need a reactive link component that changes its DOM node from an anchor to plain text when the current route matches its own route.

import {span, a} from '@fusorjs/dom/html';
import {mountRoute, getRoute} from './route';

const RouteLink = (title, route) =>
  span(
    {mount: mountRoute}, // enable reactivity
    (
      (cache = a({href: route}, title)) =>
      () =>
        getRoute() === route ? title : cache
    )(),
  );

Please note that there are three ways to define an HTML element in Fusor. The example above uses the span and a functions. The second method involves using JSX.

<span mount={mountRoute}>
  {(
    (cache = <a href={route}>{title}</a>) =>
    () =>
      getRoute() === route ? title : cache
  )()}
</span>

And the third one uses h function: h("span", {mount: mountRoute}, ....

The mount prop allows you to assign a callback that is triggered when the element is attached to the DOM. Refer to the component lifecycle section in the tutorial for more details.

Finally, we will use our component to dynamically create a list of links and attach them to the DOM.

import {getElement} from '@fusorjs/dom';
import {ul, li} from '@fusorjs/dom/html';
import {RouteLink} from './route-link';

const block = ul(
  [...Array(10)].map((_, i) =>
    li(RouteLink(`${i}. Section`, `#url-to-${i}-section`)),
  ),
);

document.body.append(getElement(block));