You don’t actually need a framework. You can create complex user experiences in plain JavaScript (also referred to as vanilla JavaScript). Nonetheless, frameworks provide some additional benefits over the ones mentioned at the start of the chapter. First, creating rich user experiences in JavaScript can be difficult. This means slower development times and more bugs. Ideally a framework, after its initial learning curve, simplifies the process of creating these user interfaces.

A second potential advantage of frameworks is that they can improve the execution speed of DOM manipulation and traversal. For instance, every time you modify the DOM in some way, for instance, changing innerHtml or calling ­appendChild(), the browser has to re-construct the render tree used for layout and then repaint all the render nodes on the entire page (this is the reflow and repaint described back in Chapter 1). Have you ever noticed a bit of browser flickering at times when running JavaScript that is doing DOM manipulations within a loop? If so, you have experienced a performance limitation of JavaScript that a front-end framework can address. For instance, React has a virtual DOM that your code manipulates. Behind the scenes, React will wait for an appropriate moment and then make multiple changes to the real DOM in a single efficient batch, thereby eliminating the threat of flickering (see Figure 11.1).

Figure 11.1 Virtual versus real DOM manipulations

A third advantage of contemporary JavaScript frameworks is that they allow the developer to construct the user interface as a series of composable (i.e., nested) components. A component thus is a self-contained (encapsulated) block of presentation, data, and behavior. These components can then be mixed with HTML in some manner, as shown below.

<div>
  <h1>Example of Components</h1>
  <Calendar />
  <DatePicker label="Choose a date" />
</div>

Back in 2016, when writing the second edition of this book, we wrote that there was often a sense of bewilderment and uncertainty around the pace of change in the broader JavaScript development ecosystem. While the rate of change is still quite high in the JavaScript world (certainly compared to that in Java or PHP), there has been some coalescence around three large front-end frameworks, namely Angular, React, and Vue.

Angular is an “opinionated” framework in that it forces developers to adopt a known and well-regarded approach to structuring and implementing a web application. It uses a variant of the MVC pattern, so developing with Angular involves writing models to represent your data, templates to handle the presentation, data binding to connect the view and the model, and routing to describe how users interact with the application. It was created and is partly maintained by Google. While the original version of Angular used JavaScript, more recent versions require the developer to use TypeScript, a syntactical superset of JavaScript. From the author’s single semester experience teaching Angular, it has a substantial learning curve and students can initially struggle with it.

The React framework from Facebook has become extremely popular amongst the web development community, and is now the most popular JavaScript Framework today for constructing complex front-ends in JavaScript^1,2. Unlike Angular, React focuses only on the view (i.e., the user interface). A React component is written in JavaScript and JSX, an extension of JavaScript that allows markup to be embedded within JavaScript. Based on the author’s teaching experience, React has a relatively benign learning curve, at least in comparison to Angular.

Vue.js is similar to React in that it focuses on the view. While React uses its own JSX syntax that allows the developer to “inject” HTML into the JavaScript, Vue.js uses HTML templates with data and behavior “injected” via custom attributes and directives. Unlike React or Angular, Vue.js is fully open-source and unconnected to any specific tech firm. As a result, Vue.js is particularly popular outside of North America and Europe.

All three frameworks are especially well suited to constructing a Single-Page Application (SPA). As the name suggests, a SPA is a web site that is constructed out of a single page. SPAs can be quite challenging to implement as their functionality grows. In a non-SPA web application, functionality is spread across different pages, thereby explicitly modularizing the application. But in a JavaScript SPA, all the possible functionality of the application must be contained within the one page. This can result in monolithically large JavaScript files filled with a hodgepodge of confusing callbacks and functions nested within functions nested within functions, etc.

As can be seen in Figure 11.2, an SPA constructed with a framework typically contains minimal HTML. Instead, JavaScript is used to populate the DOM with HTML elements using logic contained within the framework and data pulled from some API. Frameworks thus provide both a mechanism to simplify the data or state requirements of an application, and a way to handle user events in a manner independent of the DOM.

Figure 11.2 SPA using a framework