For months I have been slowly building my own frontend framework (it is 10 times smaller than React and without VDOM) 👇

You obviously know React, is one of the most famous frontend frameworks along with Vue and Angular. 🏆

I have been using React since I started to learn how to do web apps and later when I want more complex apps using Nextjs.

But since I have tried others like Svelte/Sveltekit or Vue/Nuxt I have learned that React in spite of being the most popular it hasn't as good DX as those (at least in my opinion). And I bet more people will agree with me.

With this wave of new frontend framewroks that have arrived "recently" with some examples as Qwik, Solid or Astro, I was curious of how JSX , components, state and all around this works.

For this reason and after reading some articles 📘 related, I went direct to try to configure 👨‍💻 Vite to use my own JSX and I achieve my first static components.

Later step by step I achieve to implement a kind of useState() of React that then I migrate to useSignal() and also useEffect(). All perfect but the component will do a full re-render in every state change 😭.

I didn't know how could to do "smart" renders or selectives, then I learn about the Vite pre-proccess capability that make me able to do some things that cheat at the developer and changes the source code under the hood. This way I create IDs for the states that later will be registered on the DOM components and could be used to track the HTMLElements and do fast compares.

🚩
In this way I also learned very interesting beneficts of the Arrow Functions over "traditional functions". (maybe I will do an article about this)

But I am not gona talk about all the aspects of the project in this post because is a lot to tell.

Now a lot of months later my toy project is already more than that. Now a days you can create complex frontends with components, nesting, effects, custom hooks, SPA router, Vite support and very lightweight.

If you are interested in the project (that by the way I have called ReverUI) to read the code, using it for a project, to give a star ⭐ on Github or because it comes from your heart, here are some links:

Github ReverUI: https://github.com/PiterWeb/ReverUI
Github ReverRouter: https://github.com/PiterWeb/ReverRouter
(Built in ReverUI) ReverUI Web: https://reverui.vercel.app/

Now I will show you some code examples.

• Counter Component

• Other Counter with effects

import { $useEffect, $useSignal } from "reverui";

export default function StateFullApp() {
    $useEffect(() => {
        console.log("Mounted");
    });

    const counter = $useSignal(0);

    $useEffect(() => {
        console.log("Counter value changed to " + counter.value);
    }, [counter]);

    return <div>...</div>;
}

• SPA Router

The ReverRouter supports Lazy Loading of routes and it is <1kb of size

// main.ts
import { $UI } from "reverui"; 
import { $lazy, $Router } from "reverouter";

$Router($UI ,{
    "/": () => import("./Banner"), // Normal Route
    "/todo": $lazy(() => import("./Todo")), // Lazy Route
    "/counter": $lazy(() => import("./Counter")), // Lazy Route
    "/counter-with-hook": $lazy(() => import("./CounterWithHook")), // Lazy Route
});

I hope you liked this article, I am waiting to see if someone try this Lib and I will be very thankfull if you give some feedback in the comments ♥