Build a Frontend Web Framework (From Scratch) (MEAP V05). [MEAP Edition]

Table of contents :
MEAP_VERSION_5
Welcome
1_Are_frontend_frameworks_magic_to_you?
2_Vanilla_JavaScript—like_in_the_old_days
3_Rendering_and_the_virtual_DOM
4_Mounting_and_destroying_the_virtual_DOM
5_State_management_and_the_application’s_lifecycle
6_Publishing_and_using_your_framework’s_first_version
7_The_reconciliation_algorithm:_diffing_virtual_trees
Appendix._Setting_up_the_project

Citation preview

---

Build a Frontend Web Framework (From Scratch) MEAP V05 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

MEAP_VERSION_5 Welcome 1_Are_frontend_frameworks_magic_to_you? 2_Vanilla_JavaScript—like_in_the_old_days 3_Rendering_and_the_virtual_DOM 4_Mounting_and_destroying_the_virtual_DOM 5_State_management_and_the_application’s_lifecycle 6_Publishing_and_using_your_framework’s_first_version 7_The_reconciliation_algorithm:_diffing_virtual_trees Appendix._Setting_up_the_project

MEAP VERSION 5

Welcome Thank you for purchasing the MEAP for Build a Frontend Web Framework (From Scratch). I hope you enjoy reading this book as much as I’ve enjoyed writing it. I’m looking forward to you getting the same feeling of accomplishment as I did when you see your own frontend framework— written from the ground up—power web applications. There’s something magical about building your own tools and seeing them working. Throughout the book, you’ll learn the most important concepts behind what makes frontend frameworks such useful tools, but not through lots of theory, but by writing all the code yourself. To make the most out of this book, I’ll assume that you’ve got a decent understanding of JavaScript, Node JS and the Document API in the browser. You’ll start by writing an application using just JavaScript, without a framework. From that exercise, you’ll identify what are the pain points of writing applications without the help of a framework. It’s crucial that you understand the need for them in the first place; after all, we take them for granted these days. You’ll then create your own simple framework to address what you’ll discover is the main problem with vanilla JavaScript applications: the mix of DOM manipulation and business logic code. After just two chapters (chapters three and four) you’ll have a working framework, a very simple one, but a framework that you can use in small applications nevertheless. From there onwards, you’ll keep adding improvements to it, such as a Single Page Application (SPA) router that changes the page without reloading it, or a Webpack loader to transform HTML templates into render functions. By the end of the book, you’ll have written a pretty decent framework of your own. Not only can you use this framework for your own projects (something that’s extraordinarily satisfactory), but you’ll share it with the rest of the world via NPM. You heard me well! You will be publishing it the same way the big frameworks get released. Sure, the framework won’t be even close to

competing with the big frameworks out there, but you’ll have a good understanding of how they work that you can use to keep improving yours. But more important than creating a framework that can compete is the amount of fun, gratification and learning that you’ll get from working on this project. There’s one last thing I want to mention. I’m writing this book for you, so it doesn’t matter how much effort I put into it if my explanations aren’t clear enough for you to follow. If you get lost, it’s definitely not because you don’t know enough, it’s because I’m not expressing my thoughts as clearly as I could. So, if you do get lost or think I could be explaining things in more detail, I’d love to hear from you. Conversely, if you think I spend too much time explaining things you already know, also let me know. You, as a MEAP reader, have a very important role in making this book useful for the readers that’ll come after you. Oh! and if you’re enjoying the book as is, please do tell me as well. Your feedback is essential in developing the best book possible, so please visit the liveBook's Discussion Forum and leave your comments. —Angel Sola Orbaiceta In this book

MEAP VERSION 5 About this MEAP Welcome Brief Table of Contents 1 Are frontend frameworks magic to you? 2 Vanilla JavaScript—like in the old days 3 Rendering and the virtual DOM 4 Mounting and destroying the virtual DOM 5 State management and the application’s lifecycle 6 Publishing and using your framework’s first version 7 The reconciliation algorithm: diffing virtual trees Appendix. Setting up the project

1 Are frontend frameworks magic to you? This chapter covers Why you should build your own frontend framework The features of the framework we’ll build together The big picture of how frontend frameworks work How you ever wondered how the frontend frameworks you use work internally? Are you curious about how they decide when to re-render a component, and how they do to only update the parts of the DOM that change? Isn’t it interesting how a single HTML page can change its content without reloading? That the URL in the browser’s address bar changes without requesting the new page to a server? The inner workings of frontend frameworks are fascinating, and there is no better way to learn about them than by building one yourself, from scratch. But why would you want to learn how frontend frameworks work? Is’t it enough to just know how to use them? —you might ask. Good cooks know their tools; they can use knives skillfully. Great chefs go beyond that: they know the different types of knives, when to use each one, and how to keep their blade sharp. Carpenters know how to use a saw to cut wood, but great carpenters also understand how the saw works and can fix it in case it breaks. Electrical engineers not only understand that electricity is the flow of electrons through a conductor, but also have a deep understanding of the instruments they use to measure and manipulate it; for example, they could build a multimeter themselves. If their multimeter breaks, they can disassemble it, figure out what’s wrong, and repair it. As a developer, you have a frontend framework in your toolbox, but do you know how it works? Or, is it magic to you? If it broke—if you found a bug in it—would you be able to find its source and fix it? When a single-page application changes the route in the browser’s URL bar and renders a new

page without requesting it from the server, do you understand how that happens?

1.1 Why build your own frontend framework? The use of frontend frameworks is on the rise; it’s uncommon to write purevanilla JavaScript applications nowadays, and rightly so. Modern frontend frameworks boost productivity and make building complex interactive applications a breeze. Frontend frameworks have become so popular that there are jokes about the unwieldy amount of them at our disposal. (In the time it took you to read this paragraph so far, a new frontend framework was created.) Some of the most popular frontend frameworks even have their own fan groups, with people arguing about why theirs is the best. Let’s not forget that frontend frameworks are tools, a means to an end, and that the end is to build applications that solve real problems. Framework vs. library

Frameworks and libraries are different. When you use a library, you import its code and call its functions. When you use a framework, you write code that the framework executes. The framework is in charge of running the application, and it executes your code when appropriate trigger happens. Conversely, you call the library’s functions when you need them. Angular is an example of a frontend framework, whereas React claims to be a library that you can use to build UIs. For convenience, I’ll refer to both frameworks and libraries as frameworks in this book. The most popular frameworks currently available, such as Vue, Svelte, Angular, and React, are all exceptional. You might be wondering, why create your own frontend framework with so many great options already available? Well, aside from the satisfaction and enjoyment of building a complex software piece from scratch, there are practical reasons to consider. Let me tell you a little story about a personal experience to illustrate this.

1.1.1 "Do you understand how that works?" When I was a little kid I went to one of my cousins' house to hang out. He was a few years older than me and a handyman. His cabinets were full of cables, screwdrivers, and other tools, and I’d spend hours just observing how he fixed all kinds of appliances. I remember once bringing a remote control car with me so we could play with it. He stared at it for some time, then asked me a question that got me by surprise: "Do you understand how this thing works?" I didn’t; I was just a kid with zero electronics knowledge. He then said, "I like to know how the stuff I use works, so what do you say we take it apart and see what’s inside?" I sometimes still think about that. So now, let me ask you a question similar to that my cousin asked me: you use frontend frameworks every day, but do you really understand how they work? You write the code for your components, then hand it over to the framework for it to do its magic. When you load the application into the browser, it just works. It renders the views and handles user interactions, always keeping the page updated (in sync with the application’s state). For most frontend developers—and this includes me from years ago—how this happens is a mystery. Is the frontend framework you use a mystery to you? Sure, most of us have heard about that thing called the "virtual DOM," and that there needs to be a "reconciliation algorithm" that decides what is the smallest set of changes required to update the browser’s DOM. We also know that single-page applications (SPAs for short) modify the URL in the browser’s address bar without reloading the page, and if you’re the curious kind of developer, you might have read about how the browser’s history API is used to achieve this. But do you really understand how all of this works together? Have you disassembled and debugged the code of the framework you use? Don’t feel bad if you have not; most developers haven’t, including some very experienced ones. This reverse-engineering process isn’t easy; it requires lots of effort (and motivation). In this book, you and I—together as a team—will build a frontend framework from scratch. It’ll be a simple one, but it’ll be complete enough to understand how frontend frameworks work. From then on, what the framework does will no longer be a mystery to you. Oh! And it’ll be lots of fun as well.

1.2 The framework we’ll build I like to set expectations early on, so here it goes: We won’t build the next Vue or React as part of the book. You might be able to do that yourself after reading this book by filling in the missing details and optimizing a couple things here and there. The framework you’ll build can’t compete with the mainstream frameworks—that’s not the objective anyway. The objective of this book is to teach you how these frameworks work in general, so what they do isn’t magic to you anymore. You don’t need to build the most advanced framework in the world to achieve this. In fact, that’d require a book four times as thick as this one, and the process of writing it wouldn’t be as fun. (Did I mention that writing your own framework is fun?) The framework we’ll build borrows ideas from a few existing frameworks, most notably Vue, Mithril, Svelte, React, Preact, Angular and Hyperapp. Our goal is to build a framework that’s simple enough to understand, but that at the same time includes the typical features you’d expect from a frontend framework. I also wanted it to be representative of some of the most relevant concepts that are behind the source code of the most popular frameworks. For example, not all frameworks use the virtual DOM abstraction (Svelte in particular considers it to be "pure overhead," and the reasons are simply brilliant—I recommend you read their blog post), but a big portion of them do. I chose our framework to implement a virtual DOM so that’s representative of the framework you’re likely using today. In essence, I chose the approach that I thought would result in the most learning for you, the reader. I’ll be covering the virtual DOM in detail in chapter 3, but in a nutshell, it’s a lightweight representation of the DOM that’s used to calculate the smallest set of changes required to update the browser’s DOM. For example, the following HTML markup:

Name

Save

would have a virtual DOM representation like that in figure 1.1. (Note that

the saveName() event handler in the diagram doesn’t appear in the HTML markup: event handlers are typically not shown in the HTML markup, but added programmatically.) I’ll be using these diagrams a lot throughout the book to illustrate how the virtual DOM and the reconciliation algorithm works. The reconciliation algorithm is the process that decides what changes need to be made to the browser’s DOM to reflect the changes in the virtual DOM, which is the topic of chapters 7 and 8. Figure 1.1. A virtual DOM representation of some HTML markup

Your framework will have some shortcomings that make it not an ideal

choice for complex production applications, but definitely fit for your latest side project. For example, it’ll only support the standard HTML namespace, which means that SVG won’t be supported. Most of the popular frameworks support this namespace, but we’ll leave it out for simplicity. There are other features that—for the sake of keeping the book to a reasonable size and the project fun to build—we’ll leave out as well. For example, we’ll leave out component-scoped CSS support, which is a feature that’s present in most of the popular frameworks, one way or another.

1.2.1 Features Your framework will have the following features, which you’ll build from scratch: A virtual DOM abstraction. A reconciliation algorithm that updates the browser’s DOM. A component-based architecture where each component does the following: holds its own state, manages its own lifecycle, re-renders itself and its children when it states changes. An SPA router that updates the URL in the browser’s address bar without reloading the page. Slots to render content inside a component. HTML templates that are compiled into JavaScript render functions. Server-side rendering. As you can see, it’s a pretty complete framework. It’s not a full-blown framework like Vue or React, but it’s enough to understand how they work. And the neat thing is that you’ll build it line by line, so you’ll understand how it all fits together. I’ll use lots of diagrams and illustrations to help you understand the concepts that might be harder to grasp. I recommend you to write the source code yourself as you read the book. Try to understand it line by line, take your time, debug it, and make sure you understand the decisions and trade-offs we make along the way.

Figure 1.2 shows the architecture of the framework we’ll build. It includes all the parts of the framework you’ll implement, and how they interact with each other. Figure 1.2. Architecture of the framework we’ll build

I will revisit this figure, making sure to highlight each part of the framework as we build it. You don’t need to understand all the details of the architecture right now, but it’s good to have a high-level understanding of it. At the end of the book, this figure will make a lot of sense to you: you’ll recognize each and every part, as you’ll have built them yourself.

1.2.2 Implementation plan As you can imagine, you can’t build all of this in a single chapter. We want to break it down into smaller pieces so that you can focus on one thing at a time. Figure 1.3 shows the implementation plan for the framework. It resembles a kanban board, where each post-it represents the work of one or more chapters. You’ll pick up a post-it in each chapter. Figure 1.3. Implementation plan for the framework we’ll build

You’ll start by implementing a simple example application using just vanilla JavaScript, which will help you understand how frameworks can simplify the code of a frontend app. (Once you’ve suffered the "pain", you’ll be in a better position to appreciate the benefits of a framework.) Stateless components and global application state Once you have a better understanding of the benefits of frameworks, you’ll extract parts of the application’s view to stateless components modeled by pure functions that return the virtual DOM representation of their view. The application will hold the entire state of the application and pass it to the components. This allows you to focus on the DOM reconciliation algorithm —likely the most complex part of the framework. Stateful components Next, you’ll allow components to have their own state, which makes state management much simpler. The application will no longer need to hold the entire state; it’ll be split among components instead. Pure functions will turn into classes that implement a render() method, and each component will be its own little application with its own lifecycle. Lifecycle hooks You’ll then add lifecycle hooks to the components, which make possible executing code at certain moments in time, like when the component is mounted into the DOM. An example of using a lifecycle hook is to fetch data from a remote server when the component is mounted. Slots to insert content inside a component You’ll also add support for slots, which allow you to render content inside a component, making it more reusable and customizable. SPA router

You’ll then implement a router, which allows the application to navigate between different pages without reloading the page. Note

Most frameworks don’t come with a router bundled; it’s typically a plugin or a separate library that you have to install in your project. For the sake of learning, you’ll include our router in the framework itself. HTML templates Finally, you’ll add a Webpack loader module that reads HTML templates and compiles them into JavaScript render functions, making it more convenient to write our components' view in HTML. So, instead of writing this: function render() { return h('div', { class: 'container' }, [ h('h1', {}, ['Look, Ma!']), h('p', {}, ["I'm building a framework!"]) ]) }

you’ll be able to write this:

Look, Ma!

I'm building a framework!

Isn’t that much nicer? Don’t worry if you don’t understand what the h() call is; we’ll devote the whole chapter 3 to explaining it. In a nutshell, it’s a function that creates virtual DOM nodes. Server-side rendering & hydration Finally, you’ll implement server-side rendering and the DOM hydration algorithm. Server-side rendering (SSR) renders the view on the server instead of in the browser, improving page loading times and aiding SEO.

SSR Hydration

Hydration is the process by which the framework matches HTML elements with their corresponding virtual DOM nodes and attaches event handlers to make the HTML markup interactive in the browser. The hydration algorithm binds the browser’s HTML to each component’s virtual DOM, allowing for dynamic updates. SSR requires a server to run, but serving static files is generally cheaper than rendering pages as users request them. As you know, all good things come with a price. Now that you know what you’ll build and you have a plan, let’s take a quick look at how frontend frameworks work.

1.3 Overview of how a frontend framework works Let’s quickly review how a frontend framework works when observed from the outside. (We’ll learn about the internals in the next chapters.) Let’s start from the side of the developer—someone using the framework to build an application. We’ll then learn about the browser’s perspective.

1.3.1 The developer’s side A developer starts by creating a new project with the framework’s CLI (Command Line Interface) tool or by manually installing the dependencies and configuring the project. Reading the framework’s documentation is important, as every framework works a little bit differently. A note on using Node JS

A frontend project is usually a regular Node JS project with its package.json file and its node_modules directory with the dependencies, including the framework used to build the app. Using Node JS is just for convenience; it helps by providing an infrastructure to run scripts, compile, and bundle our code, as well as managing dependencies, but we could very well go without

Node JS, download the framework’s JavaScript files from a CDN and include them in our HTML file. We’d be responsible to manually upgrade the dependencies when a new version is available and create a script that bundles our JavaScript code, but it’s definitely doable—just not convenient. Another benefit of using Node JS is that all Node JS projects follow the same structure and conventions, something that helps other developers to understand how to work with our codebase. In a web application, developers create components that define a part of the application’s view and how the user interacts with it. Components are written using HTML, CSS, and JavaScript code. Most frameworks use single file components (SFCs), where all the component’s code lives in a single file: HTML, CSS, and JavaScript. A notable exception is Angular, which uses three files for each component: one for the HTML, one for the TypeScript code, and one for the CSS. This allows the developer to keep the languages separate and potentially get better syntax support from their IDE. However, it may be inconvenient to jump between files to see the entire component. In this book, we will follow Angular’s approach and use three files for each component. React and Preact use JSX—an extension of JavaScript—instead of writing HTML directly. Other frameworks, like Vue, Svelte, and Angular, use HTML templates with directives to add or modify the behavior of DOM elements, like iterating over and displaying an array of items or showing specific elements conditionally. For example, the following is how you’d conditionally show a paragraph in Vue:

You get a discount!

The v-if directive is a custom directive that Vue provides to conditionally show an element. Other frameworks use slightly different syntaxes, but all of them provide the developer with a way to show or hide elements based on the application’s state. Just for the sake of comparison, here’s how you’d do the same in Svelte: {#if hasDiscount}

You get a discount!

{/if}

And this would be how you’d write it in the case of React: {hasDiscount &&

You get a discount!

}

Once the developer is satisfied with the application, the code needs to be bundled into fewer files than were originally written, so the browser can load the application using fewer requests to the server. The files can also be minified, that is, made smaller by removing whitespace and comments, and renaming variables to shorter names. This process of turning the application’s source source code into the files that are shipped to the users is called building. Building the application To deploy a frontend application to production, we first need to build it. Most of the work of building an application using a specific framework is done by the framework itself. The framework—typically—provides a CLI tool that we can use to build the application by running a simple NPM script such as npm run build. Note

There are many different ways an application can be built, resulting in a wide variety of bundle formats. Here, I’ll explain a build process that encapsulates some of the most common practices. Building the application includes a few steps: 1. The template for each component is transformed—by the template compiler—into JavaScript code that, executed in the browser, creates the component’s view. 2. The components' code—split in multiple files—is transformed and bundled into a single JavaScript file, app.bundle.js. (For larger

3.

4.

5. 6.

applications it’s common to have more than one bundle and lazy-load them; that is, load them only when they’ll become visible to the user.) The third-party code used by the application is bundled into a single JavaScript file, vendors.bundle.js. This file includes the code for the framework itself, along with other third-party libraries. The CSS code in the components is extracted and bundled into a single CSS file: bundle.css. (Same as before, larger applications may have more than one CSS bundle.) The HTML file that will be served to the user (index.html) is generated or copied from the static assets directory. The static assets (such as images, fonts or audio clips) are copied to the output directory. They can optionally be preprocessed, for example, to optimize images or convert audio files to a different format.

So, a typical build process results in four (or more, in the case of larger apps) files: app.bundle.js with the application’s code, vendors.bundle.js with the third-party code, bundle.css with the application’s CSS, and index.html, the HTML file that will be served to the user. These files are uploaded to a server, and the application is ready to be served to the user. When a user requests the website, the HTML, JS, and CSS files are statically served. Note

When a file is statically served, the server doesn’t need to do anything before sending it to the user. The server simply reads the file from disk and sends it. In contrast, when the application is rendered on the server, the server generates the HTML file before sending it to the user’s browser. Figure 1.4 shows a diagram of the build process I just described. Note that, a typical build process is more complex than the one shown in the figure, but this is enough to understand the concepts. I’ve included a step that transforms the JavaScript code. This is a generic step that refers to any transformation

that needs to be done to the code before it’s bundled, like for example transpiling it using Babel or TypeScript. Figure 1.4. A simplified diagram of a frontend application’s build process

Let’s see what happens in the browser once these files are loaded. The flow is slightly different, depending on whether the application is rendered on the server (SSR) or statically served as a single page application (SPA). Let’s start with the slightly simpler latter case.

1.3.2 The browser side of an SPA In an SPA, the server responds with a—mostly empty—HTML file that’s used to load the application’s JavaScript and CSS files. The framework then creates and updates the application’s view using the Document API. A router makes sure not to reload the entire application when the user navigates to a different URL, but rather updates the view to show the new content. Oh, and it also updates the URL in the browser’s address bar to give the user a nice experience. Let’s see this process step by step. Step 1: Loading the HTML file When the user navigates to the application by writing its URL, the browser requests the page’s HTML file (1), which is returned by the server (2), as illustrated in figure 1.5. Figure 1.5. Single-page application requesting the—mostly empty—HTML page

The browser loads the HTML file and parses it. This HTML is mostly empty and is used to load the JavaScript and CSS bundles declared in the #1

My TODOs #2 New TODO

Add

#3

If you now refresh the browser window, you should see something like Figure 2.3.

Figure 2.3. The HTML markup for the TODOs app

The remaining part of the HTML markup will be dynamically generated by the JavaScript code. Here’s where the fun begins. Exercise 2.1

Add some CSS styles to the title, the input field, and the button. Here’re some suggestions: Use a nicer font, instead of the default one. You can choose one from Google Fonts (they’re free to use), like Roboto and apply it to the document. Center the application in the middle of the page, horizontally. Make the title bigger. Place the input field’s label above the input field and make it italic. Give the input and button some padding.

2.2.3 The JavaScript code

You will write the JavaScript code in the todos.js file, so make sure you have it open in your editor. First of all, you want to define the application’s state, which is a list of to-dos —an array of strings. You’ll add some to-dos already populated in the array, so that when you open the page in the browser, you can see some to-dos already rendered. Then you want to grab references to the DOM elements that you need to interact with, using the document.getElementById() function from the Document API. Open the todos.js file and write the code in listing 2.2. Listing 2.2. The state and HTML element references (todos.js)

// State of the app const todos = ['Walk the dog', 'Water the plants', 'Sand the chairs'] // HTML element references const addTodoInput = document.getElementById('todo-input') const addTodoButton = document.getElementById('add-todo-btn') const todosList = document.getElementById('todos-list')

So far, your application doesn’t do anything when you type a new to-do description in the input field and click the Add button. The to-do items in the state aren’t rendered either. This is because you have neither added event listeners nor written the code that renders the to-dos. Let’s fix that. Initializing the view Now, you want to initialize the view of the application—that is, dynamically generate the HTML markup that depends on the application’s state—and attach event listeners to the DOM elements that need them. To initialize the view, you iterate over the to-dos in the application’s state and render each one using a function you’ll call renderTodoInReadMode(). Each element is then append it to the

element using the todosList element append() method. Rendering

To render means to transform some data into a visual representation; something we can see. In this context, when we render a to-do, what we’re doing is creating the HTML elements that represent the to-do in our application. Rendering a to-do—a JavaScript string—into an HTML representation will by done by a function that you’ll call renderTodoInReadMode(). The naming is important here: we’re saying that the to-do is rendered in read mode. If you remember from your discussion with the client, the to-do can be edited, so we need to render it in "edit mode" as well. In short: a to-do can be rendered in two different ways (it has two different visual representations). You’ll also write a renderTodoInEditMode() function later on. After rendering the to-dos in read mode you need to add a few event listeners to the DOM elements. First, you’ll add a listener on the field’s input event—fired every time the user types something in the input field. This handler function should check if the input field has less than three characters, in which case the button is kept disabled to prevent the user from adding empty (or very short) to-do items. The button is enabled—by removing the disabled attribute—when the to-do has at least three characters (figure 2.4). If you remember from the HTML markup (see listing 2.1), the Add element is disabled by default. Figure 2.4. The field is disabled when the input field has fewer than three characters

Then, you’ll add a listener on the field’s keydown event, which fires every time the user presses a key—any key. But you’re not interested in responding to every key the user presses, only the "Enter" key is relevant. For this, you want to check if the key pressed is "Enter", and if so, call a function you’ll name addTodo(), which you’ll implement in a minute an will be used to add a new to-do to the application’s state, and render it in the HTML. Finally, you need a listener on the Add element’s click event. The event handler is the same as the one for the keydown event: it calls the addTodo() function, clears the input field and disables the Add button In the todos.js file write the code in listing 2.3. Listing 2.3. The initialization of the application (todos.js)

// Initialize the view for (const todo of todos) { #1 todosList.append(renderTodoInReadMode(todo)) } addTodoInput.addEventListener('input', () => { #2

addTodoButton.disabled = addTodoInput.value.length < 3 }) addTodoInput.addEventListener('keydown', ({ key }) => { #3 if (key === 'Enter' && addTodoInput.value.length >= 3) { addTodo() } }) addTodoButton.addEventListener('click', () => { #4 addTodo() }) // Functions function renderTodoInReadMode(todo) { // TODO: implement me! } function addTodo() { // TODO: implement me! }

Figure 2.5 shows a visual representation of the events you’ve added to the static part of the HTML markup. Figure 2.5. The event listeners added to the HTML elements

Now we’re getting to the meat of the application: rendering to-dos! This is the part that a framework would do for you, but you’re going to do it yourself in this chapter.

Exercise 2.2

Add a CSS transition to the color property of the button when it’s enabled or disabled. This will make the button’s color change smoothly when it’s enabled or disabled. Here’re some tips in case you get stuck: You can use the transition CSS property. Go ahead and read about it in the MDN documentation if you need a refresher. You can use the :disabled pseudo-class to style the button when it’s disabled. You can use the :enabled pseudo-class to style the button when it’s enabled. Rendering to-dos in "read mode" To render a to-do in read mode, you need to use the document.createElement() method of the Document API to create some HTML elements: The to-do items are inside an unordered list element (
), so each todo should go inside a list item element (
• ). The to-do itself is a simple text that you can render inside a element. Then, the user should be able to mark a to-do as done, so you need a button to do that. Figure 2.6 depicts the HTML markup for a to-do in read mode. Figure 2.6. A TODO in "read mode" is rendered as a
• element containing a element with the to-do text and a button to mark it as done
  
  The to-do description can be added as the textContent property of the element. We could have created a text node and appended it to the element (for example doing: span.append(todo)), but setting the textContent is a bit more concise. The element needs to have a listener attached to its dblclick event that’s going to replace the to-do in read mode with the "edit mode" version. To accomplish this, you’ll call the replaceChild() method on the
• DOM node. This method removes the entire
• element and its children from the list of to-dos and renders the "edit mode" version of the to-do in its place. The rendering is done by calling the renderTodoInEditMode() function, which you’ll implement in the next section. The replaceChild() method
  
  The replaceChild() method from the DOM API is used to replace a child node of a DOM node (the one upon which the method is called) with another node. It accepts two arguments: newNode: oldNode:
  
  the node that will replace the old node. the node that will be replaced.
  
  Lastly, you want to attach an event listener to the element’s click event that’s going to remove the to-do from the list of to-dos. For that, you’ll write a removeTodo() function that you’ll also need to fill in later on.
  
  Now that you know what the plan is, fill in the renderTodoInReadMode() function as in listing 2.4. Listing 2.4. Rendering the to-dos in "read mode" (todos.js)
  
  function renderTodoInReadMode(todo) { const li = document.createElement('li') #1 const span = document.createElement('span') #2 span.textContent = todo span.addEventListener('dblclick', () => { #3 const idx = todos.indexOf(todo) todosList.replaceChild( #4 renderTodoInEditMode(todo), todosList.childNodes[idx] ) }) li.append(span) const button = document.createElement('button') #5 button.textContent = 'Done' button.addEventListener('click', () => { #6 const idx = todos.indexOf(todo) removeTodo(idx) }) li.append(button) return li } function removeTodo(index) { // TODO: implement me! }
  
  Figure 2.7 shows a visual representation of the events you’ve added to the todos in read mode. Figure 2.7. The event listeners added to the to-dos in "read mode"
  
  Let’s now implement the renderInEditMode() function. Rendering to-dos in "edit mode" The to-do in edit mode is also part of the unordered list of to-dos, thus it should also appear inside a
• element. But this time, the
• element should contain an element instead of a element, so that the user can modify the to-do description. And instead of having one button, we need two: one to save the changes and another to cancel them. Figure 2.8 shows the HTML markup for a to-do in "edit mode". Figure 2.8. A TODO in "edit mode" is rendered as a
• element containing an element
  
  with the to-do text and two buttons to save or cancel the changes
  
  When the user clicks on the save button, a function that you’ll write later named updateTodo() will modify the to-do description in the state, and replace the to-do in edit mode with the read mode version (once the user is done editing the to-do, we want them to see the updated version back in read mode). When the user clicks on the Cancel button instead, you just need to call the renderTodoInReadMode() function. Write the code for the renderTodoInEditMode() function as in listing 2.5. Listing 2.5. Rendering the to-dos in "edit mode" (todos.js)
  
  function renderTodoInEditMode(todo) { const li = document.createElement('li') #1 const input = document.createElement('input') #2 input.type = 'text' input.value = todo li.append(input) const saveBtn = document.createElement('button') #3 saveBtn.textContent = 'Save' saveBtn.addEventListener('click', () => { #4 const idx = todos.indexOf(todo) updateTodo(idx, input.value) }) li.append(saveBtn)
  
  const cancelBtn = document.createElement('button') #5 cancelBtn.textContent = 'Cancel' cancelBtn.addEventListener('click', () => { #6 const idx = todos.indexOf(todo) todosList.replaceChild( #7 renderTodoInReadMode(todo), todosList.childNodes[idx] ) }) li.append(cancelBtn) return li } function updateTodo(index, description) { // TODO: implement me! }
  
  The code is very similar to the one for the read mode version of the to-do. Figure 2.9 shows the events you’ve added to the to-dos in "edit mode". Figure 2.9. The events added to the to-dos in "edit mode"
  
  So, all that’s missing to implement are the addTodo(), removeTodo(), updateTodo() functions. Let’s do that now. Adding, removing and updating to-dos
  
  The functions to add, remove and update to-dos are defined in our todos.js file, but they’re not implemented yet. We left "TODO" comments (oh, the irony!) in the code to remind us of that. The implementation of these functions is straightforward, so let’s see what each of them does. The addTodo() function reads the description for the new to-do from the element’s value property, and pushes it into the array of to-dos. Then it calls the renderTodoInReadMode() function to render the HTML for the new to-do and appends it to the todosList element. Lastly, it clears the element’s value property so that the user can enter a new to-do description, and disables the add button. The removeTodo() function removes the to-do from the array of to-dos and the
• element from the document. To remove the
• element from its parent
  , it calls the remove() method on the target node, which you can locate by index inside the childNodes array of the
  element. The updateTodo() function needs two parameters passed to it: the index of the to-do to update, and the new description for the to-do. The passed description overwrites whatever is in the array of to-dos at the given index. Then, using the renderTodoInReadMode() function, you can render the HTML for the updated to-do, and finally replace the to-do at the given index inside the todosList element’s childNodes array with the new HTML. Listing 2.6 shows the code for the addTodo(), removeTodo() and updateTodo() functions. Listing 2.6. Functions to add, remove and edit to-dos (todos.js)
  
  function addTodo() { #1 const description = addTodoInput.value todos.push(description) const todo = renderTodoInReadMode(description) todosList.append(todo) addTodoInput.value = '' addTodoButton.disabled = true }
  
  function removeTodo(index) { #2 todos.splice(index, 1) todosList.childNodes[index].remove() } function updateTodo(index, description) { #3 todos[index] = description const todo = renderTodoInReadMode(description) todosList.replaceChild(todo, todosList.childNodes[index]) }
  
  If you refresh the page now, you should be able to add, remove and update to-dos. Your application should look similar to Figure 2.10. You’ve written a web application without a framework. It wasn’t that painful, was it? Figure 2.10. The finished TODOs app
  
  Try to add a new to-do by writing something like "Sing a song" in the input field and pressing the Add button. Then, press the "Done" button to remove the to-do from the list. Give a try clicking one of the to-dos to see how it gets replaced by its "edit mode" version, like in Figure 2.11. Figure 2.11. The TODOs app in "edit mode"
  
  I hope you feel excited about what you’ve just built: an interactive web application without a framework! But I also hope that you’ve realized how inefficient it’d be to write a large application like this; that’s why using a framework is a great idea. Operating at such a low-level to programmatically generate the HTML markup for the DOM is tedious and error-prone. Exercise 2.3
  
  Imagine that the customer tells you that they don’t want "done" to-dos to be removed from the list, but instead crossed out. Can you implement this feature for them? Exercise 2.4
  
  The customer tried the application and loved it! But they realized they can add the same to-do multiple times—unacceptable! Can you fix this bug, so that if the user tries to add a to-do that already exists, the application doesn’t add it again and warns the user about it? Exercise 2.5
  
  The customer came with a challenging request for you. To aid their users with a hearing impairment, they’d like the application to read out loud a to-do when it’s added to the list. Can you implement this feature for them? Psss… here’s a little tip from a senior developer at your company. You might want to read about the Web Speech API. The first thing we want our framework to take care for us is the usage of the Document API to create and manipulate the DOM; that’s the part that’s the most burdensome to write. If we can abstract away the manipulation of the DOM, we can focus on the application logic, which is what makes our applications useful. Think about it: the time spent working on manipulating the DOM doesn’t really add value to the final user. We need to do it for the application to be interactive, but it’s not what the user cares about. A good framework should allow us to forget about dealing with the DOM and focus on the application logic. That’s exactly what we’ll do in the next chapter.
  
  2.3 Answers to the exercises 2.3.1 Exercise 2.1 To add some nice CSS, first create a styles.css file in the examples/ch02 directory and load it from the HTML file’s tag, like so:
  
  
  
  
  
  My TODOs
  
  Then, add the following CSS rules to the styles.css file to use the Roboto font:
  
  @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400 body { font-family: 'Roboto', sans-serif; width: 500px; margin: 2em auto; }
  
  Add some CSS rules to center the application, add some padding to the input field and the button, and to place the label on top of the input field, displayed in italic font: body { font-family: 'Roboto', sans-serif; width: 500px; margin: 2em auto; } label { display: block; font-style: italic; margin-bottom: 0.25em; } h1 { font-size: 3.5rem; } button, input { font-family: inherit; padding: 0.25em 0.5em; font-size: 1rem; }
  
  Feel free to experiment and add your own styles to the application. The result of using the styles above is shown in Figure 2.12. Figure 2.12. The TODOs app with some CSS styles
  
  Looking much nicer, don’t you think?
  
  2.3.2 Exercise 2.2 To add a transition to the button, for when it gets enabled or disabled, you can use the following CSS rules: button:disabled { transition: color 0.5s ease-out; } button:enabled { transition: color 0.5s ease-out;
  
  }
  
  If you start typing in the input field, once you’ve typed three characters, you’ll see how the button’s text color changes from gray to black. That’s the transition you’ve just added. When you remove the characters from the input field, the button’s text color smoothly transitions back to gray.
  
  2.3.3 Exercise 2.3 Implementing the crossed-out to-dos feature is a bit more challenging that it appears at first sight. You need to change how the state is stored to keep track of whether a to-do is done or not: // State of the app const todos = [ { description: 'Walk the dog', done: false }, { description: 'Water the plants', done: false }, { description: 'Sand the chairs', done: false }, ]
  
  Then you need to change the code in all the places where the sate is used. For example, inside the renderTodoInReadMode() you need to change the following line: span.textContent = todo span.textContent = todo.description
  
  And in the renderTodoInEditMode() function, you need to change the following line: input.value = todo input.value = todo.description
  
  You also need to edit the code in the addTodo() and updateTodo() functions. I leave this part as an exercise for you to do. Then, when the Done button is clicked, the removeTodo() function needs to set the done property of the to-do to true instead of removing it from the array: function removeTodo(index) {
  
  todos.splice(index, 1) todosList.childNodes[index].remove() todos[index].done = true }
  
  And lastly, you need to modify the renderTodoInReadMode() so that, when a to-do is done, it adds a class to the element to cross out the text, doesn’t include the Done button, and doesn’t allow the user to edit the to-do: function renderTodoInReadMode(todo) { const li = document.createElement('li') const span = document.createElement('span') span.textContent = todo.description if (todo.done) { span.classList.add('done') } if (!todo.done) { span.addEventListener('dblclick', () => { const idx = todos.indexOf(todo) todosList.replaceChild( renderTodoInEditMode(todo), todosList.childNodes[idx] ) }) } li.append(span) if (!todo.done) { const button = document.createElement('button') button.textContent = 'Done' button.addEventListener('click', () => { const idx = todos.indexOf(todo) removeTodo(idx) }) li.append(button) } return li }
  
  And add the following CSS rule to the styles.css file (or inside a
  
  Tic Tac Toe
  
  Tic Tac Toe
  
  And that’s it! Your tic-tac-toe application is ready to be played, and it should look similar to figure 6.3. Figure 6.3. The tic-tac-toe application: in the first image, it’s player O’s turn, in the second image, player X has won. The third image shows the draw case.
  
  It might not be the first time you implement a tic-tac-toe game, but I’m pretty confident it’s the first one you implement using a framework you built yourself. Go ahead and add that to your resume!
  
  6.5 Summary To publish your framework on NPM, you first bundle it using npm run build, then you publish it using the npm publish command.
  
  Whatever you export from the src/index.js file is what’s going to be available to the users of your framework. (You configured it this way in appendix A.) In a two-way binding, the state and the DOM are synchronized: whatever changes in one side is reflected in the other. Using the first version of your framework, you’ve rewritten the to-do application you wrote in chapter 2. This time, you didn’t have to worry about DOM manipulation, but only about the application’s logic.
  
  7 The reconciliation algorithm: diffing virtual trees This chapter covers Comparing two virtual DOM trees Finding the differences between two objects Finding the differences between two arrays Finding a sequence of operations that transform one array into another Picture this: you’re in the supermarket doing the groceries using the shopping list your partner gave you. You walk around the aisles, picking up the items one by one, and putting them in the cart. When you’re done, you head to the checkout counter, but at that very moment something vibrates in your pocket —it must be a message from your partner. She realized you already had a dozen eggs in the fridge, and what’s actually missing is a bottle of wine for that fancy dinner you’re going to have tonight with some friends. She texts you the updated shopping list. You now have two lists: the original one—whose items are already in your cart—and the updated one, as you can see in figure 7.1. Figure 7.1. The two shopping lists: the original one and the updated one
  
  You have two options: 1. You can start over, emptying the cart and putting back the items to the shelves, then picking up the items in the updated list. This way you make sure you have the right items—the ones in the updated list—in your cart.
  
  2. You can pause for a minute, compare the two lists and figure out what items where removed and what items were added. Then you can get rid of the items that were removed from the original list, and pick the items that were added to the updated list. You’re a smart person (after all, you’re reading this book, aren’t you?), so you choose the second option. It requires some extra brain power, but it’s less labor-intensive. It only takes you a few seconds to realize that, if you take the original list, strike out the egg carton, and add the bottle of wine, you’ll have the updated list (figure 7.2). You figured out the minimum number of operations you need to have the items in the new list in your cart. Figure 7.2. The updated shopping list: the original list with the egg carton struck out and the bottle of wine added
  
  This analogy perfectly illustrates what the reconciliation algorithm is about: comparing two virtual DOM trees, figuring out what changes, and applying those changes to the real DOM. Destroying the entire DOM and recreating it from scratch every time the state changes is like emptying the cart and picking the new items from scratch every time there’s a new shopping list: you don’t need to think, but it’s laborious. You want your framework to be
  
  smart to figure out the minimum number—or at least a reasonably small number—of operations to apply to the real DOM to have it reflect the new state. The diagram in figure 7.3 shows how your framework is currently rendering the view when the state changes. Destroying and recreating the DOM every time the state changes is an expensive operation. In a frontend application, the state can change a couple times every second, so imagine if your shopping list changed that often and you had to empty your cart and start over every time your partner sent you an updated shopping list. Figure 7.3. The current framework destroys and recreates the DOM every time the state changes. This is an expensive operation.
  
  The objective of this chapter is to implement the first half of the reconciliation algorithm (you’ll implement the rest in the next chapter). This algorithm does two things: 1. It figures out the differences between two virtual DOM trees (this chapter), and 2. It applies those differences to the real DOM, so that the framework can update the DOM in a more efficient way (next chapter). The same way that when you get a new shopping list, you have to first compare it with the original one, find the differences, and then make the changes to the items in your cart. You have to compare the old virtual DOM with the new virtual DOM, find the differences, and then apply those differences to the real DOM. You’ll focus on the first part in this chapter. In the next chapter, you’ll write a patchDOM() function implementing the algorithm, putting all the pieces together, and your framework will update the view in a much more efficient way, as you can see in figure 7.4. Figure 7.4. The framework will update the DOM in a more efficient way, using the reconciliation algorithm written in the patchDOM() function.
  
  So, what are the mistery ingredients of the reconciliation algorithm? Important
  
  You can find all the listings in this chapter in the listings/ch07 directory of the book’s repository. The code you write in this chapter is for the framework’s second version, which you’ll publish in chapter 8. Therefore, the code in this chapter can be checked out from the ch8 label: $ git switch ch8
  
  7.1 The three key functions of the reconciliation algorithm Believe it or not, finding the differences between two virtual DOMs—which is the most complex part of the reconciliation algorithm—can be solved with three functions, as follows: A function to find the differences between two objects, returning the keys that were added, the keys that were removed, and the keys whose associated value changed (used to compare the attributes and CSS style objects). A function to find the differences between two arrays, returning the items that were added, and the items that were removed (used to compare two CSS classes arrays). A function that given two arrays figures out a sequence of operations that, if applied to the first array, transform it into the second array (used to find a sequence of operations that turn an array of a node’s children into its new shape). The two first functions are somehow straightforward, but the third is a bit more complex. In fact, I’d say that it’s where 90% of the complexity of the reconciliation algorithm lies. In this chapter, you’ll write these functions,
  
  which you’ll use in the next chapter to implement the patchDOM() function. Let’s start by exploring what we mean by "figuring out what changed and applying those changes to the real DOM."
  
  7.2 Comparing two virtual DOM trees As we’ve seen, the view is a function of the state: when the state changes, the virtual DOM representing the view also changes. The reconciliation algorithm compares the old virtual DOM—the one used to render the current view—with the new virtual DOM after the state changes. It’s job is to reconcile the two virtual DOM trees, that is, figure out what changed and apply those changes to the real DOM, so that the view reflects the new state. To compare two virtual DOM trees, you start comparing the two root nodes, checking if they’re equal (we’ll see what it takes for two nodes to be equal) and if their attributes or event listeners have changed. If you find that the node is not the same, you look no further, destroy the subtree rooted at the old node, and replace it with the new node and everything under it (we’ll explore this more in detail later on). You then compare the children of the two nodes, traversing the trees recursively in a depth-first manner. When you compare two arrays of child nodes, you need to figure out if a node was added, removed, or moved to a different position.
  
  7.2.1 Finding the differences Let’s look at an example. Imagine that you’re comparing the two virtual DOM trees in figure 7.5: the old virtual DOM tree at top and the new virtual DOM tree at the bottom. In this illustration the differences have already been highlighted, but we’ll explore how to find them step by step. Figure 7.5. Comparing two virtual DOM trees to find what changed
  
  Exercise 7.1
  
  Being able to translate from a virtual DOM diagram to HTML (and viceversa) is useful. Can you write the HTML that both the old and new virtual trees in the example in figure 7.5 would produce Step one. You compare the two root nodes (figure 7.6) and find the id attribute changed from "abc" to "def", and the style attribute changed from "color: blue" to "color: red". These changes, labelled as "1. Attribute modified" and "2. Style modified" in figure 7.5, are the first changes you need to apply to the real DOM, as we’ll see below. Figure 7.6. Comparing the root nodes
  
  Step two. You then compare the two children of the node one by one. The first child is a

  element (figure 7.7), and it seems to be in the same position in both trees—it didn’t move. It’s class attribute has changed from
  
  to "fox". This change is labelled as "3. Class modified" in figure 7.5, and is the next change to apply to the real DOM. "foo"
  
  Figure 7.7. Comparing the first child of the nodes: a

  element
  
  Step three. Remember that we want to iterate the trees in a depth-first manner, so you’d compare the children of the

  element next: their text content. The text content has changed from "Hello" to "Hi" (figure 7.8). This change, labelled as "4. Text changed" in figure 7.5, is applied to the real DOM next. Figure 7.8. Comparing the text nodes of the

  element
  
  Step four. Then you find that the second child is a

  in the old tree, but it’s a in the new tree (figure 7.9). By looking at the children of the new node, you quickly realize that the

  that used to be the second child has moved one position to the right. You conclude that the was added, and it naturally moved the

  one position to the right. Adding the new node, including its text node, is the next change to apply to the DOM. This change is labelled as "5. Node added" in figure 7.5. Figure 7.9. Comparing the second child of the nodes: a

  element in the old tree, and a element in the new tree
  
  Step five. Then you look at the

  node that you know moved one position (figure 7.10), and see that its class attribute changed from ["foo", "bar"] to ["baz", "bar"], which means that the class "foo" was removed and the class "baz" was added. This change is labelled as "6. Class added and class removed" in figure 7.5. Figure 7.10. Comparing the

  element that moved one position to the right
  
  Step six. Last, you check the children of the

  element (figure 7.11), and find that the text content changed from "World" to "World!". This change is labelled as "7. Text changed" in figure 7.5. Figure 7.11. Comparing the text nodes of the

  element that moved one position to the right
  
  After comparing the two trees, you found a total of seven changes that need to be applied to the real DOM. The next step is to apply them. Note
  
  Remember that you’ll implement this part—modifying the DOM—in the next chapter. But we still want to see how it works for you to have a good high-level understanding of the complete reconciliation process. Let’s see how you do that.
  
  7.2.2 Applying the changes Let’s see how you’d apply these changes in order. Figure 7.12 shows the HTML markup of the old virtual DOM tree. Figure 7.12. The HTML markup of the old virtual DOM tree
  
  You’ll now apply the changes you identified by comparing the two trees in the previous section. Applying a change means modifying the real DOM to match the new virtual DOM tree. Every change we make will be shown in the figure, so you can see how the DOM changes with each operation. Modifying the id and style attributes of the parent node The first two changes were to the root node’s attributes, as shown in figure 7.13. To apply these changes, you’d need to update the id and style attributes of the node: div.id = 'def' div.style.color = 'red' Figure 7.13. Applying the attribute and style changes to the DOM’s node
  
  Modifying the class attribute and text content of the first

  node Then go the changes to the first

  node, as shown in figure 7.14. In this case, you’d need to update the class attribute and the text content of the

  node: p1.className = 'fox' p1Text.nodeValue = 'Hi' Figure 7.14. Applying the changes to the first

  node
  
  Adding the new node The next change is to add the node, as shown in figure 7.15. To add a new node (and its children) to the DOM, you can pass the virtual node to the mountDOM() function you wrote earlier, passing the node as the parent node: mountDOM(spanVdom, div)
  
  Note that, as is, the mountDOM() function would append the node to the children array of the node, but that’s not what we want. We want to specify that the node should be inserted at the second position (index 1) of the children array. We’ll need to modify the mountDOM() function to accept a third argument, the index where the new node should be inserted: mountDOM(spanVdom, div, 1)
  
  You will modify the mountDOM() function in the next chapter, but for now,
  
  you can just assume that it takes an index as the third argument and inserts the new node at that position. Figure 7.15. Adding the new node and its text node
  
  Modifying the class attribute and text content of the second

  node Last, you reach the second

  node. You don’t need to move it because when the node was added, it naturally moved the second

  node one position to the right. When we say that it was naturally moved, we mean that the movement happened as the result of another operation, but it’s not a
  
  move operation you need to explicitly do yourself. (Keep this in mind; it’ll be important later on.) The class attribute changes from ["foo", "bar"] to ["baz", "bar"], so you need to change the classList property of the

  node: p2.classList.remove('foo') p2.classList.add('baz')
  
  The text content changed from "World" to "World!", so you need to update the text node, as follows: p2Text.nodeValue = 'World!'
  
  You can see these changes in figure 7.16. Figure 7.16. Applying the changes to the second

  node
  
  This is what the patchDOM() function you’ll write in the next chapter does, in a nutshell. To have a better high-level understanding of how the rendering works when the patchDOM() function enters the scene, let’s start by modifying the renderApp() function to call the patchDOM() function instead of destroying and recreating the DOM every time.
  
  7.3 Changes in the rendering To understand the role of the patchDOM() function—the implementation of the reconciliation algorithm—it’s helpful to see the big picture of how the rendering works with it. Figure 7.17 shows the changes in the rendering
  
  mechanism, using the patchDOM() function. As you can see, the renderer is now split in three sections: mounting, patching, and unmounting. Whereas in the previous chapter, the same renderApp() function was responsible for mounting and updating the DOM, you’ll now split that into the two following functions: mount(), which internally uses mountDOM() renderApp(), which internally uses patchDOM() Figure 7.17. Changes in the rendering mechanism, using the patchDOM() function
  
  You need to modify the code so the renderApp() function doesn’t completely destroy and recreate the DOM anymore; and this is thanks to the patchDOM() function. patchDOM() takes the last saved virtual DOM (stored in the vdom variable inside the application’s instance), the new virtual DOM resulting from calling the view() function, and the parent element (stored in the parentEl instance) of the DOM, where the view was mounted, and figures out the changes that need to be applied to the DOM. The application’s instance mount() method doesn’t need to use the renderApp() function anymore; renderApp() is only called when the state changes. mount() calls the view() function to get the virtual DOM, and then calls the mountDOM() function to mount the DOM. The user is supposed to call the mount() method only once. If they call it more than once, the same application will be mounted multiple times, which is not what we want. You can add a check to prevent this from happening by throwing an error if the vdom variable is not null (you’ll do this as an exercise). Let’s reflect this important change in the code. Open the app.js file, and make the changes shown in listing 7.1. Listing 7.1. Changes in the rendering
  
  import import import import
  
  { { { {
  
  destroyDOM Dispatcher mountDOM } patchDOM }
  
  } from './destroy-dom' } from './dispatcher' from './mount-dom' from './patch-dom'
  
  export function createApp({ state, view, reducers = {} }) { let parentEl = null let vdom = null // --snip-- // function renderApp() { if (vdom) { destroyDOM(vdom) } const newVdom = view(state, emit) #1 mountDOM(vdom, parentEl) vdom = patchDOM(vdom, newVdom, parentEl) #2 }
  
  return { mount(_parentEl) { parentEl = _parentEl renderApp() vdom = view(state, emit) mountDOM(vdom, parentEl) #3 }, // --snip-- // } }
  
  Warning
  
  You’re importing the patchDOM() from the patch-dom.js file, which you’ll write in the next chapter (your IDE might complain that such file doesn’t exist, but that’s okay for now). Now that you’ve changed the rendering flow, let’s start thinking about the three functions used to compare two virtual DOM trees: objectsDiff(), arraysDiff(), and arraysDiffSequence(). Exercise 7.2
  
  Implement a check that doesn’t allow the user to call the mount() method more than once to prevent the same application from being mounted multiple times. If you detect that the application was already mounted, throw an error.
  
  7.4 Diffing objects When comparing two virtual nodes, you need to find the differences between the attributes of the two nodes (the props object) to patch the DOM accordingly. You want to know what attributes were added, what attributes were removed, and what attributes changed. To illustrate this let’s look at the example in figure 7.18, the attributes of an element. In the example, there’s an old object (the one on top) and a
  
  new object (the one on the bottom). By observing the two objects, you can see that the min key was added in the new object, the max key was removed, and the disabled key changed from false to true. Figure 7.18. Finding the difference between two objects: what keys were added, removed, or changed?
  
  This exercise that you’ve done by mere observation is what the objectsDiff() function that you’ll implement now does. The code you write
  
  works very similar to your observation, described in the following list: 1. Take a key in the old object. If you don’t see it in the new object, you know that the key was removed. Repeat with all keys. 2. Take a key in the new object. If you don’t see it in the old object, you know that the key was added. Repeat with all keys. 3. Take a key in the new object. If you see it in the old object, and the value associated with the key is different, you know that the value associated with the key changed. Create a new file inside the utils folder called objects.js, and write the objectsDiff() function as shown in listing 7.2. Listing 7.2. Finding the difference between two objects (utils/objects.js)
  
  export function objectsDiff(oldObj, newObj) { const oldKeys = Object.keys(oldObj) const newKeys = Object.keys(newObj) return { added: newKeys.filter((key) => !(key in oldObj)), #1 removed: oldKeys.filter((key) => !(key in newObj)), #2 updated: newKeys.filter( (key) => key in oldObj && oldObj[key] !== newObj[key] #3 ), } }
  
  Fantastic—you’ve implemented the objectsDiff() function. Can you think of a set of unit tests that would help you verify that the function works as expected? Exercise 7.3
  
  Implement a set of test cases to cover all the possible scenarios for the objectsDiff() function. If you’re not familiar with unit testing, try to think of the different cases your function should handle, and execute the function in the Browser’s console with different inputs to see if it works as expected. Let’s now look at the second function that you’ll implement, one that does a
  
  similar job for arrays.
  
  7.5 Diffing arrays Remember that the classes in an element virtual node can be given in the form of an array: h('p', { class: ['foo', 'bar'] }, ['Hello world'])
  
  When you compare two virtual nodes, you need to find the differences between the classes of the two nodes (the class array) to patch the DOM accordingly (as you did in the example of figure 7.5, in step 5). In this case, it doesn’t matter if the items in the array are in a different order, we care about only the items that were added or removed. For this, you’ll implement the arraysDiff() function next. But first, let’s look at the example in figure 7.19. In the example, there’s an old array (the one on top) and a new array (the one on the bottom). When we compare the two arrays, we see the following: A B D
  
  appears in both arrays and C were removed (only appear in the old array) and E were added (only appear in the new array)
  
  Figure 7.19. Finding the difference between two arrays: what items were added or removed?
  
  Note that in this comparison, items are either added or removed, but they are never changed. If an item is changed, we detect it as a removal of the old item and an addition of the new item. With this in mind, open the utils/arrays.js file (where you previously implemented the withoutNulls() function) and write the arraysDiff() function as shown in listing 7.3. Listing 7.3. Finding the differences between two arrays (utils/arrays.js)
  
  export function arraysDiff(oldArray, newArray) { return { added: newArray.filter( (newItem) => !oldArray.includes(newItem) #1 ), removed: oldArray.filter( (oldItem) => !newArray.includes(oldItem) #2
  
  ), } }
  
  Warning
  
  In the arraysDiff() function, you’re not specifying at what index an item was added or removed, because to modify the classList of an element, you’ll simply add or remove the classes. This might be problematic because, as you know, the order of classes in the classList matters. A class that comes later in the list can override the styles of a class that comes earlier in the list. This is a trade-off that you’re making to keep the code simple, but bear in mind that a more robust solution is to maintain the order of classes in the classList. With these two out of the way, you’re ready to tackle the beast: the arrayDiffSequence() function. That’s the function were we might sweat a bit. But once you’ve written that function, the rest of the book will feel like a breeze (or something like that). Take a deep breath, and let’s move on.
  
  7.6 Diffing arrays as a sequence of operations A virtual node has children, and those children can move around from a render to the next one. Child nodes are added and removed all the time as well. When you compare two virtual nodes, you need to find the differences between the children of the two nodes (the children array) to patch the DOM accordingly. You want to find a sequence of operations that, executed on the DOM, transform the old children array—rendered as HTML elements —into the new children array. If you’re given two arrays and I ask you to come up with a list of add, remove, and move operations that transform the first array into the second one, how would you go about it? You can see an example in figure 7.20. In this example, the old array is [A, B, C] and the new array is [C, B, D], and I was able to find a sequence of three operations that, if applied in order, transform the old array into the new array.
  
  Figure 7.20. Finding a sequence of operations that transform the original array into the new one
  
  Important
  
  Notice how the move operation’s from index is different from the original index that C had in the old array? C appeared at i=2, but after removing A, it moved to i=1. The indices in the operations are always relative to how they find things in the array at the moment of the operation. But you still want to keep track of the original index of the item, and I’ll explain why in a moment. There are many other sequences of operations (infinite, in fact) that would yield the same result. In other words, the sequence of operations that transforms the old array into the new array is not unique.
  
  Exercise 7.4
  
  Can you find another sequence of similar operations that would also transform the old array into the new array? One constraint that we can impose on the sequence is that we want to minimize the number of operations. (You could come up with a sequence that starts with moving an item from its position to another one, and then moving it back to its original position, and repeat that a lot of times, but that’s not what we want.) DOM modifications are relatively expensive, so the fewer operations we perform, the better.
  
  7.6.1 Defining the operations you can use Let’s start by defining the operations that you’ll use to transform the old array into the new array. In the example before we used three operations: add, remove, and move. You actually need to add a fourth operation: noop (no operation). You’ll use a noop operation when you find an item that’s in both arrays, which requires no action to stay where it ends up. Notice how I said ends up and not starts at; this distinction is important. There are items that move naturally to their final position, because items are added, removed or moved around them. For example, if we want to go from [A, B] to [B], we just need to remove A. B falls into place naturally: without any explicit move operation it goes from i=1 to i=0. When an item moves naturally, you need to include a noop operation in the sequence. This helps you keep track of the items that moved naturally, from where they started to where they ended up. You need this operation because patching the DOM is a recursive process: each of the items in the children array that moved around also need to be compared to look for differences. For this to be possible, you need to know where each item started and where it ended up, in other words, their initial and final indexes in the array. This will become much clearer in the next chapter. The following list is the operations and the data they need for them to be
  
  completely characterized: add: { op: 'add', item: 'D', index: 2 } remove: { op: 'remove', item: 'B', index: 0 } move: { op: 'move', item: 'C', originalIndex: 2, from: 2, index: 0 } noop: { op: 'noop', item: 'A', originalIndex: 0, index: 1 }
  
  As you can see, in all cases, the object that describes the operation has an op property that indicates the type of operation. The item property is the item that’s being added, removed, or moved (naturally or forcefully). The index property is the index where the item ends up, except in the case of a remove operation, where it’s the index where the item was removed from. For the move and noop operations, the originalIndex property indicates the index where the item started. Last, for the move operation, we also keep track of the from property, which is the index where the item was moved from. Note that in the case of a move operation, the from and originalIndices need not be the same. Following the example in figure 7.20, the sequence of operations that transforms the old array into the new array is: [ {op: {op: {op: {op:
  
  'remove', index: 0, item: 'A'} 'move', originalIndex: 2, from: 1, index: 0, item: 'C'} 'noop', index: 1, originalIndex: 1, item: 'B'} 'add', index: 2, item: 'D'}
  
  ] Exercise 7.5
  
  Apply the operations in the previous sequence to the old array ([A, B, C]), and check that you end up with the new array ([C, B, D]). You’ll likely be doing this by hand a couple times this chapter, to debug the code you’ll write. Let’s now talk about how the algorithm to find the sequence of operations works.
  
  7.6.2 Finding the sequence of operations—the algorithm
  
  The idea is to iterate over the indices of the new array, and for each step, find the way of transforming the old array so that at the current index, the items in both arrays are the same. You focus on one item at a time, so after each step, that item and all the previous ones are in their final position. The algorithm modifies the old array (a copy of it, to avoid mutating the original one) as it goes, and it keeps track of the operations that transform the old array into the new one. Going one item at a time and modifying a copy of the old array ensures that every operation is performed over the updated indices of the old array. When the new array is completely iterated over, any excess items in the old array are removed; the new array doesn’t have them, so they’re not needed. The algorithm is as follows: 1. Iterate over the indices of the new array Let i be the index (0 ≤ i < newArray.length) Let newItem be the item at i in the new array Let oldItem be the item at i in the old array (provided there’s one) 2. If oldItem doesn’t appear in the new array: add a remove operation to the sequence, remove the oldItem from the array, and start again from step 1 without incrementing i (stay at the same index) 3. If newItem == oldItem: add a noop operation to the sequence, using the oldItem original index (its index at the beginning of the process) start again from step 1 incrementing i 4. If newItem != oldItem and newItem can’t be found in the old array starting at i: add an add operation to the sequence
  
  add the newItem to the old array at i start again from step 1 incrementing i 5. If newItem != oldItem and newItem can be found in the old array starting at i: add a move operation to the sequence, using the oldItem current index and the original index move the oldItem to i start again from step 1 incrementing i 6. If i is greater than the length of oldArray: add a remove operation for each of the remaining items in oldArray
  
  remove all the remaining items in oldArray stop the algorithm This algorithm is simpler than it appears at first sight. Figure 7.21 shows a sequence diagram of the algorithm with the same steps as the list above. I’ll use it later when you have to implement the algorithm in code, to show you exactly where you are in the process. It’s a complex algorithm, so I want to make sure you don’t get lost. Figure 7.21. The algorithm sequence diagram.
  
  Let’s work through an example to see how the algorithm works.
  
  7.6.3 An example by hand Let’s say you have the following arrays: oldArray = [X, A, A, B, C] newArray = [C, K, A, B]
  
  Let’s apply the algorithm step by step. Step one (i=0). The X in the old array doesn’t appear in the new array, so you want to remove it (figure 7.21). Figure 7.22. At i=0 in the old array is X, which doesn’t appear in the new array: it’s a remove operation.
  
  After removing the item and adding the remove operation to the list of operations, you keep the index at i=0 because you haven’t fulfilled the condition of having the same item in both arrays at that index. Let’s move on to the next step. Step two (i=0). You find a C in the new array, but there’s an A in the old array at that same index. Let’s look for the C in the old array, starting at i=0. Oh! There’s one at i=3 (figure 7.22). Note that, if there were more than one C in the old array, you’d choose the first one you find.
  
  Figure 7.23. At i=0 there’s a C in the new array. We can move the C in the old array from i=4.
  
  You add the move operation to the sequence of operations, and move the C to i=0 in the old array. Note that in this case, the original index and the current index of C are the same. I both cases C appears at i=0. On to the next step! Step three (i=1). There’s a K in the new array, but an A in the old array. You look for a K in the old array, starting at i=1. In this case there isn’t one, so you need an add it (figure 7.23).
  
  Figure 7.24. At i=0 is a K in the new array, but there’s no K in the old array. We need an add operation.
  
  You add the K to the old array at i=1, and append the operation to the sequence of operations. Let’s move on. Step four (i=2). At i=2 both arrays have an A—hooray! (figure 7.24). You add a noop operation in these cases. For that, you need the original index of A in the old array. But that A moved naturally due to the previous operations: It moved one position to the left when the X was removed in step one.
  
  It moved one position to the right when the C was moved in step two, which cancelled the previous move. It moved one position to the right when the K was added in step three. In total, the A moved one position to the right, so you need to subtract one from the current index of the A in the old array. So, the original index of the A is i=1. Figure 7.25. At i=2 both arrays have an A. We add a noop operation, using the original index of the A in the old array.
  
  You want to keep track of the old array items original indexes, so you have them available when you add noop and move operations. As you can imagine, calculating the original index of an item based on the previous operations isn’t complicated, but it’s much better if you just save it at the beginning of the process—keep this in mind. Let’s move on to the next step. Step five (i=3). At i=3 the new array has a B, but the old array has an A. Look for a B in the old array, starting at i=3. There’s one at i=4, so you can move it (figure 7.25). Figure 7.26. At i=3 there’s a B in the new array. We can move the B in the old array from i=4.
  
  You append the move operation to the sequence of operations, and move the B to i=3 in the old array. At this point, you’re done iterating the elements in the new array, and all items from i=0 to i=3 in the old array are aligned with the new array. You’re only missing to remove what’s left in the old array: the excess items that don’t appear in the new array. Step five. At i=4 in the old array is an extra A that you want to remove (figure 7.26).
  
  Figure 7.27. At i=4 in the old array is an extra A that we need to remove.
  
  In fact, if there were more items in the old array, you’d want to remove them as well. All of those remove operations would be at index i=4, because as an item is removed, the next one occupies its place at that index. I hope the algorithm is clear now after working out an example by hand. It’s time to implement it in code.
  
  7.6.4 Implementing the algorithm
  
  Let’s start by defining a constant for the operation names. Inside the utils/arrays.js file, add the following constant: export const ARRAY_DIFF_OP = { ADD: 'add', REMOVE: 'remove', MOVE: 'move', NOOP: 'noop', }
  
  You want a way of keeping track of the old array original indices, so when you modify a copy of the old array as you apply each operation, you can still keep the original indices. A good solution is to create a class, let’s call it ArrayWithOriginalIndices, that wraps a copy of the old array and keeps track of the original indices. Whatever item is moved inside that array wrapper, the original index is also moved. This wrapper class is going to search for a given item in the wrapped array (like in step two of the previous example, where you looked if there was a C somewhere in the array) for which you want a custom comparison function. The items inside the array will be virtual nodes in the next chapter, and you want a function that tells you if two virtual nodes are equal. (You’ll implement this function that checks if two virtual nodes are equal in the next chapter.) Warning
  
  Recall that, for JavaScript, two objects are equal if they’re the same reference —that is, the same object in memory. Because our virtual nodes are objects, you need to define a custom function to compare them. You can’t rely on the default === comparison, because if a virtual node is the same as another one but it’s a different object, the comparison will return false, and that’s not what you want. You can test that yourself like so: const a = { foo: 'bar' } const b = { foo: 'bar' } console.log(a === b) // false
  
  In the utils/arrays.js file, add the class in listing 7.4. You’ll add functionality to this class in a minute. Listing 7.4. The ArrayWithOriginalIndices class wraps an array and keeps track of the original indices (utils/arrays.js)
  
  class ArrayWithOriginalIndices { #1 #array = [] #originalIndices = [] #equalsFn constructor(array, equalsFn) { this.#array = [...array] #2 this.#originalIndices = array.map((_, i) => i) #3 this.#equalsFn = equalsFn #4 } get length() { #5 return this.#array.length } }
  
  Let’s define the arraysDiffSequence() function with some TO-DO comments where each case of the algorithm will be implemented. Inside the utils/arrays.js file, add the function in listing 7.5. Listing 7.5. The arraysDiffSequence() function (utils/arrays.js)
  
  export function arraysDiffSequence( oldArray, newArray, equalsFn = (a, b) => a === b #1 ) { const sequence = [] const array = new ArrayWithOriginalIndices(oldArray, equalsFn) #2 for (let index = 0; index < newArray.length; index++) { #3 // TODO: removal case // TODO: noop case // TODO: addition case // TODO: move case }
  
  // TODO: remove extra items return sequence #4 }
  
  Giving the equalsFn parameter a default value using the default equality operator (===) will be handy, as you’ll test this function passing it arrays of strings in this chapter, mostly. Let’s start with the remove case. The remove case To find if an item was removed, you check if the item in the old array at the current index doesn’t exist in the new array. This branch in the sequence diagram is shown in figure 7.28. Figure 7.28. At i=4 in the old array is an extra A that we need to remove.
  
  Implement this logic inside a method called isRemoval() in the ArrayWithOriginalIndices class, as shown in bold font in listing 7.6. Listing 7.6. Detecting if an operation is a removal (utils/arrays.js)
  
  class ArrayWithOriginalIndices { #array = [] #originalIndices = [] #equalsFn constructor(array, equalsFn) { this.#array = [...array] this.#originalIndices = array.map((_, i) => i) this.#equalsFn = equalsFn } get length() { return this.#array.length } isRemoval(index, newArray) { if (index >= this.length) { #1 return false } const item = this.#array[index] #2 const indexInNewArray = newArray.findIndex((newItem) => #3 this.#equalsFn(item, newItem) #4 ) return indexInNewArray === -1 #5 } }
  
  And now, let’s implement a method to handle the removal of an item and return the operation. Yoy want to reflect the removal operation both in the #array and #originalIndices properties of the ArrayWithOriginalIndices instance. Add the removeItem() method to the ArrayWithOriginalIndices class, as shown in listing 7.7. Listing 7.7. Removing an item from the old array and returning the operation (utils/arrays.js)
  
  class ArrayWithOriginalIndices {
  
  // --snip-- // isRemoval(index, newArray) { // --snip-- // } removeItem(index) { const operation = { #1 op: ARRAY_DIFF_OP.REMOVE, index, item: this.#array[index], #2 } this.#array.splice(index, 1) #3 this.#originalIndices.splice(index, 1) #4 return operation #5 } }
  
  And with these two methods, you can implement the remove case in the arraysDiffSequence() function. Add the code in bold font in listing 7.8 to the arraysDiffSequence() function. Listing 7.8. Implementing the removal case (utils/arrays.js)
  
  export function arraysDiffSequence( oldArray, newArray, equalsFn = (a, b) => a === b ) { const sequence = [] const array = new ArrayWithOriginalIndices(oldArray, equalsFn) for (let index = 0; index < newArray.length; index++) { if (array.isRemoval(index, newArray)) { #1 sequence.push(array.removeItem(index)) #2 index#3 continue #4 } // TODO: noop case // TODO: addition case // TODO: move case
  
  } // TODO: remove extra items return sequence }
  
  Great! Let’s take care of the noop case next. The noop case The noop case happens when at the current index, both the old and new arrays have the same item. Thus, detecting this case is straightforward. You can see the noop case highlighted in the sequence diagram in figure 7.29. Figure 7.29. The noop case in the sequence diagram
  
  Implement a method called isNoop() in the ArrayWithOriginalIndices class, as shown in bold font in listing 7.9. Listing 7.9. Detecting if an operation is a noop (utils/arrays.js)
  
  class ArrayWithOriginalIndices { // --snip-- // isNoop(index, newArray) { if (index >= this.length) { #1 return false } const item = this.#array[index] #2 const newItem = newArray[index] #3 return this.#equalsFn(item, newItem) #4 } }
  
  Once you detect there’s a noop at the current index, you need to return the noop operation. And here’s where the original indices come in handy. Implement a method called noopItem() in the ArrayWithOriginalIndices class, as shown in bold font in listing 7.10. Note that you also implement an originalIndexAt() method to get the original index of an item in the old array. Listing 7.10. Returning a noop operation (utils/arrays.js)
  
  class ArrayWithOriginalIndices { // --snip-- // isNoop(index, newArray) { // --snip-- // } originalIndexAt(index) { return this.#originalIndices[index] #1 } noopItem(index) {
  
  return { #2 op: ARRAY_DIFF_OP.NOOP, originalIndex: this.originalIndexAt(index), #3 index, item: this.#array[index], #4 } } }
  
  As you can see, you don’t need to do anything to the old array to reflect the noop operation. Things stay the same. With these methods in place you can go ahead and implement the noop case in the arraysDiffSequence() function. Write the code in bold font in listing 7.11 inside the arraysDiffSequence() function. Listing 7.11. Implementing the noop case (utils/arrays.js)
  
  export function arraysDiffSequence( oldArray, newArray, equalsFn = (a, b) => a === b ) { const sequence = [] const array = new ArrayWithOriginalIndices(oldArray, equalsFn) for (let index = 0; index < newArray.length; index++) { if (array.isRemoval(index, newArray)) { sequence.push(array.removeItem(index)) index-continue } if (array.isNoop(index, newArray)) { #1 sequence.push(array.noopItem(index)) #2 continue #3 } // TODO: addition case // TODO: move case } // TODO: remove extra items return sequence
  
  }
  
  Time to move on to the addition case. The addition case To check if an item was added in the new array, you need to check if that item doesn’t exist in the old array, starting from the current index. Figure 7.30 shows the addition case in the sequence diagram. Figure 7.30. The addition case in the sequence diagram
  
  To find the item in the old array starting from a given index, you implement a method called findIndexFrom(). Using that method, the isAddition() method is straightforward to implement. Add the code in bold font in listing 7.12 to the ArrayWithOriginalIndices class. Listing 7.12. Detecting if an operation is an addition (utils/arrays.js)
  
  class ArrayWithOriginalIndices { // --snip-- // isAddition(item, fromIdx) { return this.findIndexFrom(item, fromIdx) === -1 #1 } findIndexFrom(item, fromIndex) { for (let i = fromIndex; i < this.length; i++) { #2 if (this.#equalsFn(item, this.#array[i])) { #3 return i } } return -1 #4 } }
  
  Dealing with an addition is as simple as adding the item to the old array and returning the add operation. You have to add an entry to the #originalIndices property, but the added item wasn’t present in the original old array, so you can use a -1 in this case. Add the addItem() method in bold font in listing 7.13 to the ArrayWithOriginalIndices class. Listing 7.13. Adding an item to the old array and returning an add operation (utils/arrays.js)
  
  class ArrayWithOriginalIndices { // --snip-- // isAddition(item, fromIdx) { return this.findIndexFrom(item, fromIdx) === -1
  
  } findIndexFrom(item, fromIndex) { for (let i = fromIndex; i < this.length; i++) { if (this.#equalsFn(item, this.#array[i])) { return i } } return -1 } addItem(item, index) { const operation = { #1 op: ARRAY_DIFF_OP.ADD, index, item, } this.#array.splice(index, 0, item) #2 this.#originalIndices.splice(index, 0, -1) #3 return operation #4 } }
  
  These two methods make it easy to implement the addition case in the arraysDiffSequence() function. Add the code in bold font in listing 7.14 to the arraysDiffSequence() function. Listing 7.14. Implementing the addition case (utils/arrays.js)
  
  export function arraysDiffSequence( oldArray, newArray, equalsFn = (a, b) => a === b ) { const sequence = [] const array = new ArrayWithOriginalIndices(oldArray, equalsFn) for (let index = 0; index < newArray.length; index++) { if (array.isRemoval(index, newArray)) { sequence.push(array.removeItem(index)) index-continue }
  
  if (array.isNoop(index, newArray)) { sequence.push(array.noopItem(index)) continue } const item = newArray[index] #1 if (array.isAddition(item, index)) { #2 sequence.push(array.addItem(item, index)) #3 continue #4 } // TODO: move case } // TODO: remove extra items return sequence }
  
  Let’s move on with the move case. This one is interesting. The move case The neat thing about the move case is that you don’t need to explicitly test for it; if the operation isn’t a removal, an addition, or a noop, it must be a move. This branch is highlighted in the sequence diagram in figure 7.31. Figure 7.31. The move case in the sequence diagram
  
  To move an item, you want to extract it from the array (you can use the splice() method for that) and insert it in the new position (you can use the splice() method again). There are two things you want to keep in mind: one is that you need to remember to also move the original index to its new position, and the other is that you have to include the original index in the move operation. The importance of this will become clear in the next chapter. Inside the ArrayWithOriginalIndices class, add the code in bold font in listing 7.15 to implement the moveItem() method. Listing 7.15. Detecting if an operation is an addition (utils/arrays.js)
  
  class ArrayWithOriginalIndices { // --snip-- // moveItem(item, toIndex) { const fromIndex = this.findIndexFrom(item, toIndex) #1 const operation = { #2 op: ARRAY_DIFF_OP.MOVE, originalIndex: this.originalIndexAt(fromIndex), #3 from: fromIndex, index: toIndex, item: this.#array[fromIndex], } const [_item] = this.#array.splice(fromIndex, 1) #4 this.#array.splice(toIndex, 0, _item) #5 const [originalIndex] = this.#originalIndices.splice(fromIndex, 1) this.#originalIndices.splice(toIndex, 0, originalIndex) #7 return operation #8 } }
  
  Adding the move case to the arraysDiffSequence() function is straightforward. Include the line in bold font in listing 7.16 in the arraysDiffSequence() function. Listing 7.16. Adding an item to the old array and returning an add operation (utils/arrays.js)
  
  export function arraysDiffSequence( oldArray, newArray, equalsFn = (a, b) => a === b ) { const sequence = [] const array = new ArrayWithOriginalIndices(oldArray, equalsFn) for (let index = 0; index < newArray.length; index++) { if (array.isRemoval(index, newArray)) { sequence.push(array.removeItem(index)) index-continue } if (array.isNoop(index, newArray)) { sequence.push(array.noopItem(index)) continue } const item = newArray[index] if (array.isAddition(item, index)) { sequence.push(array.addItem(item, index)) continue } sequence.push(array.moveItem(item, index)) } // TODO: remove extra items return sequence }
  
  You’re almost there! You’re only missing to remove the outstanding items from the old array. Removing the outstanding items What happens when you reach the end of the new array but there are still items in the old array? You remove them all, of course. Figure 7.32 shows the removal case in the sequence diagram.
  
  Figure 7.32. The removal case in the sequence diagram
  
  To remove the outstanding items, you want to remove all items past the current index (which is the length of the new array) from the old array. You can use a while loop that keeps removing items while the old array is longer than the index. Write the code for the removeItemsAfter() method in bold font in listing 7.17. Listing 7.17. Detecting if an operation is an addition (utils/arrays.js)
  
  class ArrayWithOriginalIndices { // --snip-- // removeItemsAfter(index) { const operations = [] while (this.length > index) { #1 operations.push(this.removeItem(index)) #2 } return operations #3 } }
  
  Finally, add the code in bold font in listing 7.18 to the arraysDiffSequence() function to remove the outstanding items. Note that removeItemsFrom() doesn’t return a single operation, but an array of operations. Listing 7.18. Adding an item to the old array and returning an add operation (utils/arrays.js)
  
  export function arraysDiffSequence( oldArray, newArray, equalsFn = (a, b) => a === b ) { const sequence = [] const array = new ArrayWithOriginalIndices(oldArray, equalsFn) for (let index = 0; index < newArray.length; index++) { if (array.isRemoval(index, newArray)) { sequence.push(array.removeItem(index)) index-continue
  
  } if (array.isNoop(index, newArray)) { sequence.push(array.noopItem(index)) continue } const item = newArray[index] if (array.isAddition(item, index)) { sequence.push(array.addItem(item, index)) continue } sequence.push(array.moveItem(item, index)) } sequence.push(...array.removeItemsAfter(newArray.length)) return sequence }
  
  And just like that, you have a working implementation of the arraysDiffSequence() function! Believe it or not, this was the hardest algorithm to implement in the whole book. If you’re still with me, the rest of the book will be easy to follow. Exercise 7.6
  
  Write a function called applyArraysDiffSequence() that given an array and a sequence of operations, applies the operations to the array and returns the resulting array. To test it, pass the following arrays to the arraysDiffSequence() function: old array: ['A', 'A', 'B', 'C'] new array: ['C', 'K', 'A', 'B'] Save the resulting operations in a variable called sequence. Then pass the old array and the sequence to the applyArraysDiffSequence() function and check that the resulting array is the same as the new array.
  
  7.7 Answers to the exercises 7.7.1 Exercise 7.1 The HTML for the old virtual tree is:
  
  

  Hello

  World

  
  
  And the HTML for the new virtual tree is:
  
  

  Hi

  there

  World!

  
  
  7.7.2 Exercise 7.2 To disallow the user to call the mount() method more than once, you can add a property called isMounted to the application object and set it to true when the mount() method is called. Then, you can check if the mounted property is true before calling the mount() method. If so, throw an error: export function createApp({ state, view, reducers = {} }) { let parentEl = null let vdom = null let isMounted = false // -- snip -- // return { mount(_parentEl) { if (isMounted) { throw new Error('The application is already mounted') }
  
  parentEl = _parentEl vdom = view(state, emit)
  
  mountDOM(vdom, parentEl) isMounted = true }, unmount() { destroyDOM(vdom) vdom = null subscriptions.forEach((unsubscribe) => unsubscribe()) isMounted = false }, } }
  
  7.7.3 Exercise 7.3 Here are the tests I implemented for the objectsDiff() function in the project (I’m using the vitest testing library). You can find the tests inside the __tests__/objects.test.js file. import { expect, test } from 'vitest' import { objectsDiff } from '../utils/objects' test('same object, no change', () => { const oldObj = { foo: 'bar' } const newObj = { foo: 'bar' } const { added, removed, updated } = objectsDiff(oldObj, newObj) expect(added).toEqual([]) expect(removed).toEqual([]) expect(updated).toEqual([]) }) test('add key', () => { const oldObj = {} const newObj = { foo: 'bar' } const { added, removed, updated } = objectsDiff(oldObj, newObj) expect(added).toEqual(['foo']) expect(removed).toEqual([]) expect(updated).toEqual([]) }) test('remove key', () => { const oldObj = { foo: 'bar' }
  
  const newObj = {} const { added, removed, updated } = objectsDiff(oldObj, newObj) expect(added).toEqual([]) expect(removed).toEqual(['foo']) expect(updated).toEqual([]) }) test('update value', () => { const arr = [1, 2, 3] const oldObj = { foo: 'bar', arr } const newObj = { foo: 'baz', arr } const { added, removed, updated } = objectsDiff(oldObj, newObj) expect(added).toEqual([]) expect(removed).toEqual([]) expect(updated).toEqual(['foo']) })
  
  7.7.4 Exercise 7.4 Here’s another sequence of operations that transform the [A, B, C] array into the [C, B, D] array: 1. Move C from i=2 to i=1. Result: [A, C, B] 2. Add D at i=3. Result: [A, C, B, D] 3. Remove A at i=0. Result: [C, B, D]
  
  7.7.5 Exercise 7.5 Let’s apply to the [A, B, C] array the following sequence of operations: [ {op: {op: {op: {op:
  
  'remove', index: 0, item: 'A'} 'move', originalIndex: 2, from: 1, index: 0, item: 'C'} 'noop', index: 1, originalIndex: 1, item: 'B'} 'add', index: 2, item: 'D'}
  
  ]
  
  1. Remove A at i=0. Result: [B, C] 2. Move C (originally at 2) from i=1 to i=0. Result: [C, B] 3. Noop B at i=1. Result: [C, B]
  
  4. Add D at i=2. Result: [C, B, D] As expected, the result is the [C, B, D] array.
  
  7.7.6 Exercise 7.6 Here’s the implementation of the applyArraysDiffSequence() function: function applyArraysDiffSequence(oldArray, diffSeq) { return diffSeq.reduce((array, { op, item, index, from }) => { switch (op) { case ARRAY_DIFF_OP.ADD: array.splice(index, 0, item) break case ARRAY_DIFF_OP.REMOVE: array.splice(index, 1) break case ARRAY_DIFF_OP.MOVE: array.splice(index, 0, array.splice(from, 1)[0]) break } return array }, oldArray) }
  
  Now, if you pass the two arrays described in the exercise to the arraysDiffSequence(): const oldArray = ['A', 'A', 'B', 'C'] const newArray = ['C', 'K', 'A', 'B'] const sequence = arraysDiffSequence(oldArray, newArray)
  
  You get the following sequence of operations: [ {op: {op: {op: {op: {op:
  
  'move', originalIndex: 3, from: 3, index: 0, item: 'C'} 'add', index: 1, item: 'K'} 'noop', index: 2, originalIndex: 0, item: 'A'} 'move', originalIndex: 2, from: 4, index: 3, item: 'B'} 'remove', index: 4, item: 'A'}
  
  ]
  
  Let’s pass this sequence to the applyArraysDiffSequence() function, together with the old array: const result = applyArraysDiffSequence(oldArray, sequence)
  
  The result is the new array: ['C', 'K', 'A', 'B']
  
  7.8 Summary The reconciliation algorithm has two main steps: diffing and patching. Diffing is the process of finding the differences between two virtual trees. Patching is the process of applying the differences to the real DOM. Diffing two virtual trees to find their differences boils down to solving three problems: finding the differences between to objects, finding the differences between two arrays, and finding a sequence of operations that applied to an array will transform it into another array.
  
  Appendix. Setting up the project Before you write any code, you need to have an NPM project set up. In this appendix, I’ll help you create and configure a project to write the code for your framework. I understand you might not typically configure an NPM project from scratch with a bundler, a linter, and a test library yourself, as most frameworks come with a CLI tool (like, for example create-react-app or angular-cli) which does the scaffolding and generating the boilerplate code structure for you. So I’ll give you two options to create your project: 1. Use the CLI tool I created for this book. With a single command, you can create a project where you can start writing your code right away. 2. Configure the project yourself, from scratch. It’s more laborious, but you get to learn how to configure the project. If you want to get started quickly with the book and can’t wait to write your awesome frontend framework, I recommend you use the CLI tool. In this case, you need to read section A.6. But if you are the kind of developer who enjoys configuring everything from scratch, you can follow the steps to configure the project yourself in section A.7. Before you start configuring your project, let’s first cover some basics about where you can find the code for the book and the technologies you’ll use. These sections are optional, but I recommend you to read them before you start configuring your project. If you can’t wait to start writing code, you can skip them and move on to sections A.6 and A.7. You can always come back and read the rest of the appendix later.
  
  A.1 Where to find the source code The source code for the book is publicly available at: https://github.com/angelsolaorbaiceta/fe-fwk-book
  
  I recommend you to clone the repository or download the ZIP archive of the repository, to follow along with the book. It contains all the listings that appear the book (in the listings folder), sorted by chapter. I’m assuming you’re familiar with git and know how to clone a repository and checkout tags or branches. If previous sentence sounded like nonsense to you, don’t worry, you can still follow along with the book. Download the project as a ZIP archive by clicking the Code button in the repository and then clicking on the Download ZIP button. Warning
  
  The code you’ll find in the repository is the final version of the framework, the one you’ll have written by the end of the book. If you want to check the code for each chapter, you need to checkout the corresponding Git tag as explained below. You can also refer to the listings/ directory in the repository, which contains all the listings from the book, sorted by chapter. Let’s take a look at how you can find the code for each chapter.
  
  A.1.1 Checking out the code for each chapter I tagged the source code with the number of each chapter where a new version of the framework is available. The tag name follows the pattern chX, where X is the number of the chapter. For example, the first working version of the framework appears in chapter 6, so the corresponding code can be checked out with the following git command: $ git checkout ch6
  
  Then, in chapters 7 and 8, you implement the reconciliation algorithm, resulting in a new, more performant version of the framework. The corresponding code can be checked out as follows: $ git checkout ch8
  
  By checking out the code for each chapter, you can see how the framework evolves as we add new features. You can also compare your code by the end
  
  of each chapter with the code in the repository. Note that not all chapters have a tag in the repository, only those that have a working version of the framework. I also wrote unit tests for the framework that I won’t cover in the book, but you can look at them to find ideas on how to test your code. Note
  
  If you’re not familiar with the concept of git tags, you can learn about them in https://git-scm.com/book/en/v2/Git-Basics-Tagging. Basic git knowledge is assumed for this book. I recommend you to avoid copy/pasting the code from the book and instead type it yourself. If you get stuck because your code doesn’t seem to work, look at the code in the repository, try to figure out the differences, and then fix it yourself. If you write a unit test to reproduce the problem, much better. I know this is more cumbersome, but it’s the best way to learn, and it’s actually how you’d probably want to tackle a real-world bug in your code. You can also refer to the listings/ directory in the repository, which contains all the listings from the book, sorted by chapter. You can find instructions on how to run and work with the code in the README file of the repository. This file contains up-to-date documentation on everything you need to know about the code. Make sure to quickly read it before you start working with the code. (When you get started with the code of an open-source repository, reading the README file is the first thing you should do.)
  
  A.1.2 A note on the code The emphasis of the code I wrote wasn’t to be the most performant and safest code possible. There are a lot of places in the code that could use better error handling, or where I could have done things in a more performant way by applying some optimizations. But I didn’t, because I put the emphasis on writing code that’s easy to understand, that’s clean and concise. Code that you read and immediately understand what it does.
  
  I pruned the code of all the unnecessary details that would’ve made it harder to understand, and left just the essence of the concept which I want to teach. I’ve gone to great lengths to simplify the code as much as I could, and I hope you’ll find it easy to follow and make sense of. So, just bear in mind that the code you’ll find in the repository and the book has the purpose of teaching efficiently, not being production-ready.
  
  A.1.3 Reporting issues in the code As many tests as I wrote and as many times as I reviewed the code, I’m sure there are still bugs in it. Frontend frameworks are complex beasts, and it’s hard to get everything right. If you find a bug in the code, please report it in the repository by opening a new issue. To open a new issue, go to the issues tab of the repository: https://github.com/angelsolaorbaiceta/fe-fwk-book/issues Then, click on the New issue button. In the row that reads Bug report, click on the Get started button. Fill in the form with the details of the bug you found, and click on the Submit new issue button. You’ll need to give enough information for me to easily reproduce and fix the bug. I know it takes time to file a bug report with these many details, but it’s considered good etiquette in the open source community. It shows respect from your side towards the maintainers of a project, who use their free time to create and maintain it for everyone to use free of charge. It’s good that we get used to being respectful citizens of the open source community.
  
  A.1.4 Fixing a bug yourself If you find a bug in the code, and you know how to fix it, you can open a pull request with the fix. Even better than opening an issue is to offer a solution to it yourself—that’s how open source projects work. You might also want to take a look at bugs that other people reported and try to fix them yourself. This is a great exercise to learn how to contribute to open source projects, and
  
  I’ll be forever grateful if you do so. If you don’t know what GitHub pull requests are, I recommend you to read about them at https://docs.github.com/en/pull-requests. Pull requests are the way to contribute to open source projects on GitHub (and also how many software companies add changes to their codebase), so it’s good to know how they work. Moving on. Before you create your project, let’s take a look at the technologies you’ll use and how the project will be structured.
  
  A.2 Note on the technologies used There are heated discussions in the frontend ecosystem about what are the best tools. You’ll hear things like "you should use Bun, because it’s much faster than Node JS," or "Webpack is old now, you should start using Vite for all your projects." Some people argue over which bundler is the best, or which linter and transpiler you should be using. Something that I find especially harmful are the "top 10 reasons why you should stop using X"kind of blog posts. Apart from being obvious clickbait, they don’t usually help the frontend community, let alone junior developers that have a hard time understanding what set of tools they "should be using." A cautionary tale on getting overly attached to tools
  
  I once worked for a start-up that grew quickly but wasn’t doing great. We had very few customers using our app—if any at all—and every time we added something in the code, we’d introduce new bugs. (Code quality wasn’t a priority; speed was, and automated testing was nowhere to be found.) Surprisingly, we blamed it on the tools we were using. We were convinced that, when we migrated the code to the newest version of the framework we were using, we would get more customers and things would work great from then onwards. Yes, I know how ridiculous this sounds now. But we made it to "modernize" the tooling, and guess what? the code was still the same: a hard-to-maintain mess that would break if you stared at it for too long. Turns out that using more modern tools doesn’t make your code better if the code is poorly written in the first place.
  
  What do I want to say with this? That I believe your time is better used writing quality code than arguing about what tools will make your application successful. Well architected and modularized code with a great suite of automated tests that, apart from making sure the code works and can be refactored safely, also serves as documentation, beats any tooling. That is not to say the tools don’t matter, because they obviously do. Ask a carpenter if they can be productive using a rusty hammer or a blunt saw. For this book, I’ve tried to choose tools that are mature and that most frontend developers might be familiar with. Choosing the newest, shiniest or trendiest tool wasn’t my goal. I want to teach you how frontend frameworks work, and the truth is, that most tools work perfectly fine for this purpose. The knowledge that I’ll teach you in this book transcends the tools we choose to use. So, having said this, if you have a preference for a tool and some experience with it, feel free to use it instead of the ones I’ll recommend here.
  
  A.2.1 Package manager—NPM We’ll use the NPM package manager to create the project and run the scripts. If you’re more comfortable with yarn or pnpm, you can use them instead. They work very similarly, so you shouldn’t have any problems using your preferred one. We’ll use NPM workspaces, which were introduced in version 7, so you want to make sure you have at least version 7 installed: $ npm --version 8.19.2
  
  Both yarn and pnpm also support workspaces, so you can use them as well. (In fact, they introduced workspaces before NPM did.)
  
  A.2.2 Bundler—Rollup and Webpack To bundle the JavaScript code together into a single file, we’ll use Rollup.
  
  Rollup is very popular among JavaScript libraries, and it’s very simple to use. If you prefer Webpack, Parcel or Vite, you can use them instead. You’ll have to make sure you configure them to output a single ESM file (as we’ll see later). Towards the end of the book, when you use your framework to build applications, you’ll also use Webpack. In fact, you’ll write a Webpack loader that’ll transform the templates for your components into render functions. In summary: you’ll use Rollup to bundle your framework, and Webpack to bundle the applications you’ll build with your framework.
  
  A.2.3 Linter—ESLint To lint the code, we’ll use ESLint. It’s a very popular linter, and it’s very easy to configure. I’m a firm believer that static analysis tools are a must for any serious project where the quality of the code is important (as it always is the case). ESLint will prevent us from having unused variables declared, imports that are not used, and many other things that can go wrong in our code. ESLint is super configurable, but most developers are happy with the default configuration: it’s a good starting point. We’ll use the default configuration for this book as well, but you can always change it to your liking. If there’s a linting rule you deem important, you can add it to your configuration.
  
  A.2.4 (Optional) Testing—Vitest I won’t be showing unit tests for the code which you’ll write in this book to keep its size reasonable, but if you check the source code of the framework I wrote for the book, you’ll see lots of them. (In fact, you can use them to better understand how the framework works. Tests are—when well written— a great source of documentation.) You might want to write tests yourself as well, to make sure the framework works as expected and you don’t break it when you make new changes. Every serious project should have tests accompanying it and serving as a safety net as well as documentation.
  
  I’ve worked a lot with Jest; it’s been my go-to testing framework for a long time, but I recently started using Vitest and decided to stick with it as it’s orders of magnitude faster. The API is very similar to Jest, so you won’t have any problems if you do decide to use it as well. If you want to use Jest, that’ll do just fine.
  
  A.2.5 The language—JavaScript Saying we’ll use JavaScript might seem obvious, but if I was writing the framework for myself, I’d use TypeScript without any hesitation. TypeScript is fantastic for large projects: types tell you a lot about the code, and the compiler will help you catch bugs before you even run the code (how many times have you accessed a property that didn’t exist in an object using JavaScript? Does TypeError sends shivers down your spine?). Non-typed languages are great for scripting, but for large projects, I’d recommend having a compiler as your companion. So why am I using JavaScript for this book? Because the code tends to be shorter without types, and what I want to do here is teach you the principles of how frontend frameworks work, principles that apply equally well to both JavaScript and TypeScript. I prefer to use JavaScript because the code listings will be shorter and I can get to the point faster, and thus teach you more efficiently. As with the previous tools, if you feel strongly about using TypeScript, you can use it instead of JavaScript. You’ll need to figure out the types yourself, but that’s part of the fun, right? Also, don’t forget to setup the compilation step in your build process.
  
  A.3 Read the docs Explaining how to configure the tools you’ll use in detail, and how they work, is out of the scope of this book. I want to encourage you to go to their websites or repository pages and read the documentation. One great thing about frontend tools is that they tend to be extremely well documented. In fact, I’m convinced that they compete against each other to see which one has the best documentation.
  
  If you’re not familiar with any of the tools you’ll be using, take some time to read the documentation. That’ll save you a lot of time in the long run. I’m a firm believer that developers should strive to understand the tools they use, and not just use them blindly (that’s what got me into understanding how frontend frameworks work in the first place—which explains why I’m writing this book). One of the most important lessons I’ve learned over the years is that taking the time to read the documentation is a great investment of your time. Reading the docs before you start using a new tool or library saves you the time you’d spend trying to figure out how to do something that, somewhere in the documentation, someone has taken the time and care to explain in detail. The time that you end up spending trying to figure things out on your own, and searching StackOverflow for answers, is—in my personal experience—usually greater than the time you’d have spent should you read the documentation upfront. 6 hours of debugging can save you 5 minutes of reading documentation -- Jakob (@jcsrb) Twitter Be a good developer—read the docs.
  
  A.4 Structure of the project Let’s briefly go over the structure of the project where you’ll write the code for your framework. Your framework will consist of three packages (NPM workspaces): runtime—the framework’s runtime, the code that’s executed in the browser and is in charge of rendering the views and handling the events. Basically, the framework itself. compiler—the compiler that transforms HTML templates into render functions. loader—the Webpack loader that uses the compiler to transform templates at build time.
  
  The main package, and where you’ll spend most of the time, is the runtime package. This package is the framework itself. The other two, compiler and loader, are tooling—dev dependencies in NPM parlance—that developers need at build time if they want to write templates instead of render functions. (This might sound confusing at the moment, but it’ll eventually make sense.) Note
  
  If you’re not familiar with the concept of NPM workspaces, you can read more about at https://docs.npmjs.com/cli/v9/using-npm/workspaces. It’s important that you understand how they work, so the structure of the project makes sense to you and you can follow along the instructions that follow. The folder structure of the project will be as follows: examples/ packages/ ├── compiler/ ├── loader/ └── runtime/
  
  Each package has its own package.json file, with its dependencies, and it’s bundled separately. It’s effectively three separate projects, but they are all part of the same repository. This project structure is very common these days, and it’s called a monorepo. The three packages will define the same scripts: build—builds the package, bundling all the JavaScript files into a single file, which is published to NPM. test—runs the automated tests in watch mode. test:run—runs the automated tests once. lint—runs the linter to detect issues in your code. lint:fix—runs the linter and automatically fixes the issues it can. prepack—a special life cycle script that runs before the package is published to NPM. It’s used to make sure the package is built before being published.
  
  Caution
  
  The aforementioned scripts are defined in each of the three packages' package.json files (those inside packages/runtime, packages/compiler, and packages/loader), not in the root package.json file. Bear this in mind in case you decide to configure the project yourself, because there will be four package.json files in total.
  
  A.5 Finding a name for your framework Before you create the project or write any code, you need a name for your framework. Be creative! It needs to be a name that no one else is using in NPM (you will be publishing your framework to NPM), so you need to be original. If you’re not sure what to call it, you can simply call it -fe-fwk (your name followed by -fe-fwk). You want to make sure the name is unique, so check if it’s available on npmjs.com, by adding it to the URL: www.npmjs.com/package/ If the URL displays the 404—not found page, that means nobody is using that name for a Node JS package yet, so you’re good to go; you can use that name. Important
  
  I will use the placeholder to refer to the name of your framework in the sections that follow. Whenever you see in a command, you should replace it with the name you chose for your framework. Let’s now create the project. Remember that you have two options. If you want to configure things yourself, you want to skip the next section and jump to section A.7. If you want to use the CLI tool to get started quickly, read the next section.
  
  A.6 Option A—Using the CLI tool Using the CLI tool I created for the book is the fastest way to get started. It’ll save you the time it takes to create and configure the project from scratch, so you can start writing code right away. You just need to open your terminal, move to the directory where you want the project to be created, and run the following command: $ npx fe-fwk-cli init
  
  With npx you don’t even need to install the CLI tool locally, it will be downloaded and executed automatically. When the command finishes executing, it’ll instruct you to cd in to the project directory and run npm install to install the dependencies: $ cd $ npm install
  
  That’s it! You can now jump to the A.8 section to learn how to publish your framework to NPM.
  
  A.7 Option B—Configuring the project from scratch Note
  
  If you created your project using the CLI tool, you can skip this section. To create the project yourself, you first want to create a directory for it. Using the command line, you can do that by running the following command: $ mkdir
  
  Then, you want to initialize an NPM project in that directory: $ cd
  
  $ npm init -y
  
  This command creates a package.json file in the directory. There are a few edits you need to make to the file. You want to edit the description field to something like: "description": "A project to learn how to write a frontend framework"
  
  Then, you want to make this package private, so you don’t accidentally publish it to NPM. It’s the workspace packages you’ll create in a minute that you’ll publish to NPM, not the parent project itself: "private": true
  
  You also want to change the name of this package to -project to avoid conflicts with the name of your framework (which you’ll use to name the runtime package you create in the next section). Every NPM package in the repository requires a unique name, and you want to reserve the name you chose for your framework for the runtime package. Append -project to the name field: "name": "-project"
  
  Finally, you want to add a workspaces field to the file, with an array of the directories where you’ll be creating the three packages your project will consist of: "workspaces": [ "packages/runtime", "packages/compiler", "packages/loader" ]
  
  Your package.json file should look similar to this: { "name": "-project", "version": "1.0.0", "description": "A project to learn how to write a frontend framework", "private": true, "workspaces": [
  
  "packages/runtime", "packages/compiler", "packages/loader" ] }
  
  You might have other fields, such as author, license, etc., but the ones in the previous snippet are the ones you need to make sure are there. Let’s now create a directory in your project where you can add example applications to test your framework.
  
  A.7.1 The examples folder Throughout the book, you’ll be improving your framework and adding new features to it. Each time you add a new feature, you’ll want to test it by using it in example applications. Here, you’ll configure a directory where you can add these applications, and a script to serve them locally. Create an examples directory at the root of your project: $ mkdir examples
  
  Tip
  
  While the examples folder remains empty, that is, before you write any example application, you might want to add a .gitkeep file to it, so that git picks up the directory and includes it in the repository. (Git doesn’t track empty directories.) As soon as you put a file in the directory, you can remove the .gitkeep file, but keeping it doesn’t hurt anyway. To keep the examples directory tidy, you want to create a subdirectory for each chapter: examples/ch02, examples/ch03, etc. Each subdirectory will contain the example applications using the framework resulting from the chapter, which allows you to see the progress in how the framework becomes more and more powerful, and easier to use. You don’t need to create the subdirectories now, you’ll create them as you need them in the book. Now you need a script to serve the example applications. Your applications
  
  will consist of an entry HTML file, which loads other files, such as JavaScript files, CSS files, and images. For the browser to be able to load these files, you need to serve them from a web server. The http-server package is a very simple web server that you can use to serve the example applications. In the package.json file, add the following script: "scripts": { "serve:examples": "npx http-server . -o ./examples/" }
  
  Important
  
  This is the only script that you need to add to the project root package.json file. All the other scripts you’ll add to the project will be added to the package.json files of the packages you’ll create in the next sections. Bear this in mind. You won’t add any other script to the root package.json file. The project doesn’t require the http-server package installed, as you’re using npx to run it. The -o flag tells the server to open the browser and navigate to the specified directory, in the case of the previous command, the examples directory. Your project should have the following structure so far: / ├── package.json └── examples/ └── .gitkeep
  
  Great—Let’s now create the three packages that will make up your framework code.
  
  A.7.2 Creating the packages As we’ve already discussed, your framework will consist of three packages: runtime, compiler, and loader. They all have the same dependencies and
  
  scripts, so, once you’ve created the first of them, you can copy and paste it, making sure to change the name of the folder and the name of the package in the package.json file. Before you create the packages, you need to create a directory where you’ll put them, the packages directory you specified in the workspaces field of the package.json file. Make sure your terminal is inside the project’s root directory by running the pwd command: $ pwd
  
  The output should be similar to this (where path/to/your/framework is the path to the directory where you created the project): path/to/your/framework/
  
  If your terminal is not in the project’s root directory, use the cd command to navigate to it. Then, create a packages directory: $ mkdir packages
  
  Let’s start with the runtime package. The runtime package First, make sure you cd into the packages folder: $ cd packages
  
  Then create the folder for the runtime package and cd into it: $ mkdir runtime $ cd runtime
  
  Next, initialize an NPM project in the runtime folder: $ npm init -y
  
  Open the package.json file that was created for you and make sure the following fields have the right values (you can leave the other fields as they are): { "name": "", "version": "1.0.0", "main": "dist/.js", "files": [ "dist/.js" ] }
  
  Remember to replace with the name of your framework. The main field specifies the entry point of the package, which is the file that will be loaded when you import the package. This means that, when you import code from this package like so: import { something } from ''
  
  JavaScript resolves the path to the file specified in the main field. You’ve told NPM that the file is the dist/.js file, which is the bundled file containing all the code for the runtime package. This file will be generated by Rollup, by running the build script you’ll add to the package.json file in the next section. The files field specifies the files that will be included in the package when you publish it to the NPM repository. The only file that you want to include is the bundled file, so you’ve specified that in the files field. Files like the README, the LICENSE, and the package.json file are automatically included in the package, so you don’t need to include them here. Your project should have the following structure (in bold font is what you’ve just created): / ├── package.json ├── examples/ │ └── .gitkeep └── packages/ └── runtime/
  
  └── package.json
  
  Let’s now add Rollup to bundle the framework code. Installing and configuring Rollup Rollup is the bundler that you’ll use to bundle your framework code. It’s very simple to configure and use. Let’s install Rollup. Make sure your terminal is inside the runtime package directory by running the pwd command: $ pwd
  
  The output should be similar to this: path/to/your/framework//packages/runtime
  
  If your terminal is not inside the packages/runtime directory, use the cd command to navigate to it. Install the rollup package by running the following command: $ npm install --save-dev rollup
  
  You also want to install two plugins for Rollup: rollup-plugin-cleanup:
  
  to remove comments from the generated
  
  bundle. rollup-plugin-filesize:
  
  to display the size of the generated bundle.
  
  Install them with the following command: $ npm install --save-dev rollup-plugin-cleanup rollup-plugin-filesize
  
  Now, you need to configure Rollup. Create a rollup.config.mjs file (note the .mjs extension, to tell Node JS this file should be treated as an ES module and thus can use the import syntax) in the runtime folder and add the following code: import cleanup from 'rollup-plugin-cleanup'
  
  import filesize from 'rollup-plugin-filesize' export default { input: 'src/index.js', #1 plugins: [cleanup()], #2 output: [ { file: 'dist/.js', #3 format: 'esm', #4 plugins: [filesize()], #5 }, ], }
  
  The configuration, explained in plain english, means the following: The entry point of the framework code is the src/index.js file: starting from this file, Rollup will bundle all the code that is imported from it. The comments in the source code should be removed from the generated bundle (they occupy space and are not needed for the code to execute). This is what the plugin-rollup-cleanup plugin does. The generated bundle should be an ES module (using import/export syntax, supported by all major browsers) that is saved in the dist folder, as .js. We want the size of the generated bundle to be displayed in the terminal to keep an eye on it and make sure it doesn’t grow too much. This is what the plugin-rollup-filesize plugin does. Now add a script to the package.json file (the one inside the runtime package) to run Rollup and bundle all the code, and another one to run it automatically before publishing the package: "scripts": { "prepack": "npm run build", "build": "rollup -c" }
  
  The prepack script is a special script that is run automatically by NPM before publishing the package, which you do by running the npm publish command (more on this later). This makes sure that, whenever you publish a new version of the package, the bundle is generated. The prepack script simply
  
  runs the build script, which in turn runs Rollup. To run Rollup, you simply call the rollup command and pass the -c flag to tell it to use the rollup.config.mjs file as configuration. (If you don’t pass a specific file to the -c flag, Rollup will look for a rollup.config.js or rollup.config.mjs file.) Before you test the build command, you need to create the src folder and the src/index.js file. You can do that with the following commands: $ mkdir src $ touch src/index.js
  
  (In windows shell touch will not work use call > filename instead.) Inside the src/index.js file, add the following code: console.log('This will soon be a frontend framework!')
  
  You can now run the build command to bundle the code: $ npm run build
  
  This command processes all the files imported from the src/index.js file (none at the moment) and bundles them into the dist folder. The output in your terminal should look similar to the following: src/index.js → dist/.js... ┌─────────────────────────────────────┐ │ │ │ Destination: dist/.js │ │ Bundle Size: 56 B │ │ Minified Size: 55 B │ │ Gzipped Size: 73 B │ │ │ └─────────────────────────────────────┘ created dist/.js in 62ms
  
  Recall that, instead of , you should use the name of your framework. That rectangle in the middle of the output is the rollup-pluginfilesize plugin in action. It’s reporting the size of the generated bundle (56 bytes in this case), and also the size it’d have if the file was minified and
  
  gzipped. We won’t be minifying the code for this book, as the framework is going to be small anyway, but for a production-ready framework, you should definitely do it. A minified JavaScript can be loaded faster by the browser, and thus improve the TTI (Time to Interactive) of the web application using it. A new file, dist/.js, has been created in the dist folder. If you open it, you’ll see it just contains the console.log() statement you added to the src/index.js file. Great!—Let’s now install and configure ESLint. Installing and configuring ESLint ESLint is a linter that will help you write better code. It analyzes the code you write and reports any errors or potential problems. To install it, run the following command: $ npm install --save-dev eslint
  
  You’ll use the ESLint recommended configuration, which is a set of rules that ESLint will enforce in your code. Create a .eslintrc.js file inside the packages/runtime directory with the following content: module.exports = { env: { browser: true, es2021: true, }, extends: 'eslint:recommended', overrides: [], parserOptions: { ecmaVersion: 'latest', sourceType: 'module', }, rules: {}, }
  
  And lastly, add the following two scripts to the package.json file:
  
  "scripts": { "prepack": "npm run build", "build": "rollup -c", "lint": "eslint src", "lint:fix": "eslint src --fix" }
  
  You can run the lint script to check the code for errors, and the lint:fix script to automatically fix some of them, those that ESLint knows the fix for. I won’t be showing the output of the lint script in the book, but you can run it yourself to see what it reports as you write your code. Let’s now install Vitest to run the automated tests. Installing Vitest (optional) As I’ve mentioned, I used a lot of tests while developing the code for this book, but I won’t be showing them in the book. You can take a look at them in the source code of the framework and try to write your own as you follow along. Having tests in your code will help you make sure things work as expected as you move forward with the development of your framework. We’ll use Vitest to run the tests. To install Vitest, run the following command: $ npm install --save-dev vitest
  
  Tests can run in different environments, such as Node JS, JSDOM, or a real browser. Because we will use the Document API to create DOM elements, we’ll use JSDOM as the environment. (If you want to know more about JSDOM, please refer to their repository: https://github.com/jsdom/jsdom.) To install JSDOM, run the following command: $ npm install --save-dev jsdom
  
  With Vitest and JSDOM installed, you can now create the vitest.config.js file with the following content:
  
  import { defineConfig } from 'vitest/config' export default defineConfig({ test: { reporters: 'verbose', environment: 'jsdom', }, })
  
  This configuration tells Vitest to use the JSDOM environment and to use the verbose reporter, which outputs a very descriptive report of the tests. You should place your test files inside the src/__tests__ folder, and name them *.test.js for Vitest to find them. Go ahead and create the src/__tests__ folder: $ mkdir src/__tests__
  
  Inside, you can create a sample.test.js file with the following content: import { expect, test } from 'vitest' test('sample test', () => { expect(1).toBe(1) })
  
  Now, add the following two scripts to the package.json file: "scripts": { "prepack": "npm run build", "build": "rollup -c", "lint": "eslint src", "lint:fix": "eslint src --fix", "test": "vitest", "test:run": "vitest run" }
  
  The test script runs the tests in watch mode, and the test:run script runs the tests once and exits. Tests in watch mode are handy when you’re working with TDD (Test Driven Development), as they run again every time you make changes in the test file or the code being tested.
  
  Give a try to the tests by running the following command: $ npm run test:run
  
  You should see the following output: ✓ src/__tests__/sample.test.js (1) ✓ sample test Test Files Tests Start at Duration
  
  1 passed (1) 1 passed (1) 15:50:11 1.47s (transform 436ms, setup 1ms, collect 20ms, tests 3ms)
  
  You can run individual tests passing the name or path of the test file as an argument to the test:run and test scripts. All the tests matching the name or path will be run. For example, to run the sample.test.js test, you can run the following command: $ npm run test:run sample
  
  This will run only the sample.test.js test and produce the following output: ✓ src/__tests__/sample.test.js (1) ✓ sample test Test Files Tests Start at Duration
  
  1 passed (1) 1 passed (1) 15:55:42 1.28s (transform 429ms, setup 0ms, collect 32ms, tests 3ms)
  
  Your project structure should look like the following at this point (in bold font are the files and folders that you’ve created): / ├── package.json ├── examples/ │ └── .gitkeep └── packages/ └── runtime/ ├── package.json ├── rollup.config.mjs ├── .eslintrc.js ├── vitest.config.js
  
  └── src/ ├── index.js └── __tests__/ └── sample.test.js
  
  Let’s now create the compiler and loader packages. The compiler package Before creating the compiler package, you want to cd back to the packages folder: $ cd .. $ cd .. $ cp -r runtime compiler $ pwd
  
  You should see the following output: path/to/your/framework//packages
  
  The compiler package will use the exact same structure and configuration as the runtime package. So, you can copy the runtime folder and rename it to compiler using the following command: $ cp -r runtime compiler
  
  This copies everything, including the node_modules folder. The only thing that you need to change is the package.json's name field, like so: "name": "-compiler",
  
  That is, the name of your framework followed by the -compiler suffix. That’s it. Your project’s structure should look like the following (the compiler package is in bold font, and the contents of the packages are elided for brevity): / ├── package.json ├── examples/
  
  │ └── .gitkeep └── packages/ ├── runtime/ └── compiler/
  
  Let’s now create the loader package. The loader package You can also copy the runtime folder and rename it to loader using the following command (recall that your current working directory should be the packages folder): $ cp -r runtime loader
  
  And make sure that you change the package.json's name field to: "name": "-loader",
  
  For reference, your project’s structure should look like the following (once again, the contents of the packages are elided for brevity): / ├── package.json ├── examples/ │ └── .gitkeep └── packages/ ├── runtime/ ├── compiler/ └── loader/
  
  One last thing you want to do for the package.lock file to be correctly generated, including the dependencies of the compiler and loader packages, is to cd into the root folder of the project (where the root package.json file is): $ cd ..
  
  And run the following command: $ npm install
  
  Done! You’re all set to start developing your framework.
  
  A.8 Publishing your framework to NPM As exciting as it is to develop your own framework, it’s even more exciting to share it with the world. NPM allows us to ship our package with just one simple command: $ npm publish
  
  But before you can do that, you need to create an account on NPM and log in to it from the command line. Let’s do that now. If you don’t plan to publish your framework, you can skip this section.
  
  A.8.1 Creating an NPM account To create an NPM account, go to https://www.npmjs.com/signup and fill out the form. It’s that simple, and it’s free.
  
  A.8.2 Logging in to NPM To log in to NPM in your terminal, run the following command: $ npm login
  
  and follow the prompts. To make sure you’re logged in, run the following command: $ npm whoami
  
  You should see your username printed in the terminal.
  
  A.8.3 Publishing your framework To publish your framework, you need to make sure your terminal is in the right directory: inside packages/runtime: $ cd runtime
  
  Your terminal’s working directory should now be packages/runtime, highlighted in bold font in this listing: / ├── package.json ├── examples/ │ └── .gitkeep └── packages/ ├── runtime/ #1 ├── compiler/ └── loader/
  
  Warning
  
  Make sure you’re not in the root folder of the project. The root folder’s package.json file has the private field set to true, which means that it’s not meant to be published to NPM. It’s the runtime package that you want to publish to NPM. Remember that the runtime package is the code for the framework (what you want to publish), and the root of the project is just the monorepo containing the runtime, compiler, and loader packages (not to be published to NPM). With your terminal in the runtime directory, run the following command: $ npm publish
  
  You might be wondering what gets published to NPM. There are some files in your project that always get published, and these are the package.json file, the README.md file, and the LICENSE file. Apart from these, you can specify which files to publish in the files field of the package.json file. If you recall from a previous section, the files field in the package.json file of the runtime package looks like this: "files": [ "dist/.js" ],
  
  So, you’re only publishing the dist/.js file, the bundled version of your framework. The source files inside the src/ folder are not published.
  
  The package is published with the version specified in the package.json file’s version field. Bear in mind that you can’t publish a package with the same version twice. Throughout the book, we’ll increment the version number every time we publish a new version of the framework.
  
  A.9 Using a CDN to import the framework Once you’ve published your framework to NPM, you can create a Node JS project and install it as a dependency: $ npm install
  
  This is great if you plan to set up an NPM project with a bundler (such as Rollup or Webpack) configured to bundle your application and the framework together. This is what you typically do when you’re building a production application with a frontend framework. But for small projects or quick experiments that use only a handful of files—as those you’ll work on in this book—it’s simpler to import the framework directly from the dist/ directory in your project, or from a Content Delivery Network (CDN). One free CDN that you can use is unpkg.com. Everything that’s published to NPM is also available on unpkg.com, so once you’ve published your framework to NPM, you can import it from there, like so: import { createApp, h } from 'https://unpkg.com/'
  
  In fact, if you browse to https://unpkg.com/fwk-name, you’ll see the dist/.js file you published in NPM. This is what the CDN serves to your browser when you import the framework from there. If you don’t specify a version, it’ll serve the latest version of the package. If you want to use a specific version of your framework, you can specify it in the URL, like so: import { createApp, h } from 'https://unpkg.com/@1.0.0'
  
  Or, if you want to use the last minor version of the framework, you can just request a major version, like so:
  
  import { createApp, h } from 'https://unpkg.com/@1'
  
  I recommend you to use unpkg using the versioned URL, so that you don’t have to worry about breaking changes in the framework that might break your examples as you publish new versions of it. If you import the framework directly from the dist/ folder in your project, every time you bundle a new version that’s not backwards compatible, your example applications will break. You could overcome this by instructing Rollup to include the framework version in the bundled file name, but I’ll be using unpkg in this book. You’re all set! Time to start developing your framework.