-
Strong and enforced module boundaries:
Micro-frontends are aligned to domains e.g. Team Product would own the product
micro-frontend, Team search would own the search micro-frontend. These boundaries are
enforced by separation of codebases and infrastructure.
-
Independent deployments:
Each micro-frontend can be deployed independently via dedicated CI/CD pipelines. This allows
teams to deploy their changes without any dependencies on other teams.
-
Technology diversity:
Teams have autonomy to choose programming languages and frameworks that suits their needs
and/or capabilities.
-
Autonomous teams:
The pattern and its benefits enable teams to be autonomous in their decision-making and this
in turn enables faster mechanisms to deliver value to customers.
|
-
Multiple versions of same library or too many frameworks:
Teams may end up using different versions of the same library or too many frameworks. This
can lead to performance impacts on the cohesive website.
-
Inconsistent user experience:
Teams can end up creating inconsistent user experiences if proper tools, conventions and
communication are not in place. Different colour schemes, different fonts, different
components will lead to a disjointed experience.
-
Inter-frontend communication:
Micro-frontends need to communicate with each other. For user experience to be cohesive,
when user interacts with one micro-frontend, the other micro-frontend might require to be
updated. While there are
techniques each technique has its own trade-offs.
-
Increased network calls and payload size:
Each micro-frontend requires to make network calls and fetch data. This can lead to
increased network traffic from the website and increased payload size. Often the "Backend
For Frontend" a.k.a BFF pattern is used to mitigate this.
-
Increased operational overhead:
The number of services can grow drastically when pattern starts getting adopted across the
organisation. This would require more operational overhead to manage these services, and a
mature core platform team to help with that.
|
-
Design system library:
To support consistent user experience, a design system library can be created. This library
is a collection of reusable components, styles, and guidelines. In addition to this, the
library also enables a faster way to create experiences within the micro-frontends by
providing a set of pre-built components.
-
Strong and proactive FE community:
Autonomy has its benefit though can also lead to silos, and teams not sharing knowledge.
This manifests in how repositories shape as well as slower delivery as teams are not
leveraging each other's work. A strong and proactive FE community can help in sharing
knowledge, best practices, and tools.
-
Shared tools and plugins:
Logging, monitoring, authorisation, linting, testing, etc. are common concerns each
micro-frontend would need to address. Having shared tools and plugins (either open source,
or build specific to need of organisation) can help in reducing the overhead of each team
building these tools. As an enabler, this allows team to focus on delivery at hand, help
newer frontends to onboard faster, and security updates to these tools can be managed
centrally.
-
Lightweight governance:
As mentioned earlier, while autonomy brings in much-needed freedom, and ability to deliver
faster, it can also lead to an eventual chaos. Under light-weight governance autonomy can
flourish. Light-weight governance is a set of guardrails in form of principles, patterns and
sensible defaults. A few examples are as follows:
-
Tech Radar is a great example of
tool used for light-weight governance.
-
Restricting languages and frameworks to a set of approved ones. This allows teams to
still have a choices, and the company to have a way to avoid supporting too many
languages and frameworks.
-
For internally developed packages and dependencies, asking teams to keep major
versions in sync with the released version.
-
Self-service platform:
A team that would want to create a new micro-frontend should be able to do so without too
much dependency on other teams to stand up the infrastructure. A self-service platform is
offered by the core platform team within the organisation. The platform leverages
Infrastructure-as-Code (IaC) to allow teams to spin up (or create) environments, CI/CD
pipelines, observability, etc. around their micro-frontend.
|