Microfrontends in OneCX

Overview

A Microfrontend is a OneCX App, often considered as a UI App, which is a part of the OneCX Application. It is responsible for exposing modules and Remote Components via a remote entry file that can be used by other UI Apps. The difference between the standard UI application and a Microfrontend is that Microfrontend is never accessed directly, but instead used by the host application.

Why Microfrontends

To precisely explain the purpose of using Microfrontends, it is crucial to become familiar with the client-side perspective of each Microfrontend.

Microfrontend Clients

As previously stated, each Microfrontend is exposing a remote entry file that can be accessed by any UI App. This remote entry file should contain all the data required to display the desired pieces of user interface. In the context of OneCX platform, this file should expose the following types of content:

  • Module: During workspace construction, the Shell creates routing rules and associates a module, from the remote entry file, with a specific route. Whenever a user navigates to that route, the module is loaded using the remote entry file to display desired content in the content pane of the page.

  • Remote Component: A component exposed via remote entry file is loaded onto a page on demand using Slot Component.

Module type is suited for displaying whole UI modules containing many pages and its own routing rules, whereas Remote Component is suited for smaller pieces of UI, which are easily replaceable and reusable within the platform. It is important to know that Remote Components and Modules are both exposed via a Microfrontend through a remote entry file. More on the topic of Remote Components can be found here.

Scaled Agile

The main reason for using the Microfrontends approach is to allow teams to develop user interfaces in a scaled agile manner. It is best suited for large organizations that want to create user interfaces using many independent teams. In such cases, it is not possible to develop a UI monolith application efficiently. With the Microfrontends approach, OneCX platform is delivering a solution to allow those teams to work on their own pieces of user interfaces while preserving a common ground and allowing them to easily integrate with each other.

In OneCX platform context, a Microfrontend is part of the Application which can be integrated using OneCX Core Applications in a matter of seconds and customized depending on the users needs. Each Microfrontend is independent of others and can be responsible for a subset of the functionalities needed for the organization. The technical details of the displayed content within a Module or Remote Component exposed via Microfrontend are only relevant for the developers responsible for that Application.

Exposing User Interfaces

The mechanism of displaying Microfrontend’s content dynamically in OneCX platform context is related to the content type and expose method. In the previous section, differences between content types were explained. In terms of the expose method, there are 2 options:

  • Angular: Angular components and modules are exposed.

  • Webcomponent: Components and modules are wrapped as Web Components and then exposed.

It is NOT recommended to use the Angular expose method. Doing so restrains the platform from using many frameworks with different versions, which means that all Microfrontends would need to use the same technology and version.

For more information about Microfrontend content loading, please refer here.

Useful Resources