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 Under the circumstances , How to implement multiple application Between Resource sharing ？
In the past, a lot of processing methods were npm Package form Extract and quote , 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 Full of clutter Of Inconsistent style Code for , There is no clear agreement or technical vision .
These questions make us realize , Expand the scale of front-end development to facilitate Multiple teams Sure Develop at the same time A large and complex product is a Important but tricky Of 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 from Micro suit The concept of service is extended from , Abandon the large monomer approach , Decompose the whole front end into small and simple blocks , These blocks can Independent development 、 Testing and deployment , And still polymerization For a product to appear in front of customers . It can be understood that the micro front end is a kind of multi Can be delivered independently Small front end applications of polymerization As a whole Architectural style .
There are several points worth noting ：
- Microfront It's not a specific technology , It's about Integrating Technology 、 Strategies and methods , Maybe with scaffolding 、 Auxiliary plug-ins and specifications constrain this ecosystem Show the form , It's a kind of macro framework . This architecture currently has Multiple solutions , Both have advantages and disadvantages , But as long as the application of the current business scenario is a good solution .
- Micro front end and There is no technology stack constraint . 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 Update process and efficiency Importance . 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 , There are teams that still exist, using old and huge Front end monomer mode , 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 . in order to Avoid the risk of completely rewriting , We're more inclined to put old apps Gradually renovate , At the same time, it will continue to provide new functions to our customers without any impact .
Micro front end can make us more free to make all parts of the product Independent decision making , Let the team continue to add new features and make almost no changes to the original whole , Make our architecture 、 Both dependency and user experience can Incremental upgrade .
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
Each individual Micro front end project The source code base will be far away from Less than One Single front end project Source code base of . These small code bases will Easier to develop . What's more, it's worth mentioning , We avoid unintentionally inappropriate coupling between unrelated components . By enhancing the boundaries of the application Reduce the occurrence of such unexpected coupling .
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 , Micro front end Independent deployability 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 , It's what makes us 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 To be fast and effective Earth action . In order to achieve this goal , Our team needs to be based on Business function Divide vertically , 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 team work more Cohesion .
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, it is worth noting that Decentralized mode Medium EMP Micro front end solution , It can be realized Cross technology stack calls , It can also be used between applications of the same technology stack Deep customization of shared resources , 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 .