Home

The Cyclos 4 user interface is built with Angular and Bootstrap, using the ngx-bootstrap integration library. Some advanced Angular concepts are used across the application, so it is advised for readers to have a good look on the Angular documentation.

We strive to follow the Angular best practices and style guide, except for the app- prefix on all component selectors. So, if you need to customize the application, like adding new custom functionality, implement some missing functionality, etc, it should be a straight forward process: fork the repository, add the Angular components / modules and declare them in the existing Angular modules.

Design decisions

• One aspect we don't use from Angular is the application translation (i18n). Using the built-in solution has 2 drawbacks for us: the application is compiled for each translation (which would require systems using multiple translations to serve multiple copies of the application) and it would be harder to pick the correct language from the Cyclos configuration on runtime, as it would require us to assume a deployment scheme for the multiple languages. Instead, we use (https://github.com/cyclosproject/ng-translation-gen) to handle translations. It allows both a compile-time consistency check, as it generates a class that has all the translations, and to change the translation in runtime;

• All components use changeDetection = OnPush. This prevents extra CPU power to be used on pages to check whether a component state has changed. As such, whenever a component field is displayed in the template, it either must be affected by a browser event (click, change, etc), be in an Observable / Subject / BehaviorSubject field and used in conjunction with the async pipe (example: {{ title$ | async }}). Such variables, by convention, ends with a $;

• Angular forms: we opt-in to use reactive forms instead of template-driven because we can have more control and allow us managing those complicated cases we faced.

• Starting with cyclos4-ui version 3 and Cyclos 4.14, the frontend will be bundled in Cyclos. This means that clients will no longer need to deploy the frontend separatedly. There are some interesting consequences, such as:

  • The theme can be customized in Cyclos. For this, is compiled on runtime by Cyclos using SASS. This prevents us to use component styles, because such files are processed by the Angular compiler and injected directly on the index page. Instead, the component styles, if any, must be placed in a proper file in the src/styles folder.

Other application aspects

Below are several aspects of the application to take into account when developing additional functionality:

• Project structure
• Angular modules
• Base component hierarchy