View on GitHub

YAMF

A JavaScript framework for data-centric enterprise applications.

Download this project as a .zip file Download this project as a tar.gz file

Introduction

There are a number of JavaScript frameworks that eases the task of UI development. However, most of these frameworks have functionalities revolving around the creation of views, wiring views together with event handling and binding these views with data. The multitude of features supported by these frameworks are sufficient for development of websites, where the user rarely updates the data presented to him. But when it comes to enterprise applications, the data itself is the most important entity and changes to this data govern the behaviour of views presented to the user. In this situation, it is desirable to represent page data in a structured format, dividing it into seperate functional entities rather than mere JSON objects. This is what YAMF tries to solve.

Suppose your application has a customers table in the DB. A convenient way of connecting to this DB, in the backend application layer, would be to use a persistence provider like Hibernate and map the entire DB structure as entity classes. Services related to a customer, like retrieving sales orders of the customer, can be implemented as a service class that accepts a customer model instance as its input. YAMF helps a frontend engineer achieve the same structure in JavaScript. Functional entities, like customers, can be defined as JavaScript classes along with their related services. Eg. Customer can be registered as a model, which will provide a Customer class that can be used to create instances of customers. Services related to a single customer can be registered as functions on the prototype of this class. Functions that are more suited for the customer class as a whole rather than an individual customer, like fetching all active customers, can be defined as static methods available directly on the Customer class.

Model

Model is the representation of a functional entity in the application, like Customers. YAMF models help the user to represent the data entity along with its related functionality as a JavaScript class.

Usecase

There is a Customer table in the backend with the following fields

  • ID - Number
  • First Name - Text
  • Last Name - Text
  • Domains - Multiple value field, whose data is available in CSV format

In this tutorial we try to represent this Customer table as a class in frontend. The input to be passed during creation of the instance is assumed to be a JSON object with the fields - id, firstname, lastname and domains. The following features are expected for the Customer class:

  1. Getters and setters for every field, like getCustomerId, setDomains etc
    • The CSV data in domains should be available as an array in when accessed via its getter
  2. A field fullName that concatenates the first and last names
    • Getters and setters should be available for this field
    • Any change to first or last name should be reflected while retrieving fullName
    • Any attempt to set full name should make appropriate changes in first and last name
  3. It should be possible to retrieve the current state of the instance in the same format in which the input was provided
    • When data is retrieved, the field domains should have its value in CSV format

In the following sections, we'll try to achieve this functionality using YAMF

1. Creating the model class

A model class is created by invoking the function yam.model.create() with a configuration object. The configuration object is a JSON object with the following mandatory properties

  • name : Every model will be registered with a unique name during initialization. This name has to be provided here.
  • fieldsMap : JSON object in with definitions for every field in the model. We will cover this in detail later.
Other than the above mentioned properties there are some other optional properties also which will be dealt with later, as we progress through the usecase.

1.1. fieldsMap property

fieldsMap should be a JSON object containing in which every model field is defined. The format for this JSON object is shown below

Services