chapter two

2 Vanilla JavaScript—​like in the old days

 

This chapter covers

  • Building an application using vanilla JavaScript and HTML
  • Programmatically creating DOM elements
  • Using the Document API to manipulate the DOM

To understand the benefits of using a frontend framework, you first need to understand the problems that it solves, and there is no better way to do this than to write an application without a framework—​do the framework’s job yourself. The objective of this chapter is making you "suffer the pain" of writing applications without a framework, so that you can build some appreciation for the job that frameworks do for you.

In the old days (I’m not that old, it’s just that technology evolves fast), we’d write applications using only vanilla JavaScript and HTML. JQuery was the best we had: it provided a nice API to interact with the DOM, hiding away the browser differences. But we’d still have to write code down to the level of working with the DOM, and to be fair, it wasn’t that bad. That is, until we used our first modern frontend framework (it was Angular, in my case). Now there’s no going back; we’ve been there; we know how much simpler it’s become to write JavaScript applications.

2.1 The assignment: a TODOs app

2.2 Writing the application

2.2.1 Setting up the project

2.2.2 The HTML markup

2.2.3 The JavaScript code

2.3 Summary