Overview of the Minimal Application

Overview

In this section, we’ll look at how to build a minimal front-end web application with plain JS and the localStorage API. The purpose of our example application is to manage information about books. In our sample application, we’ll deal with a single object type, Book, as depicted in the class diagram below:

Sample data

The following table shows a sample data population for the Book model class:

Use cases

What do we need for a data management application? It depends on what we want the application to do! The application we’re creating should be able to support the following four standard use cases:

1. Create a new book record by allowing the user to enter the data of a book that they want to be added to the collection of stored book records.
2. Retrieve (or read) all books from the data store and display them in list form.
3. Update a book record’s data.
4. Delete a book record.

These four standard use cases, and the corresponding data management operations, are often summarized with the acronym CRUD.

To enter data with the help of the keyboard and our computer screen, we use HTML forms. These forms provide the user interface technology for web applications.

To maintain a collection of persistent data objects, we need a storage technology that allows us to keep data objects in persistent records on a secondary storage device, such as a hard disk or a solid-state disk.

Modern web browsers provide two technologies like this. The simpler one is called localStorage, and the more powerful one is called IndexedDB. For our minimal appplication, let’s use localStorage.