Skip to main content

On This Page

Building FeraliJs: A Zero-Dependency JavaScript Framework from Scratch

2 min read
Share

These articles are AI-generated summaries. Please check the original sources for full details.

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

Dárius Kočiš developed FeraliJs, a full-featured frontend framework including a virtual DOM and HMR server, without using any external dependencies. The project reached completion in approximately one and a half months of actual development time while the author managed university finals and professional work shifts.

Why This Matters

Building a framework from zero exposes the friction between high-level abstractions and low-level implementation details, such as managing hook scoping across component instances. While modern developers often rely on established black boxes like React or Vue, understanding the underlying mechanics—like how JavaScript Proxies drive reactivity—is essential for solving complex architectural edge cases that standard libraries might obscure.

Key Insights

  • FeraliJs development spanned three months (approx. 1.5 months active) by a second-year student in 2026.
  • The framework implements reactivity via JavaScript Proxies to bind hook calls to specific component instances.
  • Template expression scoping was resolved using IIFEs and .call(contextObject) to ensure strict-mode compatibility without using the ‘with’ statement.
  • The system features a virtual DOM with keyed diffing and a client-side SPA router with nested routes built from zero dependencies.
  • Regex-based scanners and parsers were used to build a custom template compiler, requiring multiple rewrites to handle nested edge cases.

Practical Applications

  • FeraliJs template compiler uses IIFEs for scoping; avoid the ‘with’ statement anti-pattern which causes performance degradation and strict-mode failures.
  • Reactive hook systems require strict instance tracking; failing to correctly scope State() and Effect() calls leads to state leakage between components.

References:

Continue reading

Next article

Replaying Production AI Agent Streams with AgentStreamRecorder

Related Content