Micro Frontends Patterns#9: Client Side Composition

The next pattern is called Client Side Composition, but before that, let's talk about the concept of Fragments.

What are Fragments?

Fragments is a element that builds a page in Micro Frontends.

The above is borrowed from micro-frontends.org, and each of these different colored elements is a Fragment. This is pretty close to what we imagine the name Micro Frontends.

Fragments are not just UI components, but rather elements which provide some functionality for the business domain. In the example above, there are Team Product, Team Checkout, and Team Inspire, with separate development teams and deployments, each of which is a vertical decomposition.

Fragments are not applications on their own, so there must be a composition layer somewhere. In the example above, Team Product is the owner of the "Product Detail Page", which is combined with other Fragments. Client Side Composition, which we will now discuss, is one of those composition patterns.

Fragments can be called in different ways depending on the Micro Frontends library. For example, Podium uses Podlets, OpenComponents uses Components, and PuzzleJs and Tailor use Fragments. In this article, I will refer to the aforementioned concepts as Fragments.

What is Client Side Composition?

Client Side Composition is one of the patterns that combine Fragments on client-side, and as the name suggests.

It uses HTML, CSS, and JavaScript to render Fragments at runtime. Let's look at some concrete examples.

Web Components

This is a pattern that uses Web Components.

Prepare the following markup, and JavaScript on the client-side render the UI.

<my-fragment></my-fragment>

class MyFragment extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h1>Hello world</h1>`;
  }
}

customElements.define('my-fragment', MyFragment);

Framework Specific

This is the pattern of using some framework or library, for example, React can render Fragments for markup like this, which is not so different from Web Components.

<div id="app"></div>

const MyFragment = () => <h1>Hello, world</h1>;
React.render(<MyFragment />, document.getElementById('app'));

Using the library

There are several libraries that enable Client Side Composition, most of them are in the style of using Fragments in the App Shell, and some of them provide CLI and so on to make the development more efficient.

• single-spa/single-spa
• frintjs/frint
• smapiot/piral

Pros and Cons

Client Side Composition is a simple Micro Frontends. It can be used by simply loading markup and JavaScript, and can be achieved with familiar web standard technologies. (Web Components has the disadvantage that there is no standard way to do SSR, so it is difficult to adopt if you want to do SSR in the future).

However, since FCP and TTI tend to be large, performance considerations such as Lazy load are necessary. Also, if each Fragments uses a framework, you need to be careful about the bundle size. In some cases, libraries that provide an App Shell layer may be considered to cover such details.

Summary

We have seen the Composition pattern called Client Side Composition. I think the runtime composition is easy to understand and is a technique that Frontend engineers are familiar with.