This 6-part tutorial shows how to build front-end web applications with plain JavaScript, not using any (third-party) framework or library. A front-end web application can be provided by any web server, but it is 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 application is a single-user application, which is not shared with other users.

1. Building a Minimal App with Plain JavaScript in Seven Steps
2. Adding Constraint Validation
3. Dealing with Enumerations
4. Managing Unidirectional Associations
5. Managing Bidirectional Associations
6. Handling Class Hierarchies

Book detailsBuy the bookVisit discussion forum

1 Building a Minimal Front-End Web App in Seven Steps

An introductory tutorial for beginners about developing plain JS front-end web applications with minimal effort

In this first part of our 6-part tutorial we summarize the web's foundations and show how to build a front-end web application with minimal effort using plain JavaScript (and no third-party framework or library).

Read the tutorial Run the app Get the codeAsk a question

2 Adding Constraint Validation

A medium-level tutorial about developing front-end web applications with constraint validation using plain JavaScript

This tutorial shows how to build a simple front-end web application with constraint validation using plain JavaScript. The minimal JavaScript front-end app that we have discussed in the first part of this 5-part tutorial has been limited to support the minimum functionality of a data management app only. However, it did not take care of preventing the users from entering invalid data into the app's database. In this second part of the tutorial we show how to express integrity constraints in a JavaScript model class, and how to perform constraint validation both in the model part of the app and in the user interface built with HTML5.

Read the tutorial Run the app Get the codeAsk a question

3 Dealing with Enumerations

A medium-level tutorial about developing front-end web applications with enumeration attributes using plain JavaScript

In all application domains, there are string-valued attributes with a fixed set of possible string values. These attributes are called enumeration attributes, and the fixed value sets defining their possible string values are called enumerations. For allowing user input to an enumeration attribute, we can use the UI concept of a (drop-down) selection list, which may be implemented with an HTML select element. For user input to a single-valued enumeration attribute, a radio button group can be used instead of a single selection list, while for user input to a multi-valued enumeration attribute, a checkbox group can be used instead of a multiple selection list.

This tutorial shows how to build a JavaScript front-end web app where model classes have enumeration attributes, and where the HTML5 user interface includes selection lists and choice widgets.

Read the tutorial Run the app Get the codeAsk a question

4 Managing Unidirectional Associations

An advanced tutorial about developing front-end web applications with unidirectional associations using plain JavaScript

The three example apps that we have discussed in previous chapters, the minimal app, the validation app and the enumeration app, have been limited to managing the data of one object type only. A real app, however, has to manage the data of several object types, which are typically related to each other in various ways. In particular, there may be associations and subtype (inheritance) relationships between object types. Handling associations and subtype relationships are advanced issues in software application building. They are often not sufficiently discussed in software development text books and not well supported by application development frameworks. In this part of the tutorial, we show how to deal with unidirectional associations, while bidirectional associations and subtype relationships are covered in parts 5 and 6.

Read the tutorial Run the app Get the codeAsk a question

5 Managing Bidirectional Associations

An advanced tutorial about developing front-end web applications with bidirectional associations using plain JavaScript

This tutorial is Part 5 of our series of six tutorials about building a front-end web application with plain JavaScript. It shows how to build a web app that takes care of the object types Author, Publisher and Book as well as the bidirectional associations between Book and Author and between Book and Publisher. The app supports the four standard data management operations (Create/Read/Update/Delete). It extends the example app of part 4 by adding code for handling derived inverse reference properties, but it needs to be enhanced by adding subtype handling.

Read the tutorial Run the app Get the codeAsk a question

6 Handling Subtype Relationships in Class Hierarchies

An advanced tutorial about subtyping in JavaScript front-end web applications

This tutorial is Part 6 of our series of six tutorials about building a front-end web application with plain JavaScript. It shows how to build a web app that manages subtype (inheritance) relationships between object types.

Read the tutorial Run the app Get the codeAsk a question

Back to top