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 β₯
Top comments (0)