MicroFrontend


Micro-frontend architecture is a design approach in which a front-end app is decomposed into individual, semi-independent “micro-apps” working loosely together. The micro-frontend concept is vaguely inspired by, and named after, microservices. It extends the concepts of microservices to the frontend world. The current trend is to build a feature-rich and powerful browser application, aka single page app, which sits on top of a microservice architecture. Over time the frontend layer, often developed by a separate team, grows and gets more difficult to maintain. That’s what we call a Frontend Monolith.


The idea behind Micro Frontends is to think about a website or web app as a composition of features that are owned by independent teams. Each team has a distinct area of business or mission it cares about and specializes in. A team is cross-functional and develops its features end-to-end, from database to user interface.


Composition of Micro Frontend

Since Micro Frontend is all about dividing a web application into different segments, it is vital to understand what these segments comprise. Typically, these can be broken down into three different types of compositions:


In client-side composition, techniques such as App Shell and client-side scripting are used. This is most viable for loading single-page applications via a library or with help of frameworks such as Luigi.

Edge-side composition leverages CDN capabilities or computation near the edge or on the edge for implementing the Micro Frontend approach.

In the case of server-side composition, a mix of frameworks such as Ara Framework, Piral, Open Components, and Tailor.js, among others, is used for developing the different components of a web application.

When Micro Frontends are handled as single parts of a larger whole, you have the option of choosing from these different compositions.


Advantages of Micro Frontend Architecture

Some of the key benefits you can get from micro frontends are:


Disadvantages of Micro Frontend Architecture


Best Practices to Deploy Micro Frontend

Adopting and implementing the Micro Frontend architecture requires you to adhere to certain yardsticks to be able to reap the maximum benefit out of it. Here are the best practices to bear in mind:

1. Browser Integration

Browser integration for different web components is a must for creating frontend fragments that can be imported into the application. This allows for the different fragments to be bundled together with the back-end components. This practice facilitates a seamless merging of the building process and its visual representation. In turn, this allows for robust decisions regarding which components are to be displayed and how, thus, orchestrating a flow of events between different components


2. Building Custom Elements

Web components comprise element lifecycles callbacks that are responsible for defining the component behavior. Creating Custom elements for these lifecycle callbacks - Attached Callback, Attribute Changed Callback, Created Callback, and Detached Callback - using custom HTML tags, CSS styles, and scripts are essential to be able to categorically define their behavior.


3. Creating Shadow DOMs

DOM is the API for a Micro Frontend application. It's a good practice to create a shadow DOM by combining HTML, JavaScript, and CSS within a web component that is segregated from the main document DOM. Events behave differently in Shadow and regular DOM. When they bubble from one to the other, it results in various benefits such as stronger isolation in an iframe-like manner. This helps in preventing the risk of global styles seeping into a Micro Frontend, especially when working on transforming legacy applications.


4. The Right Frontend Structure

The structure of Micro Frontends is crucial for its operationality. It rests on elements such as the framework, isolation techniques, communication between modules, among others. A meta-framework of Single-SPA is ideal for combining different frameworks without the need for refreshing the page over and over again. Similarly, the use of Bower and NPM components helps in developing shared functionality applications that are live on different URLs. Facilitating communication via a shared events bus is also vital when each component is built on an independent framework.


5. Building Up Slowly

Given the versatility and enhanced functionality of Micro Frontends, it is natural to want to migrate legacy applications with monolithic architecture to this new environment. However, you have to factor in the risks of dependencies and technical challenges in the process. To ensure that you can pay attention to details and resolve issues quickly, it is best to build up slowly, piece-by-piece.


Top 10 Micro Frontend Frameworks

1. Bit

2. Module Federation

3. SystemJS

4. Piral

5. Single SPA

6. Luigi

7. Qiankun

8. Open Components

9. Podium

10. Mosaic 9


Summary

Micro Frontends is a great component model for transforming the way you build software, deliver it progressively and frequently. For large organizations, this can be a game-changer that facilitates continuous delivery. And for fast-growing startups, it presents a bankable choice as a scalable and flexible architecture.

It heavily depends on your business case, whether you should or should not adopt micro frontends. If you have a small project and team, micro frontend architecture is unjustified. At the same time, large projects with distributed teams and a massive number of requests benefit a lot from building micro frontend applications. That is why today, micro frontend architecture is already widely used by many large companies, and that is why you should opt for it too.




ny-wired        ny-wired
  
© Copyright MeeTri 2022 All Rights Reserved