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 distribution architecture of a front-end web app with local storage.

The distribution 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 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/Read/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.

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
6.2. Question 2: HTML Forms
2. More on JavaScript
1. JavaScript Basics
1.1. Types and data literals in JavaScript
1.2. Variable scope
1.3. Strict Mode
1.4. Different kinds of objects
1.5. Array lists
1.6. Maps
1.7. JavaScript supports four types of basic data structures
1.8. Methods and Functions
1.9. Defining and using classes
1.10. Quiz Questions
2. Storing Database Tables with JavaScript's localStorage API
2.1. Entity Tables
2.2. JavaScript's LocalStorage API
3. Building a Minimal App with Plain JavaScript in Seven Steps
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 5 - Implement the Create Use Case
5. Step 4 - 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. Dealing with date/time information using Date and <time>
10. Points of Attention
10.1. Database size and memory management
10.2. Code clarity
10.3. Boilerplate code
10.4. Architectural separation of concerns
4. Practice Projects
1. Project 1 - Managing Information about Movies
2. Project 2 - Managing Information about Countries