Skip to content

Front-End UI Framework

Context and Problem Statement

There are a number of UI frameworks with different concepts and ideas available. To reach an similar behavior for all UI elements and same UX, it is necessary to chose common technology.

The expectation is that all UI elements have similar look and feel (e.g., all buttons look similar or all hover information disappears after 3 seconds). Thus, the use of a common UI framework such as MVC, Angular or React is favorable.

Additionally, the developer shall use the same component libraries on top of the chosen UI framework such as Angular elements.

Decision Drivers

  • No need to develop UI elements multiple times
  • Same look & feel for applications
  • In line with UX decisions
  • In order to increaing development, basic project should be created quickly (still we should use licensed abp framework auto code generation tools for ui)
  • Each module should have one dedicated code repository for ui
  • Each module should able run standalone
  • Same CI pipeline should create npm package and container image
  • 1 container image need to be created per module

Considered Options

Decision Outcome

Chosen option: "Razor Pages" because,

  • It is more easy to develop at time being.

Pros and Cons of the Options

Package registry based frontend

Positive:

  • same development logic with MVC UI
  • each module creates its own dedicated npm package
  • should only 1 container image per module

Negative:

  • continuous deploy PSSX if there is an updated for modules (npm packages should update automatically)
  • updating to higher version for each module can be problem
    • many npm packages
    • 1 image for deploy

Federation based frontend

Positive:

  • semantic version bumps can be determined automatically based on the types of commits landed
  • no packages, no extra effort for checking if there is an package update
  • if there is a crash in one module, PSSX runs anyway

Negative: * Lack of documentation * https://www.angulararchitects.io/en/blog/pitfalls-with-module-federation-and-angular/ * N many images for deploy * Each modules deploys itself to an environment