Micro-Frontends

Last updated: 2023-01-12

The concept of Micro-frontends is a spill over of the success in Web application maintenance by using Micro-services. Instead of building a large, monolithic application that covers all UX elements of all web pages of a website, small applications, widgets, are built, each one just controlling one UX element used in one or more pages.

Concept & Implementation

The basic of a Micro-frontend UX element, we call it widget, is the independency of other elements on a page. Although these independence may be achievable on functional level, it won't be possible on design level. Nevertheless, dependency on design level can be reduced significantly.

Simaec.net uses widgets extensively. For example the feedback form linked below is such an element. It is a UX element built with Svelte and can be plugged into any page.

On a page, or website, that uses different widgets, each widget can be updated without affecting the other widgets. Updating a widget won't require full compilation of the whole page or website reducing the complexity of rolling out new features.

Pitfalls & Limitations

Widgets which depend on the state of other widgets or page/website state will be dependent on external elements and aren't self-sufficient. We will explore this limitation in more details later.

Even if the functionality may be self-sufficient, the UX element is part of a web page and therefore may depend on the style of the page determined by a global css. A widget can have their own styling within the widget. Nevertheless, applying style within a widget most probably will end up in inline style or dynamically generated styles which interferes with strict CSP rules (Content Security Policy).

The widget's content is JS driven which may not be indexable by search engines. Don't use widgets for content.

Micro-Services

Small: Could you rewrite it in a week or two?
Focused on a single task: Accomplishes one task when viewed from Outside
Aligned with a bounded context: A Bounded Context is a defined part of software where particular terms, definitions and rules apply in a consistent way.
Autonomy: We can change implementation without coordinating with others.
Independently deployable: A team building a micro-service can decide when to deploy a micro-service. Build, test and deploy independently.
Loosely Coupled: The interface to a Micro-service is a "Public" API. Maintain multiple versions.