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

Rudransh Bhardwaj @rudransh61

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

Upkaran

State Mangement

Comments 8 total