Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what is a micro front-end". In daily operation, I believe many people have doubts about what is a micro front-end. I have consulted all kinds of materials and sorted out simple and easy operation methods. I hope it will help you answer the question of "what is a micro front-end"! Next, please follow the small series to learn together!

What is Micro Front End?

Martin Fowler defines micro-frontend architecture as "an architectural style in which self-contained deliverable front-end applications are composed." Simply put, a micro frontend is a portion of a web page (not the entire page). In a micro-frontend architecture, there is a "host" or "container" page that can host one or more micro-frontends. Host/container pages can also share some of their own micro-frontend components.

For example, as we implemented in previous articles, we exposed button components from the MFE1 page to MFE2(host/container)

or

http://mfe1.s3-website-us-east-a.amazonaws.com/Deployed to S3 in this article

The micro front-end architecture consists of three main components:

Micro Front End (in the previous example, the button for MFE1 was Micro Front End)

Host/Container (in the previous example, MFE2 was the host)

Mini-framework: We use WebPack 5 module syndication plug-ins

Why Mini Front End?

Micro frontend architecture was introduced to address several issues with current SPA frontend development. I experienced the growth of a single website to the point that it became very difficult to scale, modify or even train new engineers to be part of it. With this monolithic system, developers will lock in each other to apply a small change. Here are some of the benefits of a miniature front end:

Team scalability: Multiple teams can work independently to contribute to multiple systems. This allows us to divide the work and scale it through multiple teams.

Single Responsibility: This will allow each team to build components with a single responsibility. Hosting teams can focus on analytics, performance and each functional team can focus on customers. Both teams can get 100% in their specific areas. Homepage teams can focus 100% on creating large homepages. Each Micro Front End team will focus on 100% Micro Front End functionality.

Reusability: We will be able to use code in multiple places. A component will be built and deployed, and different teams can reuse it.

Technology Agnosticism: Micro front-end architecture is independent of technology. You can use components from different technologies (JavaScript, React, Vue, Angular …). You don't have to worry about deploying or building them.

Learning curve: For new engineers joining the team, it's easier to learn smaller applications than to learn about boulders with thousands of lines of code.

How to implement a mini front end?

The micro front end is mainly the integration between host/container and micro front end. There are three ways to integrate a micro front end

Build-time integration

This is most of the code implemented today. The container installs the component as a library, similar to the library you install from NPM. The problem with this approach is synchronizing different versions of the library and building problems. It is also difficult to use different technologies. Furthermore, the final package size will be large because it contains all dependencies. In addition, you must deploy any changes to the dependency again. Moreover, there is a tight coupling between the container and all micro front ends.

Runtime integration

This is what I explained in previous articles. In this case, containers are built and deployed separately. Each micro front end can be packaged as a separate package, i.e. the container/host can acquire the desired micro front end. For more explanation of this approach, see the list of articles at the end of this article. In this case, the container and micro-front end are completely coupled. They do not share builds or deployments and can use different technologies. The container can decide which version of the micro frontend to deploy.

server-side integration

In this case, all functionality will be in the backend that determines the micro front end to load. The server will determine the URL to route the request to. This is a standard server-side composition.

At this point, the study of "what is a micro front end" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.