Part I. Getting Started

In this first part of the book we summarize the Web's foundations and show how to build a front-end web application using plain JavaScript and the Local Storage API. It shows how to build such an app with minimal effort, not using any (third-party) framework or library. A front-end web app can be provided by any web server, as depicted in Figure 1 but all parts of its code are executed on the user's computer device (smartphone, tablet or notebook), and not on the remote web server. Typically, but not necessarily, a front-end web app is a single-user application, which is not shared with other users.

Figure 1. The deployment architecture of a front-end web app with local storage.

The deployment architecture of a front-end web app with local storage.

The minimal version of a JavaScript front-end data management application discussed in this tutorial book only includes a minimum of the overall functionality required for a complete app. It takes care of only one object type ("books") and supports the four standard data management operations (Create/Retrieve/Update/Delete), but it needs to be enhanced by styling the user interface with CSS rules, and by adding further important parts of the app's overall functionality.

If you are already familiar with HTML, XML and JavaScript, you may skip the first two chapters and immediately start developing a minimal web application by going to Chapter 3.

Table of Contents

1. A Quick Tour of the Foundations of Web Apps
1. The World Wide Web (WWW)
2. HTML and XML
2.1. XML documents
2.2. Unicode and UTF-8
2.3. XML namespaces
2.4. Correct XML documents
2.5. The evolution of HTML
2.6. HTML forms
3. Styling Web Documents and User Interfaces with CSS
4. JavaScript - "the assembly language of the Web"
4.1. JavaScript as an object-oriented language
4.2. Further reading about JavaScript
5. Accessibility for Web Apps
6. Quiz Questions
6.1. Question 1: Well-formed XML documents
6.2. Question 2: Well-formed XML
6.3. Question 3: Valid XHTML
6.4. Question 4: Valid XHTML5
6.5. Question 5: HTML forms
2. More on JavaScript
1. JavaScript Basics
1.1. Types and data literals in JavaScript
1.2. Variable scope
1.3. Frozen, or immutable, variables
1.4. Strict Mode
1.5. Different kinds of objects
1.6. Array lists
1.7. Maps
1.8. Important types of basic data structures
1.9. Procedures, methods and functions
1.10. Defining and using classes
2. Storing Database Tables with JavaScript's localStorage API
2.1. Entity Tables
2.2. JavaScript's LocalStorage API
3. New JavaScript Elements
3.1. Block-Scope Variable Declarations with let and const
3.2. Arrow Functions
3.3. For-Of Loops over Iterable Objects
3.4. Template Literals
3.5. The Spread Operator
3.6. Destructuring Assignments
4. Quiz Questions
4.1. Question 1: Data values and objects
4.2. Question 2: Evaluating a Boolean expression
4.3. Question 3: JavaScript datatypes
4.4. Question 4: Constructor-based class definition
4.5. Question 5: Type coercion
4.6. Question 6: Variable scope
3. A Minimal Web App with Plain JS
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. Retrieving 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. Possible Variations and Extensions
8.1. Using IndexedDB as an Alternative to LocalStorage
8.2. Styling the User Interface
9. Points of Attention
9.1. Catching invalid data
9.2. Database size and memory management
9.3. Boilerplate code
9.4. Serializing and de-serializing attribute values
9.5. Implicit versus explicit form field labels
9.6. Synchronizing views with the model
9.7. Architectural separation of concerns
10. Quiz Questions
10.1. Question 1: Properties/methods of a model class
10.2. Question 2: Using the output element
10.3. Question 3: Entity tables
11. Practice Projects
11.1. Project 1 - Managing information about movies
11.2. Project 2 - Managing information about countries