A Technical Approach to Micro-frontend Orchestration

Exploring composability on the frontend

In the modern world of web development, building modular, maintainable, and scalable applications is critical in keeping up with business requirements and delivering exceptional user experiences. Thus, composability has become a crucial concept even in frontend development, underscoring the need for modular and reusable components that can be combined to build complex user interfaces.

The significant challenges with composability are interoperability, communication, and performance issues. When these features of the frontend applications change, they initiate a domino effect, requiring the entire application’s repackaging, testing, and deployment. This introduces more complexity to the software development experience.

Micro-frontend architecture emerged as an innovative architectural style to reduce this complexity. It’s a groundbreaking approach to frontend development that involves breaking down monolithic applications into independent and collaborative units.

Understanding micro-frontend architecture

Micro-frontends break down your frontend application into independent, miniature features. They are developed independently in separate repositories by an autonomous team responsible for the building, testing, and deployment. Each micro-frontend owns its codebase, lifecycle, and dependencies, acting as a mini-application within the larger whole, often communicating with one another via a shared API.

The micro-frontend architecture allows for a simple, decoupled codebase that enables incremental application upgrades to each module and can be independently deployed. Since each feature is developed and managed autonomously, teams can iterate on individual features by building, testing, and deploying them independently, potentially reducing the litany of potential issues.

Many case studies reference how micro-frontend architecture enhances composability within their applications. A good example is how popular large e-commerce platforms like IKEA have leveraged Edge Side Includes (ESI) as the fundamental technology in implementing micro-frontend architecture to scale their online store. IKEA saw a 50% reduction in development time and a 75% reduction in page load time. Another example is how the architecture team at Emtec Digital led a third-party logistics provider to achieve a 70% increase year-over-year in product development after migrating.

This architectural approach clearly reduces the complexity of large frontend applications; however, some essential requirements combine to make it work. Let’s take a look.

Key components of micro-frontend architecture

• Microservices: The autonomy of microservices empowers independent development, deployment, and maintenance, promoting agility and resilience within the micro-frontend architecture.
• API: APIs define clear and secure communication channels between microservices, ensuring that data flows smoothly and functionalities synchronize flawlessly. Since micro-frontends are a distributed architecture, they require a more formal API or event management.
• Routing: Routing is crucial for micro-frontends to display each part of the user interface correctly. It ensures that micro-frontends appear in the correct order, creating a seamless and consistent user experience. Thus, consider server-side rendering (SSR) solutions for micro-frontends like Piral, module federation for Next.js, TailorX, and Isomorphic Layout Composer (ILC).
• Version control: Since micro-frontends are developed, deployed, and maintained independently, it is essential to ensure these individual components are correctly versioned. As a result, maintaining order and collaboration requires efficiently tracking and documenting all changes to the entire application using version control systems such as Git.
• Orchestration: Micro-frontends are often composed of independent components built by independent teams. Therefore, container orchestration platforms such as Kubernetes are essential tools for coordinating and managing multiple micro-frontends within a single application.
• Build systems: Micro-frontends consist of independent modules built using frameworks, libraries, and tools like Webpack Module Federation. Teams can implement proper build systems to build, test, and efficiently deploy micro-frontend components.

With all these considerations, a need arose to overcome the complexity and coordination challenges inherent in maintaining these disparate micro-frontends.

Orchestrating a micro-frontend architecture

Micro-frontend application features are often built by different independent teams. Unlike a monolithic frontend, as the application grows in complexity, so do the infrastructure requirements, CI/CD pipelines, domains, and dependency duplication across different micro-frontends. To address this, the development team must ensure seamless communication and integration between these separate micro-frontends to create modular applications. Hence the need for orchestration.

Micro-frontend orchestration involves coordinating and managing the deployment and operations of multiple autonomous components within a larger application. It focuses on developing and deploying these independent modules, ensuring they collectively deliver a unified and functional web application. That is why container orchestration platforms such as Kubernetes are adopted to deploy and manage these complex web applications.

Benefits of micro-frontend orchestration

Micro-frontend orchestration offers several benefits to large-scale web applications. Some of the benefits include:

• Improved development workflow: Micro-frontend orchestration enables autonomous teams to take responsibility for how their micro-frontends are built, tested, and deployed using their preferred technologies and frameworks. This allows for runtime integration and parallel development and speeds up the overall delivery of features and bug fixes. Each micro-frontend abstracts the language used, enabling developers to concentrate on high-level concepts and tasks without feeling overwhelmed by the technology stacks employed in each component.
• Simplified operations and maintenance: Micro-frontend orchestration tools handle loading, routing, and communication between micro-frontends, making the overall architecture more manageable. With the use of Webpack Module Federation plugin configurations, teams can specify how code dependencies are kept and shared within individual micro-frontends. They can also dynamically load code from another micro-frontend application at runtime, minimize conflicts, and simplify dependency management. These micro-frontends can also be updated and rolled back independently, reducing the risk of impacting the entire application.
• Enhanced performance and scalability: The modular nature of micro-frontends is a key characteristic that promotes its scalability. With micro-frontend orchestration, the developer team can carefully develop and maintain each individual micro-frontend. Thus, these different modules can simultaneously be scaled independently based on their resource needs, optimizing resource utilization. So, even when one micro-frontend fails, the others can continue functioning, ensuring a more robust user experience.

The micro-frontend is the perfect architecture for building and managing large-scale web applications. Similar to microservices, no single strategy works for everyone or is widely accepted as an industry standard for micro-frontend implementation.

How to implement a micro-frontend architecture

When considering a micro-frontend architecture, there are several approaches that developer teams must take into consideration. However, depending on the context, each implementation detail may emerge as the optimal choice. These include:

Iframe-based micro-frontends

This method involves embedding each micro-frontend in its iframe, with a single page application (SPA) that serves as a container. The SPA renders the iframes and handles communication between them. This method provides maximum independence and isolation from one micro-frontend to another, as each iframe functions as a separate application. However, since each iframe is loaded and maintained separately, it might add complexity and create some performance concerns. Micro-frontend frameworks such as SPAs or module federation are used to bundle micro-frontends together and load them into a single web application. Spotify, for example, has had remarkable success using iframes for its micro-frontend architecture.

Build-time integration

Build-time integration is one of the most standard ways of implementing micro-frontends. Here, each component acts as a packaged library, installed and bundled into the main application during its build. This creates a tightly coupled experience with a faster initial load but sacrifices the flexibility of independent deployments and can bloat the overall bundle size. This process becomes more complex when using several technologies, making it challenging to sync numerous build issues and library versions.

Run-time integration

For micro-frontends, the run-time integration consists of three types of compositions:

• Client-side composition: Client-side composition employs browser scripts for integrating several micro-frontends into a single page. This enables you to preload, load, and render elements of the application on demand. Micro-frontends are loaded and integrated directly within the user’s browser, orchestrated by a container application or JavaScript framework. This offers independent updates and potentially faster run-time, and it doesn’t need to reload the page to render dynamic content. However, complexity and bundle size can grow over time.
• Server-side composition: In this type of composition, all the functionality is assembled in the backend that decides which Micro-Frontend to load. The server, which sits between the browser and the host application, will determine the URL to route the request and then render a complete page with all pre-integrated micro-frontends, delivering it as a single unit. This boosts SEO and initial load, but the trade-offs are server complexity and reduced client-side flexibility. There are many ways this method can be used; however, a simple reverse proxy using Nginx can be used to execute this task.
• Edge-side composition: Edge Side Includes (ESI) supports composition in micro-frontend by enabling dynamic web content assembly, often using a content delivery network (CDN) provider. In this type of composition, the orchestration occurs on the CDN itself instead of the client or server side. This provides scalability and personalization and empowers individual teams to make the right decisions for their micro-frontends. However, it often requires CDN or edge infrastructure and adds configuration complexity. Alternatives when using ESI are popular tools like NGINX or Varnish.

Micro-frontend development with micro-lc

Mia-Platform is actively maintaining micro-lc, an open-source, lightweight micro-frontend orchestrator designed to facilitate the creation of flexible, multi-tenant frontend applications. It is a unified rendering engine, seamlessly integrating with various micro-frontend patterns like iFrames, parcels, and shadowed components.

The micro-lc’s core interface lets you load, embed, and orchestrate individual micro-frontends at run-time. It is available as a CDN bundle for embedding into HTML pages or other scripts and as a configurable Docker container. micro-lc offers versatile configuration options and built-in features for any web application. It is at the core of Mia-Platform Microfrontend Composer, a tool to simplify micro-frontend development, even for non-technical users.

Mia-Platform Microfrontend Composer is a visual development environment that provides a no-code interface for building and managing microfrontends. You can design anything from simple static pages to intricate, specialized web structures. By combining the technical prowess of micro-lc with the user-friendly approach of Mia-Platform Microfrontend Composer, you can unlock the power of micro-frontends without getting bogged down in complex technical details.

Wrapping up

Micro-frontend architectures provide the same benefits to the frontend side as microservices do to the backend side of the application. Although we’re still in the early days of this relatively new concept, it’s clear that it represents an innovative solution for building large and complex applications. When successfully implemented, it offers many benefits, including increased flexibility, scalability, improved performance, reliability, faster development time, and reduced maintenance costs. However, like every emerging technology, there are some challenges to consider before diving in. With the right orchestration tool, you can overcome the challenges of complexity and coordination inherent in the micro-frontend architecture.

If you’re migrating your monolithic frontend applications to a micro-frontend architecture, you should explore micro-lc to help manage the complexity of your application.