Thoughts : How I created A JS framework in just 4 days...

Github : link

So, yes I created a JS framework for your UI or Frontend part

(*again new framework*cries)

Ok , its not react or svelte or vue angular its

Upkaran

A simple frontend framework for JS to create your frontend like objects ....

For ex :-

export function App() {
    return {
        type: "div",
        content: [
            {
                type: "p",
                id: "text",
                content: `Count: ${state.getState().count}`
            },
            {
                type: "button",
                content: "Increment",
                onclick: Increment
            },
            {
                type: "button",
                content: "Decrement",
                onclick: Decrement
            },
            ListComponent(state.getState().count)
        ],
    };
}

// YES REUSABLE COMPONENTS ALSO
The name Upkaran is derived from Hindi for उपकरण which means equipment

And it is a equipment .... so yeah ....

So it this started with

When i was making a small app with react

Suddenly , a VERY unusual thought came to my mind that

What the heck ? how this thing is made ? can i make my own 'React'

And I , researched .... a looottttt (6months)

No learning no progress

Then on some day I finally decided that ok I know i know nothing ... i haven't read that book (create your own frontend framework) yet...

Lets start (by start i mean make a folder on my computer)

So , I saw a video of Hitesh Chaudhary on youtube (i think the best youtuber who explains everything from usage to behind the scenes my favorite part) explaining about inner working of react by mimicking rendering part on a small scale ....

And that is where i started it

I made a frontend renderer in my Upkaran.js

But something was missing .... like useState() ...and blah blah blah , So I stated implementing

State Mangement

Now i stated taking some help from gpt and internet bcz it was toooo hard

I also named it as Upkaran while making states

And finally used a random code from internet edited by gpt and it works .. yeahh !!! I m a deviloper 😈

So, there is state .. there is rendering part ... lets make an app

BUT

The state is not updating , we have to update it manually like .innerHTML ... (*yes i know innerHTML is not a good practice .. but its oki)

And it was the time to make something with vanilla js which i was too much scared off from the beginning , yes the reactively updating part ....

And this was seriously very hard ...

After 2 days ... i just ..... make it render on every 300 ms (** yes again very laggy and not optimized .. but Who is goin to use it absolutely nobody )

So , the hardest part is now done in 2 days with just 5 lines more ......

And I also made something like create-react-app for it

npx create-upkaran your-app

And here is very basic , easy to understand code for you

// app.js
import { createState } from "./state.js";
import {ListComponent} from "./Component/ListComponent.js";

// Create reactive state
const initialState = {
    count: 0,
};
const state = createState(initialState);

// Define components
const Increment = () => {
    state.setState({ count: state.getState().count + 1 });
    console.log(state.getState().count);
};

const Decrement = () => {
    state.setState({ count: state.getState().count - 1 });
    console.log(state.getState().count);
};

export function App() {
    return {
        type: "div",
        content: [
            {
                type: "p",
                id: "text",
                content: `Count: ${state.getState().count}`
            },
            {
                type: "button",
                content: "Increment",
                onclick: Increment
            },
            {
                type: "button",
                content: "Decrement",
                onclick: Decrement
            },
            ListComponent(state.getState().count)
        ],
    };
}

// Component/ListComponent.js
// ListComponent.js
import { renderListItem  } from "./RenderCount.js";
// Define a component for rendering a list
export function ListComponent(num) {
    // Function to render the list items
    const renderListItems = () => {
        const comp = [];
        for(let i=0;i<num;i++){
            comp.push(renderListItem());
        }
        return comp;
    };

    return {
        type: 'ul',
        content: renderListItems() // Render the list items dynamically
    };
}

// RenderCount.js

// Define a component to render the count dynamically
export function renderListItem() {
    return {
        type: 'li',
        content: 'HELO' // Function to dynamically render the count
    };
}

Now go and code something in it

or there is a basic code generated by the create -upkaran command

Share your creations with it

Thanks for reading

Comments

[Eckehard]

Do you know VanJS?

[Rudransh Bhardwaj]

Yes

[Eckehard]

Just tried to understand what you are doing. Is there a working version of your app? Maybe you can provide one on flems.io or on codepen.

From the code I can see the approach you are using:

const rootElement = document.getElementById('root');

function update() {
        rootElement.innerHTML = ''; // Clear previous content
        components.forEach(component => { ... }

setInterval(RepeatRender, 300);

The rootElement is attached to the DOM, which might cause problems, if update takes more than just some milliseconds. This might limit you if your apps are growing.

[Rudransh Bhardwaj]

Oh .. thanks for looking into the code and helping us .. we will try to make this safer and more reactive
Thanks

[Eckehard]

You should take a look in the discussion on the VanJS github page. They had a lot of discussions about the different pitfalls of their state handling approach, so you probably can learn a lot from them.

[Hritam Shrivatava]

That's amazing man

[Ndeye Fatou Diop]

Very cool project 🙏

[Rudransh Bhardwaj]

Share you creations with it