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.
![Build a frontend web framework](https://private-user-images.githubusercontent.com/7513343/312731018-824aa8bc-76d2-4d57-b6f4-7e67924c9e26.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQyNzgzMzUsIm5iZiI6MTcyNDI3ODAzNSwicGF0aCI6Ii83NTEzMzQzLzMxMjczMTAxOC04MjRhYThiYy03NmQyLTRkNTctYjZmNC03ZTY3OTI0YzllMjYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjFUMjIwNzE1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NDM3ZjJkYmE1ZjE3NjFiM2M2MWIxMzU4YjBhMGEwYWE3OGU2Y2JiN2IxMTA2ZmFmMjg1N2IzYjRlZTBkMWQ4OSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.rtjQ4LMSVNTJ6_rTF-PTKNAxw65mRsQ1Jr-DJiF7Vt4)
📘 Purchase your copy of the book here and start learning today!
The first three parts of the book are published by Manning:
-
Part I—No Framework (📘 book)
-
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)
The last two are freely available in the repository's Wiki:
-
Part IV—Extra features (🖥 online; WIP)
-
Part V—Advanced topics (🖥 online; coming soon)
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.
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.