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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU3MjYzNDAsIm5iZiI6MTcyNTcyNjA0MCwicGF0aCI6Ii83NTEzMzQzLzMxMjczMTAxOC04MjRhYThiYy03NmQyLTRkNTctYjZmNC03ZTY3OTI0YzllMjYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDdUMTYyMDQwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDliZmMwMDc3M2M3ZDg3ZjQxY2Y0NWM3NGZiMDE4NTgzMDU5Nzg2OWRmMmRlMTgxZDcxOWY2M2UwOTMyNTIzZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.1BvbVc_E9irAbb7xMNkjyUVEAl_1e17PdoLoQ2TKMPU)
📘 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; coming soon)
- Chapter 15—Slots—Inserting external content
- Chapter 16—Single Page Application routing
- Chapter 17—Compiling HTML templates into render functions
-
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.