<

Micro Frontends on the Client Side (ES Module)

Micro Frontends
Client Side
Es Module
Artifact

Happy New Year 2021. I look forward to your continued support this year. Recently, I've been working hard on aerobic exercise because I've gained weight.

In this article, I would like to talk about Micro Frontends with client-side integration, which I have been testing since last winter. The source code I tested is in the following repository.

https://github.com/silverbirder/micro-frontends-sample-code-6

Overview

The overall design image is as follows.

overview
overview

The server side only returns static content, and the application is built on the client side.

The construction method uses ES Module Import, which is a browser standard, and loads the Javascript (index.js, for bootstrap) necessary for the application.

The components of each team necessary for the UI are obtained via the API and rendered.

Javascript Module

I was thinking of including the following modules in Javascript (index.js).

  • DOM Parser
    • Get information of any element
  • Importer
    • Get any module
  • Router
    • Manage the routing of the entire web application
  • Worker
    • Manage processes to be executed in the background
  • EventHub
    • Control communication between modules

I was roughly thinking about these, but in the end, I only implemented Importer and Router (laughs). I ran out of energy.

Also, as a premise, I try to make each team's dependencies as independent as possible. In Micro Frontends, the benefits can be enjoyed only when they are independent, so I try to avoid commonalization of each team as much as possible.

Javascript Importer

As written in the overall design image, the Javascript Importer imports each team's component through the Component Discovery API. This configuration is similar to the Service Discovery Patterns of Microservices. By adopting this configuration, each team can be independent (non-dependent).

Javascript Router

The Router manages the entire application's routing. For example, / is the top page, and /s is the search page. We used vaadin/router for the Router, which is compatible with WebComponents, which we will explain later.

https://vaadin.com/router

In vaadin/router, we specify WebComponents for routing, and the specified WebComponents are obtained from the Importer.

Component

Components use a library based on WebComponents called LitElement. If each team imports their Component (including the LitElement library), it will result in duplicate loads and poor performance. We recommend pre-loading common libraries (with import maps, etc.).

Since it's WebComponents, it will be rendered in the Shadow DOM. The scope of CSS can be independent, so it won't affect others. However, if there is a Design System, such as wanting to unify the overall brand color, you need to (carefully) consider how to standardize the Component.

Build Package, Design System, Performance Metrics

Even if each team wants to be independent, I believe there are things that need to be standardized. What I'm assuming is as follows:

  • Design System
    • Unify the design of all components
  • Performance Metrics
    • Unify the rules of measurement indicators throughout
      • Rendering Time
      • Response Time
      • etc
  • Build Package
    • Unify how to handle libraries
      • External
      • ECM Version
      • etc

I'm just writing this, but I haven't actually tried it (laughs).

Impressions

As with server-side integration of Micro Frontends, a service that aggregates and provides Components was necessary for client-side integration. In this case, it's the Component Discovery API. This is a layer to reduce the dependency between Components, and I think it's almost essential in Micro Frontends.

Finally

Micro Frontends are important for integration patterns, but what's more important is how to decompose the domain. If this division is not appropriate, a case that must be standardized will inevitably be born, and I think the benefits of Micro Frontends cannot be utilized. I want to verify it at the production level soon, but I'm still reluctant to get started.

If it was helpful, support me with a ☕!

Share

Related tags

Micro Frontends
Artifact