From Drag & Drop to... Framework Wizardry?

Okay, be honest. When you first heard about "frontend frameworks," did a little voice in your head whisper, "…magic?" It's cool if it did! Because I totally used to think the same thing. Especially coming from a background where UI building felt much more… direct.

Think game engines like Unity or Godot. Building interfaces there felt intuitive, almost tactile. Drag a button, drop an input, write some code to make it go – boom, UI done. Visual, immediate, understandable.

Then I dove into web development and landed in React-land. Suddenly, things were… declarative? Components were… rendering? It felt less like building and more like… well, like magic. Powerful magic, sure, but magic nonetheless. The inner workings were a bit of a black box.

This itch to understand the "how" really started bugging me. I even jumped into Jonas Schmedtmann's fantastic Ultimate React Course. Jonas is amazing, and he does touch on the underlying principles. But let's be real, sometimes you need more than a 10-hour deep dive into engineering theory to really grok something. At least, I do.

Luckily, the internet (and a well-timed book recommendation) came to the rescue. I stumbled upon Build a Frontend Web Framework from Scratch, and it was exactly the spark I needed. The answer wasn't to just use the frameworks, but to build one. To peel back the layers and see the machinery for myself.

So, that's exactly what I'm doing. And in this post, I want to share the tech stack I'm using, the features I'm planning, and – most importantly – what I'm hoping to learn along the way. Think of it as my "un-magic-ing" journey into frontend frameworks.

My Toolkit

The JavaScript world? Let's just say there are opinions about tools. Strong opinions. But for this project, I wanted to keep things focused and avoid getting lost in the "tooling rabbit hole." The goal is understanding, not optimization (yet!). So, here's the intentionally lean stack I'm rolling with:

• Monorepo: npm - Look, pnpm is cool, workspaces are great. But sometimes, you just want to stick with what you know. npm is my comfort zone, and for a learning project, comfort wins.
• Bundler: Rollup - Vite is my daily driver, seriously love it. But I kept hearing whispers about Rollup being the bundler for libraries and frameworks. Time to see what the hype is about and dig into its benefits firsthand.
• Linting & Formatting: ESLint + Prettier - The classics for a reason. Clean code is happy code (and easier to understand when you're building something complex).
• Testing: Vitest - Just… chef's kiss. Vitest is fast, intuitive, and honestly, makes testing enjoyable. Couldn't imagine this project without it.
• Language: JavaScript - Type systems are amazing, TypeScript is powerful. But for this project, I want to really focus on the core JavaScript concepts. No types, no distractions. Plus, I can always explore JSDoc for documentation goodness.

Roadmap: From Zero to (Barebones) Framework Hero

What am I actually building? Glad you asked! I'm aiming to recreate the core functionalities that make frontend frameworks tick. Here's the roadmap, broken down into "already conquered" and "next up on the adventure":

Already Working:

• Virtual DOM, Mounting & Destroying: The foundation! Getting elements efficiently onto the page and cleaning up when they're done. This was a major "aha!" moment, seeing how this all comes together.
• State Management: Making data dynamic and reactive. Another core piece of the puzzle, and surprisingly elegant in its implementation (once you wrap your head around it).

Coming Soon:

• Advanced Components:
  • Stateful Components: Components with their own internal data and logic.
  • Component Methods: Adding custom functions to components for more control.
  • Sub-components: Composing components within components – nesting power!
• Keyed Lists: Efficiently rendering lists and handling updates (essential for dynamic UIs).
• Hooks: Bringing reactivity and stateful logic into functional components (borrowing some inspiration from React here 😉).
• Asynchronous Components: Handling data fetching and loading states gracefully within components.
• TypeScript Support: Eventually, bringing in the type safety goodness.
• Server-Side Rendering (SSR): Exploring rendering components on the server for performance and SEO.
• Slots: Making components more reusable and flexible with content projection.
• Browser Extension: Imagine inspecting your component tree right in the browser – dev tools on steroids!

And guess what? With the Virtual DOM, mounting, and state management wired up, "Glyph" (yep, I even gave it a name!) is officially a functional, albeit barebones, framework! It's enough to build real, basic web apps. Like, say, a classic counter app. Take a peek:

See it in action! And if you're curious to dive deeper, the code is all up on GitHub: source code.

This is just the beginning of the journey, but honestly, even getting to this point has been incredibly eye-opening. Frontend frameworks? Still impressive, but definitely less "magic" and a whole lot more "ingenious engineering."

Thanks for joining me on this "un-magic-ing" adventure! Happy coding, and maybe… consider building your own "something" from scratch sometime. You might just surprise yourself with what you learn. ✌️