From the original gold digger 《 What exactly is a micro front end , What benefits can it bring 》
This article will explain the background of the birth of micro front end , Explain in detail the reason of the concept of micro front end and its in-depth understanding , After reading this article , I believe you have a comprehensive understanding of the micro front end , Understand what problems it can solve for your team and the entire enterprise , What's the payoff .
One . background
Now many enterprises , Basically, the application code is isolated physically , Implement a single application, a single library , Closed loop deployment updates test environment 、 Pre release environment and formal environment . therefore , What we're talking about is , Based on different applications, different libraries and independent deployment , How to realize resource sharing among multiple applications ？
In the past, a lot of processing methods were npm Package form extraction and reference , For example, between multiple application projects , There may be a business logic module or something else that is reusable , He pulled it out to npm Management and use of packages in the form of . But this has brought about the following problems ：
- Publishing is inefficient . If you need to iterate npm The logical business within the package , It needs to be released first npm After the package , Every time you use it npm Package applications are updated once npm Package version , Build and release each other again , The process is tedious . If there are more applications involved , It takes more manpower and energy .
- Multi team cooperation is easy to be irregular . Containing general modules npm Packages as shared assets ,“ everyone ” Have it , But in practice , This usually means that no one owns it . It will soon be full of cluttered code with inconsistent styles , There is no clear agreement or technical vision .
These questions make us realize , Expanding the scale of front-end development so that multiple teams can develop a large and complex product at the same time is an important but difficult problem .
therefore , As early as 2016 year , The concept of micro front end was born .
Two . Micro front end concept
Micro Frontends Official website The concept of micro front end is defined ：
Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.
Translate into Chinese ：
from Micro Frontends Official website You can see that , The concept of micro front end is extended from the concept of micro service , Abandon the large monomer approach , Decompose the whole front end into small and simple blocks , These blocks can be developed independently 、 Testing and deployment , At the same time, it still converges into a product that appears in front of customers . It can be understood that micro front end is an architectural style that integrates multiple small front-end applications that can be delivered independently into a whole .
There are several points worth noting ：
- Micro front end is not a specific technology , It's about Integrating Technology 、 Strategies and methods , Maybe with scaffolding 、 Auxiliary plug-ins and specification constraints are displayed in this form of ecosystem , It's a macro framework . There are many solutions to this architecture , Both have advantages and disadvantages , But as long as the application of the current business scenario is a good solution .
- Micro front end has no technology stack constraints . The design of each micro front end solution , It's all based on actual needs . If it's used by multiple teams react Technology stack , There may be no requirement for cross technology stack usage of micro front end solutions ; If multiple teams use it at the same time react and vue Technology stack , It may have higher requirements on the cross technology stack of micro front end .
3、 ... and . Advantages of micro front end
Contrast npm Bag mode pull away , Let's realize the importance of updating processes and efficiency . Micro front end is the aggregation of multiple sub applications , If multiple business applications depend on the function module of the same service application , Just update the service application , Other business applications can be updated immediately , This shortens the update process and saves the update cost .
Because of the burden of history , Some teams still exist, using the old and huge front-end monomer model , Being held back by outdated technology stacks or the quality of code that has been rushed to completion , It's so serious that people want to overturn the rewriting . To avoid the risk of a complete rewrite , We're more inclined to gradually refurbish old applications , At the same time, it will continue to provide new functions to our customers without any impact .
The micro front end enables us to make independent decisions on various parts of the product , Let the team continue to add new features and make almost no changes to the original whole , Make our architecture 、 Dependency and user experience can be upgraded incrementally .
in addition , If there is a major incompatible update in the main frame , Each micro front end can choose to update when appropriate , Instead of being forced to suspend current development and update immediately . If we want to try new technologies , Or a new interaction model , The impact on the whole will be less .
Simple 、 Decoupled code base
The source code base of each individual micro front-end project is much smaller than that of a single front-end project . These small code bases will be easier to develop . What's more, it's worth mentioning , We avoid unintentionally inappropriate coupling between unrelated components . Reduce this accidental coupling by enhancing the boundaries of the application .
Yes, of course , An independent 、 Advanced architecture （ For example, micro front end ）, It's not a replacement for good old, clean code . We don't want to avoid code optimization and code quality improvement . contrary , We make it harder to make wrong decisions , Increase the possibility of making the right decisions , So that we fall into the trap of success . for example , We make it difficult to share domain models across borders , So developers are unlikely to do this . Again , The micro front end enables you to clearly and carefully understand how data and events pass between different parts of the application , This is something that we should have started long ago ！
Like microservices , The independent deployability of the micro front end is the key . It reduces the scope of deployment , This reduces the associated risks . No matter where your front-end code is hosted , Each micro front end should have its own continuous delivery channel , This channel can build 、 Test and deploy it all the way to the production environment . We should be able to deploy each microservice without considering other codebases or channels . Even if the original single project is fixed, release the version manually on a quarterly basis , Or other teams submit unfinished or problematic code to their main branch , It doesn't have an impact on the current project . If a micro front end project is ready for production , It should have this ability , And the decision is in the hands of the team that builds and maintains it .
The higher-level benefits of separating our code base from the release cycle , Is that we have a completely independent team , Can participate in the design of their own products 、 Production and subsequent processes . Each team has all the resources needed to deliver value to customers , This allows them to act quickly and effectively . In order to achieve this goal , Our team needs to be vertically divided according to business functions , Not according to the type of Technology . One simple way is to segment the product based on what the end user will see , So each micro front end encapsulates a single page of the application , And a team is in charge of . And depending on the type of technology or “ The transverse ” concerns （ Like the pattern 、 Form or validation ） To form a team , This will make the team work more cohesive .
Four . Types of micro front end solutions
At present, the domestic micro front-end solutions are roughly divided into ：
- Pedestal mode ： By building a base 、 Configuration center to manage sub applications . Based on SIngle Spa The universal scheme of heaven and earth , There are also customized solutions based on their own team business .
- Self organizing model ： Exchange by agreement , But there are problems with dealing with third-party dependencies .
- Decentralized mode ： Off base mode , Each application can share resources with each other . Based on Webpack 5 Module Federation Realized EMP Micro front end solution , Multiple applications can share resources with each other .
among , At present, the focus is on the decentralization model EMP Micro front end solution , It can realize cross technology stack call , It can also deeply customize shared resources among applications of the same technology stack , If you're just starting to research the micro front end , You can try to understand EMP Micro front end solution , Maybe it will bring you a good experience .
Specific multi scheme in-depth comparative analysis , In the next article 《 Compared with a variety of micro front-end solutions 》 Detailed explanation , Welcome to pay attention wiki post First update .