Learn how a frontend web framework works by coding your own!
In Build a Frontend Web Framework (From Scratch), you’ll learn the secrets behind frameworks like React, Vue, and Angular, including:
Using the Document API to create HTML documents programmatically
How the virtual DOM helps define the view of an application
Using reconciliation algorithms to update the HTML efficiently
How Single Page Application (SPA) routers and webpack loaders work
Rendering a web application in the server, and rehydrating it in the browser
Frontend frameworks are essential for creating websites, UIs, and intuitive apps. While it’s tempting to treat a framework like a black box, they’re not magic. Build a Frontend Web Framework (From Scratch) shows you how to build your own framework from basic jаvascript, HTML, and CSS. Once you learn how frameworks function, you’ll be able to work with them more efficiently, troubleshoot bugs more effectively, and even customize them for your specific needs.
about the technology
Frontend web frameworks like React, Vue, or Svelte are an essential part of almost any web application stack. They’re responsible for what your users see on their screens, and they are the first step in ensuring that your product delivers an exceptional user experience. In this step-by-step guide, expert full-stack web developer Angel Sola Orbaiceta shares a big secret: understanding how these tools work under the hood will make you a better web developer.
about the book
In Build a Frontend Web Framework (From Scratch), you’ll create a complete frontend framework and share it with the world as an NPM package. You’ll start by writing a to-do list application in pure jаvascript to expose the pain points a frontend framework solves. Then, just three chapters later, you’ll have a basic working framework, built from scratch!
From there, you’ll iterate and add new features, implement a pipeline that transforms HTML templates into jаvascript render functions, add reconciliation algorithms, develop a SPA router that changes the content of the page without reloading, and more. All concepts are broken down into easy-to-digest chunks and explained with engaging graphics. By the time you’re done reading and coding, you’ll have a framework you can both use in your own projects and share with the world!
Author(s): Angel Sola Orbaiceta
Publisher: Manning Publications
Year: 2023
Language: English
Pages: 137
Build a Frontend Web Framework (From Scratch) MEAP V02
Copyright
welcome
brief contents
Chapter 1: Are frontend frameworks magic to you?
1.1 Why build your own frontend framework?
1.1.1 "Do you understand how that works?"
1.2 The framework we’ll build
1.2.1 Features
1.2.2 Implementation plan
1.3 Overview of how a frontend framework works
1.3.1 The developer’s side
1.3.2 The browser side of an SPA
1.3.3 The browser and server side of a SSR application
1.4 Summary
Chapter 2: Vanilla JavaScript—like in the old days
2.1 The assignment: a TODOs app
2.2 Writing the application
2.2.1 The HTML markup
2.2.2 The JavaScript code
2.3 Summary
2.4 Exercises
Chapter 3: Rendering and the virtual DOM
3.1 Separating concerns—DOM manipulation vs. application logic
3.1.1 Getting ready
3.2 The virtual DOM
3.3 Element nodes
3.3.1 Conditional rendering—removing null values
3.3.2 Mapping strings to text nodes
3.4 Text nodes
3.5 Fragment nodes
3.5.1 How fragments work
3.5.2 Implementing fragment nodes
3.5.3 Testing the virtual DOM functions
3.6 Components—the cornerstone of frontend frameworks
3.6.1 What is a component?
3.6.2 The virtual DOM as a function of the state
3.6.3 Composing views—components as children
3.7 Summary
3.8 Exercises
Chapter 4: Mounting and destroying the virtual DOM
4.1 Mounting the virtual DOM
4.1.1 Mounting virtual nodes into the DOM
4.1.2 Mounting text nodes
4.1.3 Mounting fragment nodes
4.1.4 Mounting element nodes
4.1.5 Adding event listeners
4.1.6 Setting the attributes
4.1.7 A mountDOM() example
4.2 Destroying the DOM
4.2.1 Destroying a text node
4.2.2 Destroying an element
4.2.3 Destroying a fragment
4.3 Summary
4.4 Exercises
Chapter 5: State management and the application’s lifecycle
5.1 The state manager
5.1.1 From JavaScript events to application domain commands
5.1.2 The reducer functions
5.1.3 The dispatcher
5.2 Assembling the state manager into the framework
5.2.1 The application instance
5.2.2 The application instance’s renderer
5.2.3 The application instance’s state manager
5.2.4 Components dispatching commands
5.2.5 Unmounting the application
5.2.6 Result
5.3 Summary
Appendix: Setting up the project
A.1 Where to find the source code
A.1.1 Checking out the code for each chapter
A.1.2 A note on the code
A.1.3 Reporting issues in the code
A.1.4 Fixing a bug yourself
A.2 Note on the technologies used
A.2.1 Package manager—npm
A.2.2 Bundler—Rollup and Webpack
A.2.3 Linter—ESLint
A.2.4 (Optional) Testing—Vitest
A.2.5 The language—JavaScript
A.3 Read the docs
A.4 Structure of the project
A.5 Finding a name for your framework
A.6 Option A—Using the CLI tool
A.7 Option B—Configuring the project from scratch
A.7.1 The examples folder
A.7.2 Creating the packages
A.8 Publishing your framework to NPM
A.8.1 Creating an NPM account
A.8.2 Logging in to NPM
A.8.3 Publishing your framework
A.9 Using a CDN to import the framework
