Build Your First Component

So far we saw how components’ are specified in HTML and, they are stitched in a page to form a scenario. We also saw how to transition to different scenarios.

But a component is more than HTML in a real life. It has data and it has behavior. Our example “tasks.htm” can have the following specification:

  • “tasks.htm” will get the list of tasks from the server and display as a table.
  • When the user clicks on the title of the task, it will pop up a dialog showing the details of the task.
  • When the user clicks on the complete checkbox, the task will be marked completed in the server.

A component with data and behavior, as described above, is implemented using model, view, and controller (MVC) pattern. The MVC is followed by all frameworks in some form. In our framework, they are specified as follows:

MVC of UI Components (HTML, CSS, JSON, low-code JavaScript)

  • View: a view is specified in HTML. It has an associated JS file to render its dynamic parts. JS code is provided by the framework. You have the flexibility to extend the framework class. In 99% of cases, the framework code suffices without any change.
  • Model: a model has two parts, how it gets data and a runtime object to manage the data. The details of how to get data from the backend are specified in the JSON file as API-specification. The JavaScript model class provides methods to access, update data, listen for events. It also provides methods to rollback changes. The runtime class of the model is provided by the framework. The framework provides flexibility to add new models. In 99% of cases, the framework code suffices.
  • Controller: the controller JS class manages UI events and also supports the application specific logic. In our design, an application specific controller extends a framework class. A controller also receives all life cycle callbacks and they can be overridden. These callbacks are such as “modelAvailable”, “preSetup”, “previewViewShow”, “postViewShow”, etc.

In approach discussed above, as an application developer, you are not required to write much JavaScript code in UI . You can build 80–90% UI by simply specifying it in HTML, CSS, and JSON files. Since HTML, CSS and JS files are expressive, it is easy to code them. In a later blog, we will show how a UI Builder and an IDE like environment in the browser further simplifies authoring them.

The following table shows how much of the UI code you would write in a typical application.

Declarative (HTML, CSS, JSON) v/s JavaScript Code Distribution