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.