Micro-Frontends

Motivation

Since most of my work with FinTech is scaling up their eCommerce Business. I need to ensure my work have a strong foundation. The Micro-Frontends approach allow for more flexible and scalable code development across my work and will enable each team to work independently. This scale-up work is normally part of a bigger programme that includes things like a search engine optimization(SEO) of an online store, a strong marketing strategy and a scale-up of the customer service.

Meaning we should only consider this approach for FinTech of a certain dimension and organization. Some times it's better to have a large frontend monolith application.

Introduction

The idea behind Micro-Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in.

Each team would be responsible for the creation of the UI portion of the application, styling, code, layout, architecture, backend, devops, and connection to the database via Rest APIs. It has its own build and test pipelines and CI/CD procedures. This enables the following:

• Better scaling capabilities of the frontend application
• Fewer communication issues between the multiple teams for one feature change
• Reduced code and testing complexity
• Application is more resilient to non-working or broken portions
• Faster Feature Rollouts

Architecture

The Module Federation lets us combine separate builds to form a single application(Host App). This lets us develop and deploy modules independently(Micro App) and combine them at runtime. Any JavaScript application that is bundled with Webpack 5.0 (Module Federation is a plugin added to the Webpack) or greater can dynamically load or share code and dependencies with any other at runtime.

In summary:

• Module Federation is a plugin that is added to Webpack. This gives you the freedom and flexibility to build our project the way we want.
• It integrates components at Run-Time: We do not have to worry about deployments or dependencies of other Micro Apps.

We need to familiarize ourself with some terminology when using Webpack Module Federation:

• A host: a Webpack build that is initialized first during a page load (when the onLoad event is triggered)
• A remote: another Webpack build, where part of it is being consumed by a “host”
• Bidirectional-hosts: when a bundle or Webpack build can work as a host or as a remote. Either consuming other applications or being consumed by others — at runtime.
• Vendor Federation: Vendor Federation is an important feature that aids in solving a significant performance issue in micro-frontend architecture. Regardless of where the modules are loaded from, it enables all or part of a remote or host’s npm modules to share at runtime declaratively.

Conclusion

Webpack Module Federation plugin is a feature that enables loading separately compiled applications at runtime and allows sharing of common dependencies.It is a highly beneficial approch to consider, especially with its scalability in sharing code among independent applications, which is bound to improve the overall performance. Making the Module Federation plugin the perfect candidate to implement a Micro-Frontends architecture.

---

PoC(Proof of Concept) source code:

• app(Host App)
• backscreen(Micro App)
• frontscreen(Micro App)

This PoC was developed using React TypeScript with the Chakra UI component library.

References:
Micro-Frontends
Why webpack
Module-Federation examples
Webpack 5 Module Federation a game changer in javascript architecture
Vulnerability Scanning Tools