编程知识 cdmana.com

Happy gathering chameleon of micro front end

One 、 background

In the development process , We often meet the business side Fast Online functional requirements , As on the Agreement page 、 Introduction page 、 Static page or list such as guide page 、 Lottery and other dynamic activity page . Whether it's static or dynamic pages , It will increase R & D workload and time cost , Here are some of the pain points :

  • The cost of launching the event
  • Support for multiple languages
  • Activity components between different businesses cannot be reused
  • Components cannot be dynamically updated

The development of a platform that enables the products or operators of various business parties to quickly configure activities and launch activity pages will arise .

Two 、 programme

1. Online costs

For launch costs , Since it is a unified configuration platform , Each activity can be assigned a unique activity id, Make certain rules ( If different url Customize different pages json structure ), Different environments and debugging can be distinguished .

2. R & D cost

To solve this problem , Two schemes are discussed , One is based on npm package ; The other is based on The company's self-developed open source micro front-end solution EMP, The specific comparison between the two schemes is given below :

  • npm programme

There are many problems with this solution , List the more fatal points

1.  from UI Layers pull out components with similar functions , Between different businesses UI There's a big difference in style , The cost of divestment has skyrocketed 
2.  Every change npm Package version , The platform must manually change the corresponding version Concurrent Version , Low platform stability 
3.  Components and their custom logic are directly related to the configuration platform , Code coupling , The robustness of the platform is very poor 

Through the analysis, it is found that the root cause of the problem is that multiple businesses are coupled to one platform , If we could change our mind .

1   For component reuse , There is no need to pull away npm Packages can share components ?

2   For the problem of interaction between businesses , Whether it is possible to configure the capability of the platform by withdrawing it , It is provided to various businesses ?

In the course of the research , Find out EMP The micro front end solution seems to solve our problem , The flow chart starts ~

  • emp programme

Let's take a look at how this solution addresses the above npm The problem with the plan :

1.  Each business only needs to be configured according to the agreement of the platform , Add the configuration of corresponding components , Expose the business component list again , You can reuse components directly , The cost of business component transformation is basically 0
2.  For specific resources ( Different business components 、 Platform function iteration, etc ) Update , Just build and publish the resource itself , The referenced business can be updated synchronously 
3.  The ability to configure the platform is separated from the customization of business components , Each business component module and platform only needs to focus on its own logic , Avoid the coupling between unrelated resources , The robustness of the platform has been significantly improved 

3、 ... and 、 Transformation process and results

Because the chameleon platform combines EMP programme , And the results of the transformation are as follows

  • Service access : By configuring emp-config.js Expose components and configuration to chameleon configuration platform  1.png

       0.png

  • Chameleon configuration platform : By configuring project-config.js To introduce the component list of each business

  • Chameleon configuration platform
  • Page and its corresponding json structure

Four 、 At the end

The gathering chameleon can run through the closed loop in a short time , combination EMP The micro front end solution of , Through the platform to avoid repeated online costs , adopt EMP Component reuse can be easily realized , In addition, business logic and more granular methods can also be shared and reused , The cost of transforming business components has plummeted , In addition, components can provide the configuration agreed by the platform, so as to enrich the functions of components on the platform , Implement dynamic enabling of components .

That's all for today's sharing ~ ad locum , Sincerely to my friends Amway EMP Microfront , If the business needs , After accessing the micro front end, it is believed that the income obtained from it is huge , Words alone are no proof , Here in the Use guide , Go and try it ~ Welcome to discuss and exchange !

版权声明
本文为[Efox]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224110027431u.html

Scroll to Top