Build a Frontend Web Framework (From Scratch)

Build a Frontend Web Framework (From Scratch)

by Angel Sola
Released May 2024
Publisher(s): Manning Publications
ISBN: 9781633438064

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn how a frontend web framework works by coding your own!

Web developers use frontend frameworks every day—but do you know how these essential parts of your stack really work? Build a Frontend Web Framework (From Scratch) reveals the inner workings of web frameworks by helping you create your very own.

In Build a Frontend Web Framework (From Scratch), you’ll learn the secrets behind frameworks like React, Vue, and Angular, including:

  • Create HTML documents programmatically
  • Define the view with virtual DOM
  • Update the HTML efficiently with reconciliation algorithms
  • Create two-way communication mechanisms between components in a hierarchy

Whatever your experience level, you’ll be able to start building your framework with this guide. All you need is some core skills in HTML, CSS, and JavaScript. And once you’ve learned 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
You use frontend frameworks every day, but do you really know what’s going on behind the API? Building your own framework is a great way to learn how they interact with the DOM, generate page views, route data between components, and communicate with the underlying operating system. With this interesting and entertaining book, you’ll build your own web framework step-by-step in JavaScript, ready to share with the world as an NPM package!

About the Book
Build a Frontend Web Framework (From Scratch) guides you through a simple component-based frontend framework that borrows from React, Svelte, Angular, and other familiar tools. You’ll learn how a modern framework operates by adding features like component state and lifecycle management, a virtual DOM, and reconciliation algorithms to update the HTML efficiently. You’ll appreciate how each critical concept is broken down into easy-to-digest chunks and explained with engaging graphics.

What's Inside
  • Create HTML documents programmatically
  • Define the view with the virtual DOM
  • Implement a component lifecycle scheduler


About the Reader
For web developers familiar with JavaScript and Node.

About the Author
Angel Sola Orbaiceta has worked in the software industry for over a decade, creating software for the cloud, macOS, and Windows desktop applications.

Quotes
If you’re looking for a project to really explore JavaScript and web technology—this book might be just the thing. It delivers an excellent overview of the nuts and bolts.
- Eric Elliott, Engineering Manager, Adobe

You will understand and learn how to create a framework, better master your current framework, and become an even more qualified professional. Prepare your environment and enjoy the reading!
- Mayk Brito, Chief Content Officer, Rocketseat

Extraordinarily educational and fascinating. The best path to understanding how frameworks work under the hood.
- Rod Weis, CodeTheWeb.ca

Table of contents

  1. copyright
  2. contents
  3. Build a Frontend Web Framework (From Scratch)
  4. dedication
  5. preface
  6. acknowledgments
  7. about this book
  8. about the author
  9. about the cover illustration
  10. Part 1 No framework
  11. 1 Are frontend frameworks magic to you?
    1. 1.1 Why build your own frontend framework?
    2. 1.2 The framework we’ll build
      1. 1.2.1 Features
      2. 1.2.2 Implementation plan
    3. 1.3 Overview of how a frontend framework works
      1. 1.3.1 The developer’s side
      2. 1.3.2 The browser side of an SPA
      3. 1.3.3 The browser and server sides of an SSR application
  12. 2 Vanilla JavaScript—like in the old days
    1. 2.1 The assignment: A TODOs app
    2. 2.2 Writing the application
      1. 2.2.1 Project setup
      2. 2.2.2 The HTML markup
      3. 2.2.3 The JavaScript code
  13. Part 2 A basic framework
  14. 3 Rendering and the virtual DOM
    1. 3.1 Separating concerns: DOM manipulation vs. application logic
    2. 3.2 The virtual DOM
    3. 3.3 Getting ready
    4. 3.4 Types of nodes
    5. 3.5 Element nodes
      1. 3.5.1 Conditional rendering: Removing null values
      2. 3.5.2 Mapping strings to text nodes
    6. 3.6 Text nodes
    7. 3.7 Fragment nodes
      1. 3.7.1 Implementing fragment nodes
      2. 3.7.2 Testing the virtual DOM functions
    8. 3.8 Components: The cornerstone of frontend frameworks
      1. 3.8.1 What is a component?
      2. 3.8.2 The virtual DOM as a function of the state
      3. 3.8.3 Composing views: Components as children
  15. 4 Mounting and destroying the virtual DOM
    1. 4.1 Mounting the virtual DOM
      1. 4.1.1 Mounting virtual nodes into the DOM
      2. 4.1.2 Mounting text nodes
      3. 4.1.3 Mounting fragment nodes
      4. 4.1.4 Mounting element nodes
      5. 4.1.5 Adding event listeners
      6. 4.1.6 Setting the attributes
      7. 4.1.7 A mountDOM() example
    2. 4.2 Destroying the DOM
      1. 4.2.1 Destroying a text node
      2. 4.2.2 Destroying an element
      3. 4.2.3 Destroying a fragment
  16. 5 State management and the application’s lifecycle
    1. 5.1 The state manager
      1. 5.1.1 From JavaScript events to application domain commands
      2. 5.1.2 The reducer functions
      3. 5.1.3 The dispatcher
      4. 5.1.4 Result
    2. 5.2 Assembling the state manager into the framework
      1. 5.2.1 The application instance
      2. 5.2.2 The application instance’s renderer
      3. 5.2.3 The application instance’s state manager
      4. 5.2.4 Components dispatching commands
      5. 5.2.5 Unmounting the application
      6. 5.2.6 Result
  17. 6 Publishing and using your framework’s first version
    1. 6.1 Building and publishing the framework
    2. 6.2 A short example
    3. 6.3 Refactoring the TODOs app
      1. 6.3.1 Defining the state
      2. 6.3.2 Defining the reducers
      3. 6.3.3 Defining the view
  18. 7 The reconciliation algorithm: Diffing virtual trees
    1. 7.1 The three key functions of the reconciliation algorithm
    2. 7.2 Comparing two virtual DOM trees
      1. 7.2.1 Finding the differences
      2. 7.2.2 Applying the changes
    3. 7.3 Changes in the rendering
    4. 7.4 Diffing objects
    5. 7.5 Diffing arrays
    6. 7.6 Diffing arrays as a sequence of operations
      1. 7.6.1 Defining the operations you can use
      2. 7.6.2 Finding the sequence of operations: The algorithm
      3. 7.6.3 An example by hand
      4. 7.6.4 Implementing the algorithm
  19. 8 The reconciliation algorithm: Patching the DOM
    1. 8.1 Mounting the DOM at an index
      1. 8.1.1 The insert() function
      2. 8.1.2 Text nodes
      3. 8.1.3 Element nodes
      4. 8.1.4 Fragment nodes
    2. 8.2 Patching the DOM
      1. 8.2.1 The reconciliation algorithm
      2. 8.2.2 Virtual node equality
      3. 8.2.3 Subtree change
      4. 8.2.4 Patching text nodes
      5. 8.2.5 Patching element nodes
      6. 8.2.6 Patching child nodes
    3. 8.3 Publishing the framework’s new version
    4. 8.4 The TODOs application
      1. 8.4.1 Inspecting the DOM tree changes
      2. 8.4.2 Using the paint-flashing tool (Chrome only)
  20. Part 3 Improving the framework
  21. 9 Stateful components
    1. 9.1 Anatomy of a stateful component
      1. 9.1.1 The properties of a stateful component
      2. 9.1.2 The methods of a stateful component
    2. 9.2 Components as classes
    3. 9.3 Components with state
      1. 9.3.1 Updating the state and patching the DOM
      2. 9.3.2 Result
      3. 9.3.3 The component’s offset
      4. 9.3.4 Patching the DOM using the component’s offset
  22. 10 Component methods
    1. 10.1 Component methods
    2. 10.2 Binding event handlers to the component
    3. 10.3 Mounting the DOM with a host component
    4. 10.4 Patching the DOM with a host component
  23. 11 Subcomponents: Communication via props and events
    1. 11.1 Adding components as a new virtual DOM type
      1. 11.1.1 Updating the elements getter
      2. 11.1.2 Mounting component virtual nodes
      3. 11.1.3 Destroying component virtual nodes
      4. 11.1.4 Patching component virtual nodes
      5. 11.1.5 A rendering optimization (optional)
    2. 11.2 Events
      1. 11.2.1 Saving the event handlers inside the component
      2. 11.2.2 Extracting the props and events for a component
      3. 11.2.3 Wiring the event handlers
      4. 11.2.4 Emitting events
  24. 12 Keyed lists
    1. 12.1 The key attribute
      1. 12.1.1 Component nodes equality
      2. 12.1.2 Using the key attribute
      3. 12.1.3 Removing the key attribute from the props object
    2. 12.2 Extending the solution to element nodes
    3. 12.3 Using the key attribute
      1. 12.3.1 Mistake 1: Using the index as key
      2. 12.3.2 Mistake 2: Using the same key for different elements
    4. 12.4 The application instance
    5. 12.5 Publishing the framework
  25. 13 The component lifecycle hooks and the scheduler
    1. 13.1 The component lifecycle
    2. 13.2 Implementing the mounted and unmounted lifecycle hooks
      1. 13.2.1 Hooks asynchronicity
      2. 13.2.2 Hooks execution context
      3. 13.2.3 Dealing with asynchronicity and execution context
    3. 13.3 The scheduler
      1. 13.3.1 A simple solution that doesn’t quite work
      2. 13.3.2 Tasks, microtasks, and the event loop
      3. 13.3.3 The event loop cycle
      4. 13.3.4 The fundamentals of the scheduler
      5. 13.3.5 Implementing a scheduler
      6. 13.3.6 Scheduling the lifecycle hooks execution
    4. 13.4 Publishing version 4 of the framework
  26. 14 Testing asynchronous components
    1. 14.1 Testing components with asynchronous behavior: nextTick()
      1. 14.1.1 Testing a component with an asynchronous onMounted() hook
      2. 14.1.2 The fundamentals behind the nextTick() function
      3. 14.1.3 Implementing the nextTick() function
    2. 14.2 Publishing version 4.1 of the framework
    3. 14.3 Where to go from here
  27. appendix Setting up the project
    1. A.1 Where to find the source code
      1. A.1.1 Checking out the code for each chapter
      2. A.1.2 A note on the code
      3. A.1.3 Reporting problems in the code
      4. A.1.4 Fixing a bug yourself
    2. A.2 Solutions to the exercises
    3. A.3 Advanced topics
    4. A.4 Note on the technologies used
      1. A.4.1 Package manager: NPM
      2. A.4.2 Bundler: Rollup
      3. A.4.3 Linter: ESLint
      4. A.4.4 (Optional) Testing: Vitest
      5. A.4.5 Language: JavaScript
    5. A.5 Read the docs
    6. A.6 Structure of the project
    7. A.7 Finding a name for your framework
    8. A.8 Option A: Using the CLI tool
    9. A.9 Option B: Configuring the project from scratch
      1. A.9.1 The examples folder
      2. A.9.2 Creating the runtime package
    10. A.10 Publishing your framework to NPM
      1. A.10.1 Creating an NPM account
      2. A.10.2 Logging in to NPM
      3. A.10.3 Publishing your framework
    11. A.11 Using a CDN to import the framework

Product information

  • Title: Build a Frontend Web Framework (From Scratch)
  • Author(s): Angel Sola
  • Release date: May 2024
  • Publisher(s): Manning Publications
  • ISBN: 9781633438064