4 Building web applications

 

This chapter covers

  • Steps in the lifecycle of a web application
  • How HTML and the DOM are related
  • The order of JavaScript code execution
  • Writing interactive HTML with JSX

JavaScript began as a language for adding interactivity to websites. At first, JavaScript was an enhancement, modifying the HTML and CSS on the page to add luxuries like animations and form validation. But over time, JavaScript became essential. Today, it’s common for websites to be built with nothing but JavaScript, with developers thinking in terms of components instead of HTML tags and CSS rules. This abstraction has made it easier than ever to build complex web experiences, but losing sight of the underlying workings of the browser comes at a cost: A JavaScript-heavy website can easily degrade into a miserably slow experience.

In this chapter, we’ll explore the lifecycle of client-side web applications. First, we’ll look at how HTML is used to build the DOM, a representation of the page’s content. Then we’ll see how JavaScript can interact with the page and how the event loop allows our code to respond to users’ actions. Finally, we’ll find out how modern web frameworks like React hybridize JavaScript and HTML with a language called JSX.

Let’s dive in!

4.1 The lifecycle overview

4.2 The page-building phase

4.2.1 Parsing HTML and building the DOM

4.2.2 Executing JavaScript code

4.3 Event handling

4.3.1 Event-handling overview

4.3.2 Registering event handlers

4.4 Writing interactive HTML with JSX

4.5 Summary