Build a frontend framework from scratch

Learn how frontend frameworks work by building your own—from scratch!

Code for the book "Build a web frontend framework (from scratch)," published by Manning and written by myself. In this book, you build a frontend framework yourself to learn how frontend frameworks work.

📘 Purchase your copy of the book here and start learning today!

Table Of Contents

The first three parts of the book are published by Manning:

• Part I—No Framework (📘 book)
• Chapter 1—Are frontend frameworks magic to you?

• Chapter 2—Vanilla JavaScript—like in the old days

• Part II—A Basic Framework (📘 book)

• Chapter 3—Rendering and the virtual DOM
• Chapter 4—Mounting and destroying the virtual DOM
• Chapter 5—State management and the application's lifecycle
• Chapter 6—Publishing and using your framework's first version
• Chapter 7—The reconciliation algorithm: diffing virtual trees

• Chapter 8—The reconciliation algorithm: patching the DOM

• Part III—Improving the Framework (📘 book)

• Chapter 9—Stateful component
• Chapter 10—Component methods
• Chapter 11—Subcomponents—Communication via props and events
• Chapter 12—Keyed lists
• Chapter 13—The component lifecycle hooks and the scheduler
• Chapter 14—Testing asynchronous components

The last two are freely available in the repository's Wiki:

• Part IV—Extra features (🖥 online; WIP)
• Chapter 15—Slots—Inserting external content
• Chapter 16—Single Page Application routing
• Chapter 17—Implementing a hash router

• Chapter 18—Routing the application

• Part V—Advanced topics (🖥 online; coming soon)

Getting Started

To create an empty project where you can write the code for your framework, you can use the CLI:

$ npx fe-fwk-cli init my-framework-name

Where my-framework-name is the name of your framework. You can alternatively create and configure the project manually, by following the instructions at Appendix A in the book.

The project that you get contains three packages:

• runtime: the runtime for your framework; the framework itself.
• compiler: the compiler that transforms HTML templates into JavaScript render functions.
• loader: the Webpack loader that integrates the compiler with Webpack.

Scripts

The three packages have the same scripts:

• build: bundles the code into a single ESM file, located at the dist/ folder.
• lint: lints the code with ESLint.
• lint:fix: lints the code with ESLint and fixes the errors.
• test: runs the tests once with Vitest.
• test:watch: runs the tests in "watch" mode with Vitest.
• test:coverage: runs the tests and generate a coverage report.