Chapter 3. Building a Minimal Web App with Plain JS in Seven Steps

Table of Contents

1. Step 1 - Set up the Folder Structure
2. Step 2 - Write the Model Code
2.1. Representing the collection of all Book instances
2.2. Creating a new Book instance
2.3. Loading all Book instances
2.4. Updating a Book instance
2.5. Deleting a Book instance
2.6. Saving all Book instances
2.7. Creating test data
2.8. Clearing all data
3. Step 3 - Initialize the Application
4. Step 4 - Implement the Create Use Case
5. Step 5 - Implement the Retrieve/List All Use Case
6. Step 6 - Implement the Update Use Case
7. Step 7 - Implement the Delete Use Case
8. Run the App and Get the Code
9. Possible Variations and Extensions
9.1. Using IndexedDB as an Alternative to LocalStorage
9.2. Styling the User Interface
10. Points of Attention
10.1. Catching invalid data
10.2. Database size and memory management
10.3. Boilerplate code
10.4. Serializing and de-serializing attribute values
10.5. Implicit versus explicit form field labels
10.6. Synchronizing views with the model
10.7. Architectural separation of concerns
11. Practice Projects
11.1. Project 1 - Managing information about movies
11.2. Project 2 - Managing information about countries

In this chapter, we show how to build a minimal front-end web application with plain JavaScript and Local Storage. The purpose of our example app is to manage information about books. That is, we deal with a single object type: Book, as depicted in the class diagram of Figure 3.1.

Figure 3.1. The object type Book.

The object type Book.

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

Table 3.1. A collection of book objects represented as a table

ISBN Title Year
006251587X Weaving the Web 2000
0465026567 Gödel, Escher, Bach 1999
0465030793 I Am A Strange Loop 2008

What do we need for a data management app? There are four standard use cases, which have to be supported by the app:

  1. Create a new book record by allowing the user to enter the data of a book that is to be added to the collection of stored book records.

  2. Retrieve (or read) all books from the data store and show them in the form of a list.

  3. Update the data of a book record.

  4. Delete a book record.

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

For entering data with the help of the keyboard and the screen of our computer, we use HTML forms, which provide the user interface technology for web applications.

For maintaining a collection of persistent data objects, we need a storage technology that allows 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 such technologies: the simpler one is called Local Storage, and the more powerful one is called IndexedDB. For our minimal example app, we use Local Storage.

1. Step 1 - Set up the Folder Structure

In the first step, we set up our folder structure for the application. We pick a name for our app, such as "Public Library", and a corresponding (possibly abbreviated) name for the application folder, such as "PublicLibrary" or MinimalApp. Then we create this folder on our computer's disk and a subfolder "src" for our JavaScript source code files. In this folder, we create the subfolders "m", "v" and "c", following the Model-View-Controller paradigm for software application architectures. And finally we create an index.html file for the app's start page, as discussed below. Thus, we end up with the following folder structure:


In the start page HTML file of the app, we load the file initialize.js and the Book.js model class file:

<!DOCTYPE html>
<html xmlns="" xml:lang="en" lang="en">
 <meta charset="UTF-8" />
 <title>Minimal JS Front-End App Example</title>
 <script src="src/c/initialize.js"></script>
 <script src="src/m/Book.js"></script>

The start page provides a menu for choosing one of the CRUD data management use cases. Each use case is performed by a corresponding page such as, for instance, createBook.html. The menu also contains options for creating test data with the help of the procedure Book.createTestData() and for clearing all data with Book.clearData():

 <h1>Public Library</h1>
 <h2>An Example of a Minimal JavaScript Front-End App</h2>
 <p>This app supports the following operations:</p>
  <li><a href="retrieveAndListAllBooks.html">
       List all books</a></li>
  <li><a href="createBook.html">Add a new book</a></li>
  <li><a href="updateBook.html">Update a book</a></li>
  <li><a href="deleteBook.html">Delete a book</a></li>
  <li><button type="button" onclick="Book.clearData()">
    Clear database
  <li><button type="button" onclick="Book.createTestData()">
    Create test data