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

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 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:

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.
Retrieve (or read) all books from the data store and show them in the form of a list.
Update the data of a book record.
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:

MinimalApp
  src
    c
    m
    v
  index.html

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="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <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>
</head>
<body>
 ...
</body>
</html>

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():

<body>
 <h1>Public Library</h1>
 <h2>An Example of a Minimal JavaScript Front-End App</h2>
 <p>This app supports the following operations:</p>
 <menu>
  <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
  </button></li>
  <li><button type="button" onclick="Book.createTestData()">
    Create test data
  </button></li>
 </menu>
</body>

Prev	Up	Next
4. Quiz Questions	Home	2. Step 2 - Write the Model Code