authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Bob Myers

Bob Myers

Staff Engineer at Ellie Mae, Inc.

Bob Myers is a front-end architect who has consulted on large-scale projects in fields ranging from education and publishing to finance.

Expertise

Front-endHTML5Node.js
Share

Micro-frontend architecture is a design approach in which a front-end app is decomposed into individual, semi-independent “microapps” working loosely together. The micro-frontend concept is vaguely inspired by, and named after, microservices.

The benefits of the micro-frontend pattern include:

  1. Micro-frontend architectures may be simpler, and thus easier to reason about and manage.
  2. Independent development teams can collaborate on a front-end app more easily.
  3. They can provide a means for migrating from an “old” app by having a “new” app running side by side with it.

Although micro frontends have been getting a lot of attention lately, as of yet there is no single dominant implementation and no clear “best” micro-frontend framework. In fact, there is a variety of approaches depending on the objectives and requirements. See the bibliography for some of the better-known implementations.

In this article, we will skip over much of the theory of micro frontends. Here’s what we won’t cover:

  • “Slicing” an app into microapps
  • Deployment issues, including how micro frontends fit into a CI/CD model
  • Testing
  • Whether microapps should be in one-to-one alignment with microservices on the backend
  • Criticisms of the micro-frontend concept
  • The difference between micro frontends and a plain old component architecture

Instead, we will present a micro-frontend tutorial focusing on a concrete implementation, highlighting the important issues in micro-frontend architecture and their possible solutions.

Our implementation is called Yumcha. The literal meaning of “yum cha” in Cantonese is “drinking tea,” but its everyday meaning is “going out for dim sum.” The idea here is that the individual microapps within a macroapp (as we shall call the composed, top-level app) are analogous to the various baskets of bite-size portions brought out at a dim sum lunch.

Overview illustration of an example micro frontend–based app as described above.

We will sometimes refer to Yumcha as a “micro-frontend framework.” In today’s world, the term “framework” is usually used to refer to Angular, React, Vue.js, or other similar superstructures for web apps. We are not talking about a framework in that sense at all. We call Yumcha a framework just for the sake of convenience: It is actually more of a set of tools and a few thin layers for building micro frontend–based apps.

Micro-frontend Tutorial First Steps: Markup for a Composed App

Let’s dive in by thinking about how we might define a macroapp and the microapps that make it up. Markup has always been at the heart of the web. Our macroapp will therefore be specified by nothing more complicated than this markup:


  
    
  
  
    
Hello, micro-frontend app.

Defining our macroapp using markup gives us full access to the power of HTML and CSS to lay out and manage our microapps. For example, one microapp could sit on top of another one, or to its side, or be up in the corner of the page, or be in one pane of an accordion, or remain hidden until something happens, or stay in the background permanently.

We have named the custom element used for microapps because “portal” is a promising term for microapps used in the portal proposal, an early attempt at defining a standard HTML element for use in micro frontends.

Implementing the Custom Element

How should we implement ? Since it’s a custom element, as a web component, of course! We can choose from among a number of strong contenders for writing and compiling micro-frontend web components; here we will use LitElement, the latest iteration of the Polymer Project. LitElement supports TypeScript-based syntactic sugar, which handles most of the custom element boilerplate for us. To make available to our page, we have to include the relevant code as a

\n \n \n

Hello, micro-frontend app.

\n\n \n \n \n\n \n\n\n\n

Defining our macroapp using markup gives us full access to the power of HTML and CSS to lay out and manage our microapps. For example, one microapp could sit on top of another one, or to its side, or be up in the corner of the page, or be in one pane of an accordion, or remain hidden until something happens, or stay in the background permanently.

\n\n

We have named the custom element used for microapps because “portal” is a promising term for microapps used in the portal proposal, an early attempt at defining a standard HTML element for use in micro frontends.

\n\n

Implementing the Custom Element

\n\n

How should we implement ? Since it’s a custom element, as a web component, of course! We can choose from among a number of strong contenders for writing and compiling micro-frontend web components; here we will use LitElement, the latest iteration of the Polymer Project. LitElement supports TypeScript-based syntactic sugar, which handles most of the custom element boilerplate for us. To make available to our page, we have to include the relevant code as a