Micro frontends

Micro frontends can be loaded into the shell application by the use of Webpack and Module federation. Micro frontends must be implemented as Web Components as this makes it possible to load micro frontends created in different frameworks into the shell app which is made in Angular.

Disclaimer, the micro frontends that composes Common Workplace are developed with the intent to run inside the shell application kam-ui and is not supported to run in context of other shell applications.

Indholdsfortegnelse

Overview of Common Workplace

Common Workplace consists of the shell application: kam-ui and three micro frontends: care team, plandefinition and questionnaire. The Common Workplace exposes a micro frontend called Kam-pickers which contains a number of generic pickers which can be used by micro frontends loaded into the shell application kam-ui. Kam-pickers

Metadata for loading micro frontends in the shell application

The micro frontends are loaded into the shell application using a configuration file like the one below.

Example of metadata

[
  {
    "id": "careteam",
    "displayName": "Care teams",
    "iconName": "group",
    "route": "administration/careteam",
    "requiredRoles": ["Care Team Administrator"],
    "webComponentConfig": {
      "tag": "kam-mf-careteam",
      "url": ["http://localhost:3000/remoteEntry.js"],
      "exposedModule": "./WebComponent",
      "microFrontendName": "kamMfCareteam",
      "integrationType": "WEBCOMPONENT"
    }
  }
  ... // other micro frontends
]

Explanation

Metadata

• Id: unique id for micro frontend

• displayName: The menu item name

• iconName: name of icon (only support https://fonts.google.com/icons )

• route: url path to the micro frontend in the shell application

• requiredRoles: the required role to access the micro frontend

• webComponentConfig:

  • tag: The html tag for the web component

  • url: Script file needed for the micro frontend

  • exposedModule: Name for module foderation in webpack.config file

  • microFrontendName: the name specified in webpack.config for module federation

The shell application dynamically generate the navigation menu based on the content of the configuration file. Which menu items will be available to a specific user is determined by the users context and the required roles specified for the individual micro frontends.

Events

The micro frontends are as self contained as possible. The intent was to keep the interface between the shell application and the micro frontends as small as possible to make development easier and less error prone to changes.

It is however impossible for shell and micro frontend to be completely seperated as the shell must have some knowledge about the micro frontend and vice versa. The meta data, previously mentioned, is an example of the shell knowing how the micro frontend has declared its Web Component, and how it is exposed. A need also arose for having micro frontends handle events from the shell, when navigation needed to be reset on micro frontend clicks. The table below describes the event interface of the shell application kam-ui.

{
  microFrontendName: string;
}

Routing

The shell applications routing handles the login flow and navigation to the micro frontends by the navigation menu og direct url to the micro frontend like “<baseurl>/administration/plandefinition”. There is no support for deep url inside a micro frontend, this means that even though the micro frontend has routing internally the browser url will still be like this “<baseurl>/administration/plandefinition” when user navigates in the micro frontend.

When navigating back using the browser or back button it is expected to only navigate back inside the micro frontend. By default this is not the case, and both the micro frontend and shell are navigated back. The only way to correct the navigation in micro frontends is to block location popstate in the shell application. This comes however with the cost of disabling forward navigation in the application.

Styles

All micro frontends must be self contained regarding their styling. If a micro frontend is depending on some framework using global styles, it is the developer of the micro frontend responsibility to scope it. Below is a non-exhaustive list of approaches for scoping styling.

• Wrapping the micro frontend in a Shadow DOM

• Prefixing all styles. In component based frameworks this could be achieved by using scoped styles in the root component (ex. Scoped styles in Vue ).

• Last resort is removing global styles programmatically using the DOM API

• Using a framework that is not dependent and does not use global styles

Shell application - Kam-ui

Kam-ui is the shell application of KAM. It handles all authentication of the app and authorization to access each micro frontend. In kam-ui an user can select a context with roles which allow them access to specific micro frontends. The user can access micro frontends by navigating to “Administrativt” in the top toolbar and selecting a micro frontend from the left navbar.

Calling FUT infrastructure from micro frontend

The shell application handles authentication and stores the access token in Session storage. When a micro frontend needs to call the infrastructure the access token can be fetched from Session Storage by the key “access_token”.

Existing micro frontends loaded into to the shell application

Kam-mf-plan-definition

Kam-mf-plan-definition is a micro frontend for creating, editing and viewing plan definitions. A plan definition consists of nested actions that each point to an activity intended for a citizen to perform. A user can create these activities and structure them to their liking. Furthermore they can move actions, set relationships between and timing on them. Possible activity types are:

Kam-mf-care-team

Kam-mf-care-team is a micro frontend for creating and managing care teams that are part of the users selected context. The micro frontend allows exporting all care teams to a csv-file.

Kam-mf-questionnaire

Kam-mf-care-team is a micro frontend for creating, managing and viewing questionnaires intended for citizens to complete. The questionnaires can be used in plans or plan definitions.