DEV Community

Dárius Kočiš
Dárius Kočiš

Posted on

I Built a JavaScript Framework From Scratch — Here's What Happened

Components. A virtual DOM. A template compiler. A reactive hook system. A router. A global store. An HMR dev server. From zero. With zero dependencies.

I know how that sounds. I barely believed it myself when I was halfway through it.


Who Am I and Why Would I Do This

I'm a second-year student at the Technical University of Košice, studying Intelligent Systems. Self-taught. I only got into actual coding — real projects, real problems — about a year ago.

I've always had this thing where I can't just use something without needing to understand how it works underneath. React, Vue, Angular — every time I use them there's a background noise in my head: but how does this actually work? Combined with a love for hard problems, that question eventually had one logical answer: build one yourself.

So I made a decision most people around me probably thought was crazy: I'd build my own JavaScript frontend framework from scratch. I called it FeraliJs.

The name has a meaning. It sounds like Ferrari — fast, ambitious, a little audacious. But it's actually a blend of my parents' names: my dad Ferdinand and my mom Alica. It felt right to name my first and probably biggest solo project after the two people who made everything possible.


The Journey

I first tried reading the React source code. That lasted two sessions. So I switched to a more theoretical approach — videos, articles, and a lot of AI, not to write code for me, but to explain things. I exhausted free tiers everywhere and ended up on paid plans. I needed something that could patiently explain why virtual DOMs work the way they do and how compiler pipelines are structured.

That gave me enough to start. Then reality arrived.

The first win was the core component system — a render() function with a working State hook. It took a full week of wrestling with JavaScript Proxies and figuring out how to tie each hook call to the correct component instance. When a number finally incremented in the browser from code I had written entirely myself, I felt something I'd never felt before from a screen. Genuine joy. The kind that makes you want to text people at 2 AM even though you know they won't care as much as you do.

That moment carried me through everything that came after.

The hardest part was hook scoping — making sure every State(), Effect(), and Ref() call stayed attached to the right component instance. Getting it wrong produced spectacular bugs: state leaking between components, hooks returning values from the wrong instance, UI updating the wrong part of the screen. I rewrote that system more times than I can count.

The template compiler was its own nightmare. I built a scanner and parser using regex — regex I barely understood at the start — and every time I thought it was solid, a nested edge case destroyed it. I rewrote chunks of it at least five or six times.

The best solution I found came by complete accident. I needed a way to make variables from a component's render() function accessible inside embedded JavaScript expressions in templates. My first attempt used JavaScript's with() statement — ugly, slow, banned in strict mode. I kept it as a placeholder while I searched for something better. The answer came while I was messing around with something unrelated: if I destructure the context object at the top of the blueprint function and wrap each JS block in an IIFE called with .call(contextObject), everything just... works. Clean, fast, strict-mode compatible. I'd spent weeks looking for it and found it by accident on a Thursday evening. Some of the best engineering in this project happened exactly like that.


The Result

The project took three months. In practice, roughly half that time was lost to university finals and work — I was pulling cashier shifts at Lidl to cover my living expenses. The actual development time was closer to a month and a half of late nights.

FeraliJs ended up with: a component system with full lifecycle hooks, a reactive hook suite (State, Effect, Memo, Ref, Toggle, Debounce, Fetch, and more), a custom template compiler, a virtual DOM with keyed diffing, a client-side SPA router with nested routes, a global reactive store, per-component CSS scoping, and an HMR dev server — all with zero external dependencies.

I built it alone. No team, no funding, between exams and work shifts.


Why I'm Writing This

When I started this project, I almost talked myself out of it. I'm just a second-year student. I have no experience. Who am I to build a framework?

If you have a project in your head that feels too big — just start. It will break. It will confuse you. There will be bugs that make you question everything you know about JavaScript. There will be moments where deleting it all feels like the sensible option.

Start anyway.

The framework is open source on GitHub. I'd love feedback on the code, the architecture, or the documentation. And if you're thinking about building something absurdly ambitious yourself: you have my full support.


FeraliJs — A zero-dependency JavaScript frontend framework, built from scratch.
GitHub: feraliProject | Built with curiosity, stubbornness, and an unhealthy amount of late nights.

Top comments (0)