Building UI Using Trillo UI Framework

So far we have been discussing about the framework of backend which can be used with UIs built using any other frameworks (AngularJS, ReactJS), the UI described here provides several benefits.

  • Using provided code and its documentation you can customize it easily and deliver your solution quickly.
  • You can customize it using a visual environment, which is freely available.
  • UI is based on open source technologies and primarily uses jQuery and Bootstrap. It is relatively easy to find resources with knowledge of these technologies.
  • UI development does not require any DevOp pipeline. Simply make changes and deploy on the runtime using a single click.
  • A separate sandbox is automatically used for each developer and environments such as “int”, “staging”, “production”. It allows you to make changes frequently and freely without breaking anything. It makes UI development iterative and you can do it in conjunction with the end-user.
  • UI follows a simple componentized model (inspired by web-component). It is modular and easy to customize.
  • It is a responsive Web UI with a smaller footprint and progressive design. It can run optimally on all devices (phone or tablets).

Let us get into the details of what constitutes the UI and how to customize it. We will be describing an InsureTech Suite UI whose repository location can be found at https://github.com/trilloapps/open_insure_tech.

The UI specific files are contained in the following directories.

  • The “view” directory contains HTML files of all views.
  • The “viewSpec” directory contains JSON files with model, API specification. In fact, our JSON file is capable of holding other metadata (discussed in the detail documentation).
  • The “static/css” directory contains the application specific CSS files.
  • The “static/js” directory contains the application specific JS files.
  • The “static/img” directory contains the image files.
  • The “static/font” directory contains font files.
  • The “_vendor” directory contains the references to the open source or external libraries.