Micro Frontends – Discover new frontend development experiences

October 7, 2021

iauro Team

Contributing immensely to the global software solutions ecosystem. DevOps | Microservices | Microfrontend | DesignThinking LinkedIn

Micro frontend

From a business model perspective, the micro-interface architecture brings domain-centric design to the front-end. The front-end can be split into independent micro-applications, each with its own downstream services that interact with the corresponding back-end for the front-end. This allows autonomous teams to focus on change in their business with less impact on other teams.

Moreover, the delivery team can focus on building and maintaining frontend modules with clear boundaries that minimize communication between domains. These clear business boundaries and extremely low interconnectivity satisfy the requirements of both product managers and business analysts. Business modules are sufficiently independent, which reduces their instability and unpredictability.

With regard to the development model, the team can make decisions independently as the repositories, pipelines, artifacts, and environments are completely separate, as shown in the diagram below. By doing this, the team can get closer to ideal shipping conditions faster: an independent codebase, familiar technology stacks, simplified rules, and efficient delivery processes.

When it comes to managing service assets, independent environments have their own artifacts, so each micro applications environment is isolated from the others. Thus, the regression test for the entire monolithic environment is split into micro applications. Hence, each team only needs to maintain their own environment and take responsibility for their own incidents. They also have autonomy for their on-call rotation.

Here’s an example of a micro frontend system and its key components. Note that the recommendation function is isolated in the system so that the custodian team can maintain it with complete autonomy.

Another concept worth mentioning is the import map component at the bottom left of the diagram. An import map is essentially a mechanism for dynamically loading JavaScript files, and can be thought of as an index of the last address when the system receives a request from the user. By using the import map, our portal site can attract more teams and thus enhance its functionality.

Advantages

Micro interfaces have changed the game for collaborative projects between teams for the following reasons:
Increases the stability and predictability of project implementation.
Provides team autonomy throughout the project lifecycle
Minimizes unnecessary duplication of custody between teams

In addition, the import map is designed as a mechanism for dynamically loading JS. It is better to involve people, teams, and even third parties to become participants. This can speed up product delivery and take our products to the next level.

Lessons learned

Micro interfaces cannot solve all problems. They can even increase performance problems, place higher demands on DevOps, and make management more difficult.

Performance

Introducing micro-interfaces requires you to load the framework before loading the page and then load the target component and micro-app. This will undoubtedly increase the load. Taking the largest-contentful-paint as an example, it increases by about 0.2 ~ 1.2 seconds without any performance optimization.

To reduce load times, we needed to increase the loading speed of each JS file by minimizing artifacts, tree shaking, and caching at the Cloudfront and browser levels. We also needed to maximize the ability to load parallel JS to provide functionality.

DevOps

The micro-interface architecture places higher demands on the capabilities of the CD (continuous deployment) team. Better automation and Infrastructure as Code practice are required for the micro application to reference the latest version in the pipeline. On top of that, highly automated methods require a higher level of test coverage to provide sufficient confidence during continuous integration and continuous delivery.

Complexity of management

While the micro-application architecture solves unnecessary interfacing issues, it also increases the complexity of managing the system, for example by causing CSS / JS conflicts between applications or in terms of consistency between applications. However, we have always believed

that you should not sacrifice a smooth user experience in pursuit of a high degree of autonomy. Hence, we need to establish standard design guidelines such as a uniform naming convention, an appropriate color palette, and a similar error handling or user experience pattern.

Ultimately, despite some added complexity, we found that micro-interface architecture remains the best way to promote intergroup collaboration without losing team autonomy.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe for updates