Micro Frontend Architecture: The Best Way To Build Scalable Frontend

in #frontend3 years ago

image.png

This tweet from Dan Abramov stirred up the frontend development community. People even supported his tweet citing the larger payload size and difficult implementation against the micro-frontend architecture.

So why even look beyond component-driven development?

These people answered why:

image.png

The micro-frontend architecture is especially effective in imparting organizational stability and its efficacy depends on the use case. Neither component-driven development nor micro-frontend architecture is a panacea for frontend scaling. The onus is always on the business owner to map needs against the advantages of these strategies and pick them immediately.

We’ve already extensively covered component-driven development in our other blog and highlighted how it can be the key to building a scalable frontend. And now we want to discuss another extremely successful strategy for scaling frontend— micro-frontend architecture.

Micro-frontend architecture is an incredibly lucrative approach for growing organizations as they often face multiple bottlenecks and anomalies at the frontend, no matter how streamlined the backend is. This is understandable since it doesn’t make much sense to meddle with the codebase for frequent feature additions and upgrades. The modular approach drastically reduces the impact of upgrades and changes for one element on the rest of the codebase.

This article will explore all there is to know about micro-frontend architecture and equip you with the knowledge needed for its implementation. By the end, you’ll also see if it’s the right architectural approach for your frontend. So let’s get started:

What is Micro-frontend Architecture?

Micro-frontend architecture is a strategy in which the traditionally monolithic frontend codebase is split into smaller apps, ideally addressing the various business domains. All these smaller elements form a seamless frontend interface that delivers top-notch user experience and is easy to modify and scale.

You know it’s time to adopt such an architecture when you want to add more features and functionalities but the bloated frontend codebase requires you to spend an awful lot of resources.

Before the micro-frontend architecture went mainstream, the most common web-application development strategy involved a frontend monolith sitting on top of a microservices backend. Data coming from various microservices made things complicated with time. Say one of the microservices went through an upgrade at the backend. The frontend would need extensive changes, and we all know how developers would ignore such tedious tasks. Conclusively, the situation would get so out of hand that a revamp would seem like the only logical solution.

Micro frontend framework allows cross-functional teams to take care of end-to-end development and deployment of individual micro applications. There are multiple implementation methods to deploy micro frontends. But before we get there, let’s figure out all the compelling reasons why you need to use micro frontends.

11 Reasons Why You Should Use Micro-Frontend Architecture

  • Design and development flexibility
  • Decoupled codebases
  • Favours native browser over custom APIs
  • Automation
  • Fault isolation
  • Scalability
  • Faster build time
  • Simpler maintenance
  • Autonomous teams
  • Independent deployment
  • Reusability

How to Implement Micro-frontend Architecture?

Before you start composing micro frontends, you need to decide how you wish to split the application frontend. Primarily, there are two ways to go about it— horizontal split and vertical split.

The horizontal split lets you break down an interface into multiple parts that can be assigned to different teams. However, you also need to give it a cohesive, consistent look and feel.

If we look at the vertical split, here you prioritize business domains and assign each domain to different teams. Since a single team would be responsible for the entire interface, it’ll gradually gain more expertise in that particular business domain.

Multiple strategies can account for a micro-frontend architecture approach based on how and where the different micro-frontend elements are composed. However, the superiority of one method over another is highly debatable. Let’s understand these different implementation strategies and try to find out which one suits you the most.

  • Server-side composition
  • Build-time integration
  • Run-time via iframes
  • Run-time via JavaScript
  • Run-time via web components

Challenges to Micro-frontend Architecture

Nothing comes without a cost, not even the micro-frontend architecture. There are a few tradeoffs that you need to consider before getting started with this framework:

  • Operational complexity
  • Inconsistent user experience
  • Poor communication between components
  • Larger payload

Concluding…

With multiple implementation strategies and tons of advantages, the micro-frontend architecture seems set to revolutionize frontend development and scaling.

Check out the original article published here: Micro Frontend Architecture: The Newest Approach To Building Scalable Frontend

Coin Marketplace

STEEM 0.17
TRX 0.13
JST 0.027
BTC 60600.18
ETH 2606.88
USDT 1.00
SBD 2.62