Building Front-End Web Apps with Plain JavaScript
   Next

Understanding and Implementing Information Management Concepts and Techniques

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 is a draft version, so it may still contain errors and may still be incomplete in certain respects. Please report any issue to G.Wagner@b-tu.de.

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

Copyright © 2014-2015 Gerd Wagner

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.

2015-11-27

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 and Felix Lehmann for proof-reading early versions of parts 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. 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
II. Integrity Constraints
5. Integrity Constraints and Data 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 Value Constraints
2.11. Beyond property constraints
3. Responsive Validation
4. Constraint Validation in MVC Applications
5. Criteria for Evaluating the Validation Support of Frameworks
6. Quiz Questions
6.1. Question 1: Where to Check Constraints
6.2. Question 2: Where to Define Constraints
6.3. Question 3: Counting Constraints
6.4. Question 4: Constraint Names
6.5. Question 5: Compliant Objects
6. Constraint Validation in a Plain JS Front-End App
1. Introduction
2. Using the HTML5 Form Validation API
3. New Issues
4. Make a JavaScript Data Model
5. Set up the Folder Structure with Library Files
5.1. Style the user interface with CSS
5.2. Provide general utility functions and JavaScript fixes in library files
5.3. Create a start page
6. Write the Model Code
6.1. Summary
6.2. Encode the model class as a constructor function
6.3. Encode the property checks
6.4. Encode the property setters
6.5. Add a serialization function
6.6. Data management operations
7. The View and Controller Layers
7.1. The data management UI pages
7.2. Initialize the app
7.3. Initialize the data management use cases
7.4. Set up the user interface
8. Run the App and Get the Code
9. Evaluation
10. Possible Variations and Extensions
10.1. Adding an object-level custom validation function
10.2. Simplifying forms with implicit labels
11. Points of Attention
11.1. Database size and memory management
11.2. Boilerplate code
12. Quiz Questions
12.1. Question 1: Validation in Setter (1)
12.2. Question 2: Validation in Setter (2)
12.3. Question 3: Methods to Add in JS Data Model
12.4. Question 4: Implementing Constraints
7. Practice Projects
1. Project 1 - Validate Movie Constraints
2. Project 2 - Validate Country Constraints
III. Enumerations
8. Enumerations and Enumeration Attributes
1. Enumerations
1.1. Simple Enumerations
1.2. Code Lists
1.3. Record 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. Quiz Questions
4.1. Question 1: Languages Supporting Enumerations
4.2. Question 2: UI Widget for Single-Valued Enum Attribute
4.3. Question 3: UI Widget for Multi-Valued Enum Attribute
9. Implementing Enumeration Attributes in a Plain JS App
1. New Issues
2. Make a JavaScript Data Model
3. Set up the Folder Structure with Library Files
4. The Meta-Class Enumeration
5. Write the Model Code
5.1. Encode the enumerations
5.2. Encode the model class as a constructor function
5.3. Encode the enumeration attribute checks
5.4. Encode the enumeration attribute setters
5.5. Write a serialization function
5.6. Data management operations
5.7. Creating test data
6. Write the View and Controller Code
6.1. Selection lists
6.2. Choice widgets
6.3. Responsive validation for selection lists and choice widgets
7. Run the App and Get the Code
8. Possible Variations and Extensions
9. Points of Attention
9.1. Database size and memory management
9.2. Boilerplate code
10. Quiz Questions
10.1. Question 1: Checking the Range Constraint of an Enum Attribute
10.2. Question 2: Computing MAX
10. Practice Projects
1. Project 1 - Ratings and Genres as Enumeration Attributes of Movie
2. Project 2 - Country Code and Religions as Enumeration Attributes
IV. Associations
11. 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 Publisher-Book-Author 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
12. Implementing Unidirectional Functional Associations with Plain JavaScript
1. Implementing Single-Valued Reference Properties with Plain JavaScript
2. Make a JavaScript Data Model
3. New issues
4. Write the Model Code
4.1. Summary
4.2. Encode each class of the JavaScript data model as a constructor function
4.3. Encode the property checks
4.4. Encode the property setters
4.5. Implement a deletion policy
4.6. Serialization and De-Serialization
5. The View and Controller Layers
5.1. Initialize the app
5.2. Show information about associated objects in the List Objects use case
5.3. Allow selecting associated objects in the create and update use cases
6. Quiz Questions
6.1. Question 1: JavaScript data model
13. Implementing Unidirectional Non-Functional Associations with Plain JavaScript
1. Implementing Multi-Valued Reference Properties in JavaScript
2. Make a JavaScript Data Model
3. New issues
4. Write the Model Code
4.1. Encode the add and remove operations
4.2. Implement a deletion policy
4.3. Serialization and De-Serialization
5. Write the User Interface Code
5.1. Show information about associated objects in the List Objects use case
5.2. Allow selecting associated objects in the create use case
5.3. Allow selecting associated objects in the update use case
6. How to Run the App, Get the Code and Ask Questions
7. Points of Attention
14. Practice Projects
1. Project 1 - Assigning a director and actors to a movie
2. Project 2 - Assigning a capital to a country, as well as members and a headquarter location to an organization
15. Bidirectional Associations
1. Inverse Reference Properties
2. Making an Association-Free Information Design Model
2.1. The basic procedure
2.2. How to eliminate unidirectional associations
2.3. How to eliminate bidirectional associations
2.4. The resulting association-free design model
3. Quiz Questions
3.1. Question 1: Table populations of bidirectional associations
3.2. Question 2: Implications of bi-directionality
3.3. Question 3: Elimination of bi-directional associations
3.4. Question 4: Meaning of bi-directional association
16. Implementing Bidirectional Associations with Plain JavaScript
1. Make a JavaScript Data Model
2. Write the Model Code
2.1. New issues
2.2. Summary
2.3. Encode each class of the JavaScript data model as a constructor function
2.4. Encode the property checks
2.5. Encode the setter operations
2.6. Encode the add and remove operations
2.7. Take care of deletion dependencies
3. Exploiting Derived Inverse Reference Properties in the User Interface
3.1. Show information about published books in the List Publishers use case
17. 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
18. Part-Whole Associations
1. Aggregation
2. Composition
V. Inheritance in Class Hierarchies
19. 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 with OOP Classes
6.2. Subtyping and Inheritance with Database Tables
7. Quiz Questions
7.1. Question 1: Statements about a Class Hierarchy
7.2. Question 2: Class Hierarchy Merge
20. Subtyping in a Plain JavaScript Front-End App
1. Subtyping with Constructor-Based Classes
2. Case Study 1: Eliminating a Class Hierarchy
2.1. Make the JavaScript data model
2.2. New issues
2.3. Encode the model classes of the JavaScript data model
2.4. Write the View and Controller Code
3. Case Study 2: Implementing a Class Hierarchy
3.1. Make the JavaScript data model
3.2. Make the entity table model
3.3. New issues
3.4. Encode the model classes of the JavaScript data model
4. Quiz Questions
4.1. Question 1: Constructor-Based Inheritance Pattern
4.2. Question 2: Check Method for Segment Property
21. Practice Projects
1. Project 1 - Person Types and Movie Types
VI. Model-Based App Development
22. The Model-Based Development Framework mODELcLASSjs
1. Model-Based Development
2. The Philosophy and Features of mODELcLASSjs
3. The Check Method
23. Constraint Validation with mODELcLASSjs
1. Encoding 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

List of Figures

1. The distribution architecture of a front-end web app with local storage.
2.1. The built-in JavaScript classes Object and Function.
2.2. Class to be encoded
3.1. The object type Book.
3.2. The minimal app's start page index.html.
4.1. The object type Movie
4.2. The object type Movie
5.1. The object type Person with an interval constraint
5.2. The object type Book with a pattern constraint
5.3. Two object types with cardinality constraints
5.4. The object type Book with a uniqueness constraint
5.5. The object type Book with a standard identifier declaration
5.6. Class with constraints
5.7. Class with constraints
5.8. Class with constraints
6.1. A platform-independent design model with the object type Book and two invariants
6.2. Deriving a JavaScript data model from an information design model
6.3. The validation app's start page index.html.
6.4. Which methods to add?
6.5. How to implement these constraints?
7.1. The object type Movie defined with several constraints.
7.2. The object type Country defined with several constraints.
8.1. The simple enumeration GenderEL represented as a UML enumeration data type
8.2. The enumeration GenderEL defined as a code list
8.3. A single and a multiple select element with no selected option
8.4. A radio button group
8.5. A checkbox group
9.1. An information design model for the object type Book
9.2. A JavaScript data model, for the object type Book
9.3. The user interface for creating a new book record with ISBN, title and four enumeration attributes
10.1. The object type Movie defined together with two enumerations.
10.2. The object type Movie defined together with two enumerations.
11.1. A committee has a club member as chair expressed by the reference property chair
11.2. A committee has a club member as chair expressed by an association end with a "dot"
11.3. Representing the unidirectional association ClubMember has Committee as chairedCommittee as a reference property
11.4. A model of the Committee-has-ClubMember-as-chair association without ownership dots
11.5. Modeling a bidirectional association between Committee and ClubMember
11.6. The Publisher-Book information design model with a unidirectional association
11.7. The Publisher-Book-Author information design model with two unidirectional associations
11.8. Turn a non-functional target association end into a corresponding reference property
11.9. The association-free Publisher-Book design model
11.10. The association-free Publisher-Book-Author design model
12.1. The complete JavaScript data model
14.1. Two unidirectional associations between Movie and Person.
14.2. Three unidirectional associations.
15.1. The Publisher-Book-Author information design model with two bidirectional associations
15.2. Turn a bidirectional one-to-one association into a pair of mutually inverse single-valued reference properties
15.3. Turn a bidirectional many-to-many association into a master-slave pair of mutually inverse multi-valued reference properties
15.4. The association-free design model
16.1. The JavaScript data model without the class Book
17.1. Two bidirectional associations between Movie and Person.
17.2. Three unidirectional associations.
19.1. The object type Book is specialized by two subtypes: TextBook and Biography
19.2. The object types Employee and Author share several attributes
19.3. The object types Employee and Author have been generalized by adding the common supertype Person
19.4. The complete class model containing two inheritance hierarchies
19.5. A class hierarchy having the root class Vehicle
19.6. A multiple inheritance hierarchy
19.7. The design model resulting from applying the Class Hierarchy Merge design pattern
19.8. A class model with a Person roles hierarchy
19.9. An SQL table model with a single table representing the Book class hierarchy
19.10. An SQL table model with a single table representing the Person roles hierarchy
19.11. An SQL table model with the table Person as the root of a table hierarchy
20.1. The object type Book as the root of a disjoint segmentation
20.2. The Person roles hierarchy
20.3. Student is a subclass of Person
20.4. The simplified information design model obtained by applying the Class Hierarchy Merge design pattern
20.5. The JavaScript data model
20.6. The JavaScript data model of the Person class hierarchy
20.7. The entity table model of the Person class hierarchy
21.1. Two class hierarchies: Movie with two disjoint subtypes and Person with two (possibly overlapping) subtypes.
22.1. The meta-class mODELcLASS
23.1. A platform-independent design model with the class Book and two invariants
23.2. The mODELcLASS 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
2.3. A entity table representing a collection of books
3.1. Sample data for Book
3.2. An entity table representing a collection of books
3.3. A collection of book objects represented as a table
4.1. Sample data
4.2. Sample country data
6.1. Sample data for Book
6.2. Datatype mapping
6.3. Evaluation
7.1. Sample movie data
7.2. Sample country data
8.1. Representing an enumeration of records as a table
8.2. Representing a record enumeration as a table
9.1. Sample data for Book
10.1. Sample movie data
10.2. Sample country data
11.1. An example of an association table
11.2. Different terminologies
11.3. Functionality types
12.1. Sample data for Publisher
12.2. Sample data for Book
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
16.1. Sample data for Publisher
16.2. Sample data for Book
16.3. Sample data for Author
17.1. Movies
17.2. People
17.3. International organizations
17.4. Countries
17.5. Cities
   Next
   Foreword