Building My Own Tiny Frontend Framework

I’ve always been curious about how frameworks work, so I dove deep into blogs, articles—basically, anything I could get my hands on. Turns out, the core idea is pretty simple: you need to know when a state changes.

- React uses state setter functions for this.
- Angular uses zones.
- Vue uses Proxies.

I decided to try Proxies + Object.defineProperty (which is kind of a proxy in itself) to track state changes. So, I built a few decorators:

@State: for reactive variables.
@Effect: to run effects when dependencies change.
@Computed: for computed values that can be used as dependencies.

With that in place, my reactive system was up and running. Then came the hard part—writing a scheduler to batch tasks. And… I failed miserably. Honestly, I considered quitting programming altogether and becoming a farmer to live a quiet, peaceful life. 😂

After a week of stepping away, I came back to it with fresh eyes. This time, I started working on a templating system. I ended up creating a new templating language — a mix of React, Angular, and Vue and wrote a Babel plugin to convert the templates into JavaScript objects at build time.

Created a bootstrap function which renders components, mounts them to the DOM, and makes sure everything reacts to state changes properly.

It took me a long time, and it’s still far from perfect. The template compiler has bugs, and I’ve got a long road ahead. But I’m hooked and more excited than ever to keep going.

github:- https://lnkd.in/gAGTpwu7

Here’s a glimpse of what I've built so far and a preview of the syntax I’m aiming for.

https://youtu.be/M_VLkjonFvA

Wish me luck!
hashtag#WebDevelopment hashtag#FrontendJourney hashtag#CodingLife hashtag#BuildingFromScratch
hashtag#React hashtag#Angular hashtag#Vue hashtag#Javascript hashtag#Typescript