Model-based development

of

web apps

with

mODELvIEWjs

Gerd Wagner

Chair of Internet Technology

BTU Cottbus-Senftenberg

What is "model-based"?

Think of your app as consisting of (1) a "model" (actually a set of model classes), (2) some form of storage management and (3) a user interface ("view").

  • Define model classes with rich semantics in the form of meta-information
  • Exploit the meta-information provided in model classes as much as possible:
    • when checking constraints in the UI (on input and before submit) and in storage management (before save)
    • for generating default user interfaces for CRUD operations
    • for generating custom user interfaces for CRUD operations
    • for ...

Model Classes with Rich Semantics

  • Declare the standard ID (or primary key) attribute of a class
  • Declare the range (String, NonEmptyString, PositiveInteger, ...) of all properties
  • Declare all relevant types of property constraints:
    • mandatory value constraints
    • string length constraints
    • interval constraints
    • ...

What is mODELvIEWjs?

A JS library for model-based web app development ...

  • based on the meta-classes dATAtYPE, eNUMERATION, mODELcLASS and vIEWcLASS (names with inverse camel case)
  • allowing class definitions with property declarations including many kinds of constraints
  • providing a generic check method for validating property constraints
  • providing the generic storage management (CRUD) methods add, retrieve, update and destroy
  • generating CRUD user interfaces ("views") for rapid prototyping
  • avoiding boilerplate code in the model and view layers of an app
  • doing the object-to-storage mapping ("ORM")

How to get mODELvIEWjs

web-engineering.info

... is a non-for-profit developer community platform committed to supporting both

  • learning developers with high-quality learning resources, and
  • authors of learning materials

Join us as an author of tutorials, books, language summary articles, cheat sheets, posters, and blog articles.

Distribution Architectures (1)

mODELvIEWjs supports three kinds of distribution architectures:

  • Front-end apps with local storage
  • Front-end apps with cloud storage (like Parse.com or Firebase
  • Distributed apps with app server storage, based on NodeJS

Distribution Architectures (2)

Architectures

Good bye boilerplate!

AngularJSmODELvIEWjs
App with 1 model class370 LoC30 LoC
App with 3 model classes1540 LoC65 LoC

Example App with 1 model class

The model class Person has a mandatory attribute birthDate and an optional attribute deathDate:

Person = new mODELcLASS({
  typeName: "Person",
  properties: {
    "personId": {range:"NonNegativeInteger", isStandardId: true, 
                 label:"Person ID"},
    "name": {range:"NonEmptyString", min: 2, max: 20, label:"Name"},
    "birthDate": {range: "Date", label:"Date of birth"},
    "deathDate": {range: "Date", optional: true, label:"Date of death"}
  }
});

App with 3 model classes

Publisher-Book-Author

The Book model class

Book = new mODELcLASS({
  typeName: "Book",
  properties: {
    "isbn": {range:"NonEmptyString", isStandardId: true, label:"ISBN"},
    "title": {range:"NonEmptyString", min: 2, max: 50, label:"Title"},
    "year": {range:"Integer", min: 1459, max: util.nextYear(), label:"Year"},
    "publisher": {range: Publisher, optional: true, label:"Publisher"},
    "authors": {range: Author, minCard: 1, maxCard: Infinity, label:"Authors"}
  }
});

Conclusions

A model-based approach helps ...

  • avoiding a lot of boilerplate code
  • creating a consistent UI
  • doing the object-to-storage mapping