The concept of Microfrontends is a spill over of the success in Web application maintenance by using Microservices. 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.

The key is independent compilation AND deployment

Concept & Implementation

The basic of a Microfrontend 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. 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.

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