Build a basic javascript framework

Let's admit it, we are pretty plagued with JavaScript frameworks these days. Throughout my career, I have had to learn the next best thing over and over again as trendy tech leads wanted us to be "cutting edge." After learning Angular, React, Vue, Next, Nuxt, Svelte, and then SvelteKit, I have realized—they are really all quite similar.

This is a series to help you become more framework agnostic. To not be stressed or worried if your boss comes in one day, sipping their flat white, and on a whim decides that Nuxt is the way forward for the business when the entire codebase is written in AngularJS.

JD

“Hello, my name is James, and I like to ramble on about code, design, and building products. If that is interesting to you, you can subscribe here to receive these blogs directly to your mailbox.”

Framework agnostic series

This series will guide you through the process of building your own JavaScript framework from scratch using TypeScript. The goal isn't to reinvent the wheel but to break down the concepts behind modern frameworks like React, Vue, and Svelte so you can better understand how they work under the hood.

Chapters

1. Build your own reactivity system – How data binding and state updates work.
2. Virtual DOM and Rendering – Building a minimal diffing algorithm.
3. Components System – Creating a basic component structure and lifecycle.
4. State Management – Handling local and global state effectively.
5. Event Handling and Directives – Adding event binding and custom directives.
6. Template Compilation (Optional) – Compiling templates into render functions.
7. Routing System (Optional) – A minimal client-side router for single-page apps.
8. Optimizations and Performance – Techniques for faster rendering and reduced re-renders.
9. Packaging and Publishing – Sharing your framework with the world.

By the end of this series, you'll have a foundational understanding of how frameworks work and be more framework agnostic.

Ready? Let's dive in!