Building Micro Frontends

Building Micro Frontends

Micro frontends allow your teams to independently manage and deploy small pieces of the frontend. Are the added complexities of this architecture worth it for your organization?

Micro frontends allow your teams to independently manage and deploy small pieces of the frontend. Are the added complexities of this architecture worth it for your organization?

With the rise of small, distributed backend web services over the past few years, it’s not surprising that people are now talking about doing the same thing on the frontend. “Micro frontends” is a term that first emerged in 2016 to describe small, decoupled frontend web applications that work in concert to make a complete app.

1\. Monolith, one big rectangle. 2\. Frontend in one rectangle on top; Backend in a rectangle below it. 3\. Frontend in one rectangle; below it are two smaller squares each called Microservice. 4\. Three separated columns each have a Micro Frontend square on top and a Microservice square on bottom.

With an eye toward recent web development history, it’s easy to trace micro frontends’ appeal. As large teams moved off of monolithic codebases (1), they split up their frontend (display and UI) and backend (database, authorization and business logic) code (2). As the complexity and team size grew, many companies moved toward microservices (3), which split the backend codebase into smaller, independently deployable pieces. While no architecture is perfect, many companies have successfully adopted microservices to reduce complexity and increase delivery speed.

Micro frontends (4) use the same concept as microservices to improve frontend codebases. The advent and widespread adoption of frameworks like React, Angular and Vue have spurred an increase in complexity and business logic handled on the frontend. While micro frontends still require good architecture and often use these heavier frameworks, the ability to independently manage and deploy pieces of the frontend in small chunks appeals to large engineering organizations.

What Does a Micro Frontend Look Like?

The idea of a micro frontend is to break the user interface into pieces by product function and make each of those pieces an independently deployable frontend codebase. While the divisions and method for breaking code up vary, it’s helpful to imagine a specific example.

If you run an ecommerce application, your product detail page might have a navigation bar, a login button, a summary of the user’s shopping cart, buyer reviews, and some metadata about the product and an image. In a typical frontend application, you’d probably have all of these pieces divided into components but living in the same codebase. In a micro frontend architecture, you could break the app into five different codebases, each owned by a team responsible for one specific feature.

A wireframe of a webpage broken into color blocks. The key shows five colors for the different teams: Account Team, which corresponds to the Account/Login; Cart Team, which corresponds to the cart on the side column and an Add to Cart button on the product; Navigation Team, which correspondes to the primary navigation and logo bar at the top; Inventory Team, which corresponds to the Product Details section; and Reviews Team, which corresponds to a Leave Review button on the product section as well as a larger Reviews section below it.

This architecture would allow the Reviews Team to deploy a new review interface on Monday, the Cart Team to deploy updates to the shopping cart on Tuesday, and the Account Team to fix a login bug on Wednesday—all without affecting the core Product Details on the page.

While novel, this structure introduces some complexity. More applications mean more code and more deployments. In the rest of this article, we’ll look at some of the advantages and disadvantages of micro frontends. We’ll see what decisions engineering leaders need to make when adopting this architecture and help you decide if it’s a good fit for your organization.

Why Micro Frontends?

I’ve started to hint at some of the reasons developers might adopt micro frontends, but let’s get specific.

Strong Boundaries

Every software developer thinks about the separation of concerns when planning a new project. While micro frontends aren’t a requirement for well-organized frontend codebases, they can promote explicit divisions between responsibilities in a web app.

“We’re trying to set ourselves up to fall into the pit of success by making bad decisions hard, and good ones easy.” – Cam Jackson on Micro Frontends

Small Codebases

Smaller codebases are inherently easier to reason about. Assuming your boundaries are well-defined, teams will likely prefer small codebases to large ones. That said, setting up automation and debugging errors that cross boundaries can be a new challenge for micro frontends.

Smaller Deployments

As your frontend grows, simple actions like updating the cache or clearing the CDN may dramatically impact performance. Micro frontends allow you to deploy small changes to pieces of your codebase rather than being forced to update the whole thing in a single pass. These smaller changes also limit bugs’ reach as they’re likely to affect only the piece of the code they interact with.

Autonomous Teams

Finally, each micro frontend in your application can be managed by a single team that can pick the framework, libraries and design patterns that best fit their requirements. These small, autonomous teams face fewer bottlenecks and signoffs for every decision, plus this structure allows the organization to experiment with new tools without rewriting the entire frontend.

Disadvantages of Micro Frontends

Every architectural style comes with tradeoffs, and micro frontends are no different. While they solve some thorny problems—especially for large, enterprise software teams—they introduce a new set of issues as well. If you’ve worked with backend microservices, you’re probably aware of these tradeoffs, but it’s worth noting them.

Duplicate Dependencies

“Some micro frontend implementations can lead to duplication of dependencies, increasing the number of bytes our users must download.” – Cam Jackson

If you imagine having three frontend apps that all load their own frontend framework, you can see how quickly duplicate dependencies can slow down your app. This is even more of a problem with micro frontends than with backend microservices because every dependency must be passed over the internet to your users rather than simply compiled for on the server.

Siloed Teams

Because micro frontends encourage business-case boundaries between elements, they could contribute to an undesirable “us vs. them” culture. If you allow teams to work with different frontend frameworks or design patterns, you might also introduce unnecessary friction when developers want to move from one unit to another.

Rigid Boundaries

Finally, making your boundaries completely separate applications makes them much harder to move them later. This might be a good thing in a large, established application, but it could unnecessarily slow the development of a new app that’s rapidly changing.

angular node react vue javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Vue vs. React vs. Angular: Which JavaScript Framework is Right for You

Vue vs React vs Angular: Which JavaScript Framework is Right for You. JavaScript is a high-level programming language. Both front-end and back-end development can be conducted with JavaScript. Vue provides higher customizability and hence is easier to learn than Angular or React. Further, Vue has an overlap with Angular and React with respect to their functionality like the use of components.

Which Javascript Framework should I use with Ionic - Angular, React or Vue?

You want to get started with Ionic and are unsure which Javascript framework with Ionic you should pick? Or do you think about switching from the one you currently use? In this video I explain the differences and things you need to think about when selecting your framework for Ionic! Which Javascript Framework should I use with Ionic - Angular, React or Vue?

10 Cosas de JAVASCRIPT que debes conocer para React/Vue/Angular 😱

10 Cosas de JAVASCRIPT que debes conocer para React/Vue/Angular . Tutoriales claves de Javascript (JS) para comenzar a trabajar con React, Angular o Vue.js.

GraphQL (with React, Angular, Vue, and Node) Bootcamp - Day 1

Day 1 of our free, live-streamed, GraphQL (with React, Angular, Vue, and Node) bootcamp.