When I went to the interview two years ago , The interviewer may ask you , Have you written about components , How parent and child components communicate ？ How sibling components communicate ？ Have you ever used state management tools ？
I've been through a lot of interviews recently , There is an obvious feeling , Most interviewers will ask you , Have you ever touched the micro front end ？ Do you know qiankun？
Maybe with age , Salary requirements will also increase , A company that can afford money , Development teams may all have a certain size , So in this situation , The interviewer asked you about the micro front end , It's very natural .
Because the company adopts micro front-end Architecture , I've also recently started learning about the micro front end . Bought books related to micro front end . Next , I'd like to introduce you to the micro front end .
Statement ： The main content of this paper comes from 《 Front end architecture From entry to micro front end 》-- Huang Fengda . There are also some of their own understanding .
Micro front end is an architecture similar to back-end micro services , The concept of micro service is applied to the browser side , That is, multiple single page front-end applications are transformed from a single single application to multiple small front-end applications . Each front-end application can also be developed separately 、 Deploy .
For example, one of our projects has 10 Wan line code , Split into 10 A project , Each item consists of 1 Wan line code . It will be much easier to develop and maintain each project independently . We just need to develop and deploy independently .
So the micro front-end architecture has its own characteristics ：
Multiple applications can be developed by different teams , Decouple from each other , At the right time , We can replace any of these applications , And the whole is not affected .
The architecture concept of micro front end should meet the principle of single responsibility . But to achieve a single responsibility , It's not that easy .
Between different applications within the project , We can use different technology stacks , For example, applications a May adopt vue,b use react,c use angular,d use jquery etc. .
1, Legacy system migration Old systems , We want to synthesize into the new system , But I don't want to rewrite the old system , We can use micro front-end Architecture , Embed the old system into the micro front-end project . 2, Back end decoupling , Front end aggregation A lot of times , The back end adopts micro service architecture , Different businesses can be decoupled . But on the front end , There is a trend in mobile applications , A large commercial company , There may be a lot of applications , And so many applications , There will be many entrances . But in the eyes of users , These applications are from the same company , Just one entrance . Now , Micro front end architecture can be adopted , Aggregate different applications .
Directly through different url To access different applications , In this split mode , The same link only corresponds to one micro application . Different applications can be through localstorage、cookie、indexedDB And so on , Because they are in the same domain name .
Front end microservice , Is that each application is completely independent , Have an independent technology stack 、 Independent development 、 Independent deployment 、 Independent build , And run autonomously . Finally, a complete front-end application is combined in a modular way . Multiple micro applications can exist on the same page . But in the case of routing distribution , Only one micro application is running at the same time .
Micro application , It means that applications are developed in a single way 、 There are forms of micro applications , Runtime , Then merge these applications by building a system , And combine it into a new application .
Microcomponent , It's a piece of code that can be embedded directly into the application , Pre compiled by developers , There is no need to make any modification and compilation during loading .
And the widget under the micro front end , It means that you don't write your own business code for the business team , And deploy the compiled business code to the development server . At run time , We only need to load the corresponding business module . When updating the code , We just need to update the corresponding module .
iframe As a very old man, everyone thinks that ordinary Technology , It's always worked , You can effectively embed one page into another , get out iframe Code for parent-child component communication , Other parts of the code are completely isolated .
web components It's a different set of technologies , Allow developers to create reusable custom elements , And in web Use them in your application . About web components You can find the details of .
The business splitting method mentioned here , Is to look at things from a business perspective , It is different from the technology splitting method .
For example, an e-commerce system , Including products 、 Order 、 invoice 、 logistics 、 Inventory and other business modules , Split in this way .
For websites with multiple roles and different permissions at the same time , You can split by permission . In particular, the functions corresponding to different permissions are separated .
Some businesses in the system iterate frequently , Some things iterate slowly , In this way , Those parts that don't iterate often won't get much impact .
Communication between different teams has a certain cost , Cross team cooperation also has some costs . If the project is developed by multiple teams , Consider this split form .
In fact, the back-end microservices are split , There is no necessary connection with the front-end project organization form , But if the back-end micro service is split , Corresponding front end part , It may also be decoupled .
DDD Domain Driven events , I won't go into details .
In the micro front-end architecture of this mode , The base undertakes the foundation and core technology of micro front-end application . Pedestal mode , It is a system composed of a main application and some columns of sub applications , And this master application is used to manage other sub applications , It includes the life cycle of sub applications to the communication mechanism between applications . The base application can be just a simple base function , It can also have business functions , But business function refers to the business function of the core part . Pictured ：
As the foundation and core of the application , It also ：
To adopt the micro front-end architecture of this mode , Just design the corresponding application loading mechanism , Therefore, it is more convenient to implement .
Self organizing , It means that each subsystem within the system can form a certain mechanism or function according to certain rules . This mode can make various front-end applications in the system , Each has a small base management function , Each application can be a base . Most of the time , We will not adopt the micro front-end architecture of self-organizing mode , Because its design is complex , Have a lot of duplicate code
Interested students can read this book , It's very systematic . If you have any questions, you can leave a message , If this article helps you , Hope to like + Focus on , thank you .