Building Front-End Web Apps with Plain JavaScript

An incremental in-depth tutorial about building front-end web applications with plain JavaScript, not using any third-party library or framework, for theory-underpinned and example-based learning by doing it yourself

Gerd Wagner

Warning: This tutorial book may still contain errors and may still be incomplete in certain respects. Please report any issue to [email protected]

This tutorial book is available as an open access online book (HTML) and as an e-book (PDF) via its book webpage.

This book, along with any associated source code, is licensed under The Code Project Open License (CPOL), implying that the associated code is provided "as-is", can be modified to create derivative works, can be redistributed, and can be used in commercial applications, but the book must not be distributed or republished without the author's consent.

2017-08-21

Revision History
20151112gw
Replace the <<stdid>> property stereotype by {id} property modifiers in class diagrams. Add sample data tables to each tutorial chapter. Add more practice projects with design models and sample data tables. Add quiz questions.
20150701gw
Add section about CSS to the "Foundations" chapter, detach the "More on JavaScript" chapter from the "Foundations" chapter.
20150520gw
Add chapter about enumerations.
20140924gw
Incorporate feedback by Felix Lehmann.
20140221gw
Incorporate feedback by Sorin Carbunaru.
20140212gw
Create first version.

Acknowledgements

Thanks to Sorin Carbunaru, Felix Lehmann and Luis Gustavo Nardin for proof-reading manuscripts of this tutorial book.

Table of Contents

Foreword
1. Why is JavaScript a Good Choice for Building Web Apps?
2. Run the Apps and Get Their Code
I. Getting Started
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. Procedures, methods and functions
1.9. Defining and using classes
2. Storing Database Tables with JavaScript's localStorage API
2.1. Entity Tables
2.2. JavaScript's LocalStorage API
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. 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
II. Integrity Constraints
4. Constraint Validation
1. Introduction
2. Integrity Constraints
2.1. String Length Constraints
2.2. Mandatory Value Constraints
2.3. Range Constraints
2.4. Interval Constraints
2.5. Pattern Constraints
2.6. Cardinality Constraints
2.7. Uniqueness Constraints
2.8. Standard Identifiers (Primary Keys)
2.9. Referential Integrity Constraints
2.10. Frozen and Read-Only Value Constraints
2.11. Beyond property constraints
3. Responsive Validation
4. Constraint Validation in MVC Applications
5. Adding Constraints to a Design Model
6. Summary
5. Constraint Validation in Plain JS
1. Introduction
2. New Issues
3. Make a JavaScript Class Model
4. Set up the Folder Structure Adding Some Library Files
4.1. Provide general utility functions and JavaScript fixes in library files
4.2. Create a start page
5. Write the Model Code
5.1. Summary
5.2. Code the model class as a constructor function
5.3. Code the property checks
5.4. Code the property setters
5.5. Add a serialization function
5.6. Data management operations
6. Write the View Code
6.1. The data management UI pages
6.2. Initialize the app
6.3. Set up the user interface
7. Run the App and Get the Code
8. Possible Variations and Extensions
8.1. Adding an object-level validation function
8.2. Using implicit JS setters
9. Points of Attention
9.1. Boilerplate code
9.2. Configuring the UI for preventing invalid user input
10. Practice Projects
10.1. Project 1 - Validate movie data
10.2. Project 2 - Validate country data
III. Enumerations
6. Enumeration Attributes
1. Enumerations
1.1. Simple enumerations
1.2. Code lists
1.3. Record enumerations
1.4. Extensible enumerations
2. Enumeration Attributes
3. Enumerations in Computational Languages
3.1. Enumerations in SQL
3.2. Enumerations in XML Schema
3.3. Enumerations in JavaScript
4. Dealing with Enumeration Attributes in a Design Model
7. Enumeration Attributes in Plain JS
1. New Issues
2. Make a JavaScript Class Model
3. Add the Library File Enumeration.js
4. The Meta-Class Enumeration
5. Write the Model Code
5.1. Code the enumerations
5.2. Code the model class as an ES6 class
5.3. Code the implicit getters and setters
5.4. Code the enumeration attribute checks
5.5. Write a serialization function
5.6. Data management operations
5.7. Creating test data
6. Write the View Code
6.1. Selection lists
6.2. Radio button and checkbox groups
6.3. Responsive validation for choice widgets
7. Run the App and Get the Code
8. Practice Projects
8.1. Project 1 - Adding ratings and genres as enumeration attributes
8.2. Project 2 - Adding country codes and religions as enumeration attributes
IV. Associations
8. Reference Properties and Unidirectional Associations
1. References and Reference Properties
2. Referential Integrity
3. Modeling Reference Properties as Unidirectional Associations
4. Representing Unidirectional Associations as Reference Properties
5. Adding Directionality to a Non-Directed Association
6. Our Running Example
7. Eliminating Unidirectional Associations
7.1. The basic elimination procedure restricted to unidirectional associations
7.2. Eliminating associations from the design model
8. Rendering Reference Properties in the User Interface
9. Collection Types for Multi-Valued Reference Properties
10. Quiz Questions
10.1. Question 1: Meaning of "one-to-one"
10.2. Question 2: When to Check Referential Integrity
10.3. Question 3: Meaning of "Functional"
10.4. Question 4: Object Destruction Dependency
10.5. Question 5: Rendering a Single-Valued Reference Property
10.6. Question 6: Expressing a Functionality Type
9. Unidirectional Functional Associations in Plain JS
1. Implementing Single-Valued Reference Properties
2. Make a JS Class Model
3. New Issues
4. Code the Model
4.1. Summary
4.2. Code each model class as an ES6 class
4.3. Code the property checks
4.4. Code the property setters
4.5. Choose and implement a deletion policy
4.6. Serialization and Object-to-Storage Mapping
5. Code the View and Controller
5.1. Initialize the app
5.2. Showing associated objects in Retrieve/List All
5.3. Selecting associated objects in the Create and Update use cases
6. Quiz Questions
6.1. Question 1: JS class model
10. Unidirectional Non-Functional Associations in Plain JS
1. Implementing Multi-Valued Reference Properties
2. Make a JS Class Model
3. New issues
4. Code the Model
4.1. Summary
4.2. Code the add and remove operations
4.3. Choose and implement a deletion policy
4.4. Serialization and Object-to-Storage Mapping
5. Code the View
5.1. Showing information about associated objects in Retrieve/List All
5.2. Selecting associated objects in the Create use case
5.3. Selecting associated objects in the Update use case
6. How to Run the App, Get the Code and Ask Questions
7. Points of Attention
11. Practice Projects
1. Project 1 - Assigning a director and actors to a movie
2. Project 2 - Assigning cities and a capital to a country, as well as members to an organization
12. Bidirectional Associations
1. Inverse Reference Properties
2. Making an OO Class Model
2.1. The basic procedure
2.2. How to eliminate unidirectional associations
2.3. How to eliminate bidirectional associations
2.4. The resulting OO class model
3. Quiz Questions
3.1. Question 1: Table populations of bidirectional associations
3.2. Question 2: Implications of bidirectionality
3.3. Question 3: Elimination of bidirectional associations
3.4. Question 4: Meaning of bidirectional association
13. Bidirectional Associations in Plain JS
1. Make a JavaScript Class Model
2. Write the Model Code
2.1. New issues
2.2. Coding Summary
2.3. Code each class of the JS class model
2.4. Code the set methods of single-valued properties
2.5. Code the add and remove operations
2.6. Take care of deletion dependencies
3. Exploit Inverse Reference Properties in the User Interface
3.1. Show information about published books in the Retrieve/List All Publishers use case
14. Practice Projects
1. Project 1 - Assigning both directors/actors to movies and movies to directors/actors
2. Project 2 - Assigning cities to a country, as well as members to an organization, and vice versa
15. Part-Whole Associations
1. Aggregation
2. Composition
V. Inheritance in Class Hierarchies
16. Subtyping and Inheritance
1. Introducing Subtypes by Specialization
2. Introducing Supertypes by Generalization
3. Intension versus Extension
4. Type Hierarchies
5. The Class Hierarchy Merge Design Pattern
6. Subtyping and Inheritance in Computational Languages
6.1. Subtyping and inheritance in OOP
6.2. Subtyping and inheritance with XML Schema
6.3. Subtyping and inheritance with OWL
6.4. Representing class hierarchies with SQL database tables
7. Quiz Questions
7.1. Question 1: Statements about a Class Hierarchy
7.2. Question 2: Class Hierarchy Merge
17. Subtyping with Plain JS
1. Subtyping with Constructor-Based Classes
2. Case Study 1: Eliminating a Class Hierarchy
2.1. Make the JS class model
2.2. New issues
2.3. Code the model classes of the JS class model
2.4. Write the View and Controller Code
3. Case Study 2: Implementing a Class Hierarchy
3.1. Make a JS class model
3.2. Make a JS entity table model
3.3. New issues
3.4. Code the model classes of the JS class model
4. Quiz Questions
4.1. Question 1: Constructor-Based Inheritance Pattern
4.2. Question 2: Check Method for Segment Property
18. Practice Projects
1. Project 1 - Person Types and Movie Types
VI. Model-Based App Development
19. The Model-Based Development Framework mODELcLASSjs
1. A Quick Tour of mODELcLASSjs
2. Model-Based Development
3. The Philosophy and Features of mODELcLASSjs
4. The Check Method
5. Storage Management
20. Constraint Validation with mODELcLASSjs
1. Coding the Design Model
2. Project Set-Up
3. The View and Controller Layers
4. Run the App and Get the Code
5. Concluding Remarks
Glossary
Index

List of Figures

1. The deployment architecture of a front-end web app with local storage.
2.1. The built-in JavaScript classes Object and Function.
3.1. The object type Book.
4.1. An example of an object-level constraint
4.2. A design model defining the object type Book with two invariants
5.1. From an information design model to a JS class model
6.1. An example of an extensible enumeration
6.2. A single and a multiple select element with no selected option
6.3. A radio button group
6.4. A checkbox group
6.5. An information design model for the object type Book
7.1. A JS class model for the object type Book
7.2. The UI for creating a new book record with enumeration attributes
8.1. A committee has a club member as chair expressed by the reference property chair
8.2. An association end with a "dot"
8.3. Representing unidirectional associations as reference properties
8.4. A model of a non-directed association between Committee and ClubMember
8.5. Modeling a bidirectional association between Committee and ClubMember
8.6. The Publisher-Book information design model with a unidirectional association
8.7. The Publisher-Book-Author information design model with two unidirectional associations
8.8. Turning a functional association end into a reference property
8.9. Turning a non-functional association end into a multi-valued reference property
8.10. An OO class model for Publisher and Book
8.11. An OO class model for all three classes
9.1. A JS class model defining the classes Book and Publisher
11.1. Two unidirectional associations between Movie and Person.
11.2. Three unidirectional associations.
12.1. The Publisher-Book-Author information design model with two bidirectional associations
12.2. Turn a bidirectional one-to-one association into a master-slave pair of mutually inverse single-valued reference properties
12.3. Turn a bidirectional many-to-many association into a master-slave pair of mutually inverse multi-valued reference properties
12.4. The OO class model
14.1. Two bidirectional associations between Movie and Person.
14.2. Three unidirectional associations.
16.1. The object type Book with two subtypes: TextBook and Biography
16.2. The object types Employee and Author share several attributes
16.3. The object types Employee and Author have been generalized by adding the common supertype Person
16.4. The complete class model containing two inheritance hierarchies
16.5. A class hierarchy having the root class Vehicle
16.6. A multiple inheritance hierarchy
16.7. The design model resulting from applying the Class Hierarchy Merge design pattern
16.8. A class model with a Person roles hierarchy
16.9. An SQL table model with a single table representing the Book class hierarchy
16.10. An STI table model representing the Person role hierarchy
16.11. A TCI table model representing the Person roles hierarchy
16.12. A JTI table model representing the Person roles hierarchy
17.1. The object type Book as the root of a segmentation
17.2. The Person roles hierarchy
17.3. Student is a subclass of Person
17.4. The simplified (re-factored) information design model
17.5. The JS class model
17.6. The JS class model of the Person class hierarchy
17.7. An STI model of the Person class hierarchy
17.8. A TCI model of the Person class hierarchy
18.1. Two class hierarchies: Movie with two disjoint subtypes and Person with two (possibly overlapping) subtypes.
19.1. The meta-class mODELcLASS
19.2. The sTORAGEmANAGER classes
20.1. A platform-independent design model with the class Book and two invariants
20.2. The mODELcLASSjs validation app's start page index.html.

List of Tables

2.1. An example of an entity table representing a collection of books
2.2. Required and desirable features of JS code patterns for classes
3.1. A collection of book objects represented as a table
3.2. Sample data about movies
3.3. Sample data about countries
4.1. Sample data for Book
5.1. Datatype mapping
5.2. Sample data about movies
5.3. Sample data about countries
6.1. Representing an enumeration of records as a table
6.2. Sample data for Book
7.1. Sample data about movies with rating and genres
7.2. Sample data about countries with country code and religions
8.1. An example of an association table
8.2. Different terminologies
8.3. Functionality types
8.4. Sample data for Publisher
8.5. Sample data for Book
9.1. Sample data for Publisher
9.2. Sample data for Book
10.1. Sample data for Publisher
10.2. Sample data for Book
10.3. Sample data for Author
11.1. Movies
11.2. People
11.3. International organizations
11.4. Countries
11.5. Cities
13.1. Sample data for Publisher
13.2. Sample data for Book
13.3. Sample data for Author
14.1. Movies
14.2. People
14.3. International organizations
14.4. Countries
14.5. Cities