Many relevant businesses have already migrated to micro frontends. Companies like Microsoft, Verizon, Volkswagen, Pfizer, Sony, and Amazon are reaping the benefits of development and delivery at scale. In this article, we reveal some of the pain points that drove the migration to micro frontends for such organizations, based on our direct experience.
What are Micro Frontends?
Micro frontends are an architectural and organizational framework for designing web applications composed of smaller feature apps, which are owned by independent teams. When migrating a product to micro frontends, you will break up a monolith into fragments that carry meaningful business value. We call these fragments “feature apps.”
NEW RESEARCH: LEARN HOW DECISION-MAKERS ARE PRIORITIZING DIGITAL INITIATIVES IN 2024.
Each feature app is owned by a dedicated team that eventually specializes in maximizing the business value they are responsible for. Feature teams enjoy a healthy mix of freedom and solution-level agreements that produce a meaningful mini-application with a lifecycle of its own.
Feature apps integrate into the whole at runtime, creating incredible opportunities in digital presence dynamics. We will expand on some of those opportunities in this post.
What are Micro Frontends Good For (And When to Stay Away)?
Large-scale projects with a nationwide or international audience are an excellent fit for micro frontends. Applications or websites serviced by large or many teams can use micro frontends as a way to organically distribute areas of responsibility. If your organization already uses SAFe or maintains Scrum of Scrums, you show project management maturity aligned with the benefits of micro frontends. In addition, organizations that employ a CMS to deliver customized or remote controlled web/desktop/mobile experience can truly maximize the value proposition of this flexible framework.
However, tightly-focused products that serve one or two features to a limited number of users should probably not endeavor the transition to micro frontends. Just like new startups usually don’t require a suite of C-level executives, the overhead of running micro frontends may be overwhelming. While micro frontends might ruin a small organization’s agility, large ones thrive on it.
While micro frontends might ruin a small organization’s agility, large ones thrive on it.
9 Common Problems Solved by Micro Frontends
A transition to micro frontends isn’t merely a change of technology but also an organizational change. Unfortunately, that makes it time-consuming and expensive. It also requires experienced leadership to execute. However, the benefits are well worth the effort.
Here are some common problems that successful businesses have solved with micro frontends.
1. Slow Release Turnaround
Does it take a while for your business to release new features and improvements? That’s often due to complex integration and build processes that take a long time to test, review, run, and roll out. Monoliths are infamous for atrociously complex and slow release cycles.
Moreover, a monolith builds the entire system every time, even for minor bug fixes and improvements. Introducing a regression in such an application will require replacing the entire application.
With micro frontends, builds are distributed for each feature app. Because feature apps are independently hosted (usually in a CDN) and integrated at runtime, we get to release a much smaller part of the entire solution.
The current App Store guidelines allow for over-the-air fixes of hybrid mobile apps. Micro frontends are a great environment, enabling sequential app improvements.
For one of our Fortune 1000 clients, we created a self-healing infrastructure. Newly introduced bugs could automatically be reverted to the last known working feature version. Such a capability dramatically improved customer retention and satisfaction.
2. Inconsistent Brand Identity
One of the world’s most desirable premium car manufacturers has an interesting but all too familiar problem. Since they operate in 160+ markets, working with many vendors across the globe makes it different to maintain brand consistency. So naturally, other challenges on that spectrum include avoiding costly duplication of work, knowledge sharing, and enforcing standards.
The solution lies in creating a shared library of feature apps that market managers can effortlessly explore, learn from, and implement. Then, just like downloading an app to a phone, a market manager can opt-in to the Car Configurator app, 3D Visualization app, and even the Site Navigation app.
The Feature-as-a-Service model doubles down on runtime integration and automatic dependency resolution. Such an architecture is an excellent setup for centrally managing brand identity components as it gets reused across all feature apps without worrying about one-off violations.
Furthermore, each feature app is versioned and deployed to the CDN with its Cloud stack. That separation of deployment gives the organization unique visibility into the operating costs per feature and market.
3. Satisfying All User Personas
A leader in the telecommunication industry provides a somewhat technical product to millions of non-tech-savvy customers. Unfortunately, in many cases, this meant compromise at the expense of knowledgeable users who make up the majority of early adopters and promoters.
The company decided to launch a design overhaul together with a few new features. However, the product leadership feared technically insecure users would find navigating the dated but familiar user interfaces difficult. Negative feedback could be devastating for the user base that relies heavily on community reviews.
A year-long rewrite decoupled the monolith into dozens of platform-agnostic feature apps targeted for the flagship mobile app, the desktop companion, and the PWA website. The final experience is dynamically configured from a headless CMS, which allows for just-in-time customizations.
Since feature apps are integrated at runtime, this telecom’s clients can now opt-in to new features or upcoming feature versions. In addition, the company can easily engage with beta testers to prepare the app for the most sensitive users.
Micro frontends allowed this telecom organization to confidently manage customer expectations and satisfaction, which resulted in dramatic review rate improvement in all distribution stores.
4. Longer Development Periods
It’s common for monolithic architectures to require extra time for planned releases. Unfortunately, delays in even the most irrelevant increments can cause the entire product to follow suit. That’s where decoupled architectures excel.
Micro frontends are released bit by bit or feature by feature. So, for example, the release of a new version of the User Profile Management feature doesn’t get delayed because of an outstanding regression in the Video Player feature.
Moreover, Feature Apps maintainers already specialize in respective features. Therefore, they are not just technical experts in the area but also understand the business needs well. That combination guarantees efficiency and quality.
Feature app maintainers are not just technical experts but also understand the business needs well, leading to higher efficiency and quality.
5. Steep Learning Curve
Just like monoliths take a toll on development efficiency, they require a steeper learning curve as new team members need to learn about system-level complexities. Therefore, onboarding contractors can be exceptionally costly.
Tightly focused feature apps allow newly onboarded people to laser focus on the areas of responsibility. In addition, feature apps are independent and agnostic of the surrounding features, making it easier to contextualize learnings.
One of the leading healthcare companies implemented proprietary technologies in their flagship monolith product. As a result, they reported an average of two months of onboarding time for new team members.
The migration to micro frontends focused on making it fast and easy for people to be efficient, even in week 1 with the company and the project. Doubling down on industry standards allowed new contributors to leverage the skillsets that they already had. Moreover, they got to enjoy a democratized workplace as they were allowed to set up the environment to match their habits and likings. As a result, this boosted productivity and satisfaction. Additionally, it improved knowledge sharing and cross-team growth.
6. Expensive Tech Migrations
One of the world’s largest retailers is a company headquartered in Tokyo. It’s in their DNA to always be far ahead of the standards with everything they do, including the e-commerce experience. Technology was deemed the culprit for performance issues, so the decision was to change it in two-year increments. As migrations are always expensive, the company decided that the cart & checkout experience would be the scope of the new tech migration cycle.
Luckily, the company was open to new ideas, so we suggested a decentralized micro frontends architecture. Decoupling the monolith into reusable feature apps took as long as any migration would do — in this case, about a year. However, the remaining features took months and even weeks, as code reuse allowed multiple teams to work in parallel without worrying about integration.
Six years later, the company continues to employ the same technology. The efficiency boost of not migrating frequently leads to new experiences and experiments. The added comfort also allowed the organization to improve the bottom line significantly.
7. High Engineering Expenses
The previous story showed how micro frontends make apps migration-friendly, but that’s now the only significant benefit that the company could capture.
Since the time was limited, a small but highly experienced tactical team created the core technology and distributed it to 200 engineers for feature app development. Focusing the demanding tasks on the experienced experts allowed other teams to not depend on senior engineers.
As a result, talent management acquired added flexibility in recruiting, yielding further improvements.
8. Negative Impact on Conversion
The same Japanese retailer was keen on making application performance a top priority. The KPI metric suggested that the new experience had to load in 1 second on 3G.
The plan wouldn’t be as challenging had it not been for content-heavy pages. One of the company’s leaders once joked, “our single page carries 16x the content of a news website.” Content authors generate said content via a content management system (CMS), which is why there was no way to know what to expect. Since there was no way to understand the content in advance, optimizing it for performance was uncompromising.
Luckily, micro frontends are natural performers. You want to keep the application core light and load features on-demand to ensure fantastic performance. This is precisely what micro frontends do out of the box. A light core loads feature apps on demand. A smart server-side rendering step and detection of above-the-fold content ensured that the organization meets the goal of loading in 1 second on 3G.
9. Reliance on Technical Skills
Content creators are rarely technical. Their mission is to entice the customers with an engaging experience. However, technology is scary, abstract, and difficult to understand. When content authors need to communicate their needs to technical teams, they get confused and frustrated.
Since feature apps center around a specific business value, they are easy to understand. Furthermore, additional efforts in documenting the usage make it easy and enjoyable for non-technical people to use. Some successful businesses maintain a feature app library that helps consumers like content authors understand where, when, and how to use features for best results.
Moreover, businesses use feature app libraries to allow white-label clients to purchase features, effectively creating a revenue stream from a feature app storefront.
Caveats of Micro Frontends
Micro frontends are as much an organizational change as a technical change. An open-minded organization will adapt quickly, but some large organizations may need help.
Micro frontends also require expert guidance. It’s an extensive system, and mistakes can be costly. So you want to start on the right foot quickly without realizing missteps a year later.
Because micro frontends are not just a technology to choose from a shelf, they often require building an entire ecosystem. You can harness its full power from a good CMS, a feature app library, management portal, feature app starter templates, and more.
Getting Started with Micro Frontends
Micro frontends are the best fit for scaleable products and organizations. They bring exciting opportunities that improve how people work and communicate, help increase conversion rates, and ensure you can efficiently maintain your presence for years to come.
At Modus Create, we love micro frontends and have helped several Global 2000 enterprises boost their performance with this architectural and organizational framework. Interested in learning more? Talk to Modus.
