DEV Community

PiterDev
PiterDev

Posted on

Showcasing ReverUI πŸ’»< 3kb React Alternative

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

Counter Component ReverUI

  • 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>;
}
Enter fullscreen mode Exit fullscreen mode
  • 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
});
Enter fullscreen mode Exit fullscreen mode

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 β™₯

Top comments (0)