Is componentization obsolete? Introduction to micro front end architecture

Preface

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 .

What is micro front end architecture

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 .

• The development process ： And in the development process , If it is 10 Wan line code , Then the packaging and compilation time is very long .
• Testing process ： If each project is published separately , Then the scope and workload of testing can be reduced to a certain extent .
• Online maintenance ： If a single online application goes down , We just need to maintain a single application . There is no need to republish the whole project . Greatly reduce maintenance costs .

So the micro front-end architecture has its own characteristics ：

• Autonomous applications

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 .

• Single responsibility

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 .

• Technology stack independent

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. .

Why use micro front-end Architecture

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 .

The front-end technology is split

• Distributed routing

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

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 .

• Combined integration ： Micro application

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 .

• Miniaturization

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 .

• Front end container ：iframe

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 .

• combination Web Components structure

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 service splitting method of micro front end

The business splitting method mentioned here , Is to look at things from a business perspective , It is different from the technology splitting method .

• Split by business

For example, an e-commerce system , Including products 、 Order 、 invoice 、 logistics 、 Inventory and other business modules , Split in this way .

• Split according to permissions

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 .

• Split according to update frequency

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 .

• Split according to the organizational structure

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 .

• Following the split of the back-end microservices

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 And event storm

DDD Domain Driven events , I won't go into details .

Architecture mode of micro front end

• Pedestal mode

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 ：

• Maintain the application registry .
• Manage other sub applications . Including when to load the application 、 Uninstall the application at the time of core .

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 model

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

Book recommendation

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 .