Chapter 22. The Model-Based Development Framework mODELcLASSjs

Table of Contents

1. Model-Based Development
2. The Philosophy and Features of mODELcLASSjs
3. The Check Method

In an application architecture based on the Model-View-Controller (MVC) paradigm, the UI is called 'view', and the term 'controller' denotes the glue code needed for integrating the UI code with the underlying model classes and storage management code, or, in MVC jargon, for integrating the 'view' with the 'model'. Using a model-based development approach, the model classes of an app are obtained by encoding the app's data model, which is typically expressed in the form of a UML class diagram. Since it is the task of the model and storage layers to define and validate constraints and to manage data storage, we need reusable model code taking care of this in a generic manner for avoiding per-class and per-property boilerplate code for constraint validation, and per-class boilerplate code for data storage management. This is where mODELcLASSjs comes in handy. It provides

  1. a generic check method for validating property constraints, and

  2. the generic storage management methods add, update and destroy for creating new (persistent) objects/rows, for updating existing objects/rows and for deleting them.

For using the functionality of mODELcLASSjs in your app, you have to include its code, either by downloading mODELcLASS.js to the lib folder and use a local script loading element like the following:

<script src="lib/mODELcLASS.js"></script>

or with the help of a remote script loading element like the following:

<script src="http://web-engineering.info/JsFrontendApp/mODELcLASS.js"></script>

Then you can create your app's model classes (with property and method declarations) as instances of the meta-class mODELcLASS:

Book = new mODELcLASS({
  typeName: "Book",
  properties: {
    isbn: {range:"NonEmptyString", isStandardId: true, label:"ISBN", pattern:/\b\d{9}(\d|X)\b/, 
        patternMessage:'The ISBN must be a 10-digit string or a 9-digit string followed by "X"!'},
    title: {range:"NonEmptyString", min: 2, max: 50, label:"Title"}, 
    year: {range:"Integer", min: 1459, max: util.nextYear(), label:"Year"}
  },
  methods: {
    ...
  }
});

Notice that the declaration of a property includes the constraints that apply to it. For instance, the declaration of the property isbn includes a pattern constraint requiring that the ISBN must be a 10-digit string or a 9-digit string followed by "X".

After defining a model class, you can create new 'model objects' instantiating it by invoking the create method provided by mODELcLASS:

var book1 = Book.create({isbn:"006251587X", title:"Weaving the Web", year: 2000});

You can then apply the following properties and methods, all pre-defined by mODELcLASS

  1. the property type for retrieving the object's direct type,

  2. the method toString() for serializing an object,

  3. the method set( prop, val) for setting an object property after checking all property constraints,

  4. the method isInstanceOf( Class) for testing if an object is an instance of a class.

The use of these mODELcLASS features is illustrated by the following examples:

console.log( book1.type.typeName);  // "Book"
console.log( book1.toString());  // "Book{ isbn:"006251587X", ...}"
book1.set("year", 1001);  // "IntervalConstraintViolation: Year must not be smaller than 1459"
book1.set("year", 2001);  // change the year to 2001
console.log( book1.isInstanceOf( Book));  // true

You can also invoke the generic check method provided by mODELcLASS in the user interface code. For instance, for responsive validation with the HTML5 constraint validation API, you may do the following:

var formEl = document.forms["Book"];
formEl.isbn.addEventListener("input", function () {
  formEl.isbn.setCustomValidity( 
      Book.check( "isbn", formEl.isbn.value).message);
});

Here we define an event handler for input events on the ISBN input field. It invokes the setCustomValidity method of the HTML5 constraint validation API for setting a validation error message that results from invoking Book.check for validating the constraints defined for the isbn property for the user input value from the form field formEl.isbn. The check method returns a constraint violation object with a message property. If no constraint is violated, the message is an empty string, so nothing happens. Notice that you don't have to write the code of the check method, as it is provided by mODELcLASSjs.

You can also use the methods provided by any mODELcLASS for managing data storage, like, for instance,

// populate Book.instances from database (by default, Local Storage)
Book.loadAll();
// create a new 'model object' and store it in the database
Book.add( {isbn:"0465030793", title:"I Am A Strange Loop", year: 2008});

By default, data is stored locally with the help of JavaScript's Local Storage API in the form of 'stringified' JSON tables. However, mODELcLASSjs will also provide the option to store data locally with IndexedDB, instead of Local Storage, or to store data remotely with the help of XHR messaging, for more demanding data management apps.

1. Model-Based Development

We must not confuse the term 'model' as used in the MVC paradigm, and adopted by many web development frameworks, and the term 'model' as used in UML and other modeling languages. While the former refers to the model classes of an app, the latter refers to the concept of a model either as a simplified description of some part of the real world, or as a design blueprint for construction.

In model-based engineering, models are the basis for designing and implementing a system, no matter if the system to be built is a software system or another kind of complex system such as a manufacturing machine, a car, or an organisation.

In model-based software development, we distinguish between three kinds of models:

  1. solution-independent domain models describing a specific part of the real-world and resulting from requirements and domain engineering in the system analysis, or inception, phase of a development project;

  2. platform-independent design models specifying a logical system design resulting from the design activities in the elaboration phase;

  3. platform-specific implementation models (including data models) as the result of technical system design in the implementation phase.

Domain models are the basis for designing a software system by making a platform-independent design model, which is in turn the basis for implementing a system by making an implementation model and encoding it in the language of the chosen platform. Concerning information modeling, we first make a domain information model, then we derive an information design model from it, and finally map the information design model to a data model for the chosen platform. With an object-oriented programming (OOP) approach, we encode this data model in the form of model classes, which are the basis for designing and implementing a data management user interface (UI).

mODELcLASSjs facilitates model-based app development by allowing a direct encoding of an information design model, including subtype/inheritance relationships.