How to connect the ground gas to the micro front end?

Aliyunqi 2021-02-23 12:10:21
connect ground gas micro end

brief introduction :  Micro front end brings obvious benefits at the same time , Also facing the pain point . For existing sites , How to access a micro front end based on the old technology stack ? What kind of communication do you need

One 、 Preface

Microfront , This concept has been on various hot topics in China more than once , The problems it solves are also obvious , The pain points mentioned by these micro front ends are also very prominent in the projects that our team maintains .

But I always think , A new technology 、 wave , The most popular thing to be discussed is the outstanding thinking behind him .

" Micro front end is ...xx frame ,xx technology "

This kind of words is a little limited to this outstanding idea , I can only think of him as a layman , To rub the heat of the word .

In my projects and teams , There is already a very large stock of technology stacks and pages that are already running online , Any iterative upgrade must be careful , Be on the safe side .

so to speak , To a certain extent , These benefits of micro front end are from user experience and technical maintenance , The value to the business cannot be quantified , The implementation of this technology is guided by both the need and the need .

We must be in awe of the stock technology stack , Isolation , Several basic elements of controllable influence range , Then consider the implementation of micro front-end solution .

therefore , Under this basic element and guideline , To implement this new technology , We must fully understand the existing technical solutions of the current transformation site 、 The proportion and the capability difference provided by the current mature micro front-end framework , Don't copy and copy .

Two 、 background

The projects that my team maintains are PC Operation background (Workstation), These platforms will exist in different countries , Different time zones , Different partners and so on .

If you need to develop a new page requirement , It's likely that the developers involved are from different teams , At this time, we need to ensure that the style of multiple management pages is unified while completing the existing requirements , Unified design standards , Component unification , It's very difficult to unify interactions .

When the business needs to be migrated to another workbench , Although it needs to be logical , But the navigation bar 、 The theme is different .

The current stock plan is to adopt Java Go straight ahead Template Render HTML, After the iterations of previous generations , There are already several pages produced by different technology stacks in different systems .

Although it's all React To achieve , But the predecessors are very able to toss , None of them are conventional React Developed in the form of components .

such as :

  • Most of the pages are through a JSON To configure , Consumption component generated pages .
  • Some of the pages are defined by another team JSON Configure consumption component generated , With the above JSON Totally different .
  • There are also some pages , It is provided through a set of page publishing platform JS Bundle Loaded out .

Facing such a technical background , Except for smiling and shouting MMP, Tearfully speaking words that I can't understand ( Existence is reason , It's not hard for you to do ?), We have to come up with such a landing plan .

3、 ... and 、 programme & flow chart

First , Need a clear analysis of all pages of the site , General features that need to be loaded :

 How to connect ground gas to micro front end ?


These are some of the common features that have been streamlined , Here is a brief introduction :

  • Layout Loader: Navigation for loading different worktables
  • DADA Loader: Used for loading JSON Configured page
  • Source Code Loader: Used for loading JS Bundle
  • Micro Loader: Used to handle micro front end loading
  • Log Report: It is used for log embedding point
  • Time Zone: Used to switch time zones
  • i18n: For switching multiple languages
  • Guider: For unified control of user guidance

In addition, there may be the following page expansion capabilities :

  • Safety monitoring
  • Flow control
  • Pop up control
  • The questionnaire survey
  • Q & a robot

Later, we looked at the general classification , The general loading process of the page should be like this :

 How to connect ground gas to micro front end ?


Four 、 Implementation details

Based on the above loading idea , The first thing to do is to close the page loading path , It is necessary to ensure that the loading entry of all pages is in a uniform Loader Next , Then we can process the loading life cycle of all pages systematically .

At the same time of convergence , It also needs to be open , Keep plug-in and open to the core loading path , Support different expansion capabilities at any time , Rendering technology stack access .

1 、 Plug-in mechanism

therefore , On the main path , adopt Loader Load the configuration for processing , This configuration provides context in the main path , And then it's for plug-ins to consume , As shown in the figure :

 How to connect ground gas to micro front end ?


for instance , Take an independent JS Bundle For sub applications of type :

<div id="root"></div>
<script src="https://cdn.address/schema-resolver/index.js"></script>
<script src="https://cdn.address/schema-resolver/plugin/layout.js"></script>
<script src="https://cdn.address/schema-resolver/plugin/source-code.js"></script>
<script src="https://cdn.address/schema-resolver/plugin/micro-loader.js"></script>
<script src="https://cdn.address/schema-resolver/plugin/i18n.js"></script>
micro: true,
host: "dev.address",
hfType: "layout1",
externals: ["//{HOST}/theme1/index.css"],
// host is cdn prefix, the resource maybe in different env & country
resource: {
js: "/index.js",
css: "/index.css",
{ container: document.querySelector("#root") }

Through the above Plugin introduce , You can open and consume different configurations .

Here's the introduction of Layout Plugin, The plug-in will consume hfType Field and then load the for Layout Resource provision Container Give it to the next link .

According to the configuration , The current page has opened the micro front end , that Micro Loader Will consume what is provided Container, And then set up the sandbox ( Here is based on qiankun), Provide again Container come out .

Finally, it's up to SourceCode Plugin Conduct Bundle Load run and render . If this is another rendering protocol or technology stack , It can be consumed by different plug-ins according to different configurations Container.

In the process , The plug-ins in each link are independent , pluggable .

such as :

If you don't load Layout Plugin Will not consume hfType Field , It's not going to Layout Plug in logic is injected into getContainer In the method , Then you'll get directly from the outermost layer Container Rendering , There will be no menu related information .

If you don't load Micro Plugin There will also be no logic injection into the micro front end , You don't build sandboxes , Then the page rendering process will continue in normal mode .

2 、 Secure migration

For projects that my team is responsible for , We can't do a one size fits all plan , So for the existing stock page , A complete analysis of the current stock of technology stacks is needed :

 How to connect ground gas to micro front end ?


For the above stock page , We need to implement page level control online deployment from left to right in batches , Only after the left side of the project can be deployed can we make some modifications .

This kind of migration test needs to deal with a set of Automation e2e Testing process , At the same time, through batch migration, comb out Micro front end registry .

With these two process assurance and scope control , The online content of the current scheme is completely controllable , Most of the rest to deal with is more repetitive physical work , Coverage can also be quantified .

3、 Micro front end form

Move according to the above plan , So the expected micro front end shape will be :

  • Every page that opens the micro front end can become the main application .
  • Micro front end is an optional plug-in , If the business exception caused by micro front end can be closed at any time .
  • The same micro front-end page routes can switch between each other to achieve local refresh form , And jump to the non micro front-end registry page will jump directly to the page . As the coverage of micro front-end pages increases , Local refresh coverage will also gradually increase .
  • You can use different extensions , Loading stock pages of different technology stack types , Convert to corresponding sub application .

 How to connect ground gas to micro front end ?


stay SchemaResolver The registration and call paths in are as follows :

 How to connect ground gas to micro front end ?


5、 ... and 、 summary

Look at the essence through technology , The outstanding thinking represented by the micro front end , That's the key to solving specific problems , Only by solving specific business problems , It's the technology that has the value to transform .

Don't do micro front end for micro front end , Don't do applets for applets .

At present , adopt SchemaResolver, Different open capabilities can be provided for different roles :

  • For platform Administrators , Provide plug-in capabilities, open global extension capabilities .
  • For page developers , Provide standardized access solution path , Provides a variety of technology stack access capabilities , No perception provides micro front end , Multilingual , Buried point , menu , Theme loading and other capabilities . Decouples the common capabilities of different systems , meanwhile , This way allows page developers to quickly migrate specific business logic to other platforms .
  • For third party access , Don't care about the system menu 、 Subject access mode , Provide unified access caliber , Isolation technology stack through micro front end 、 Isolator application style . Finally, through the unified page system control , Easy access to the corresponding platform , At the same time, you can see the overall situation of the site page .

author : Developer Assistant _LS

This article is the original content of Alibaba cloud , No reprint without permission

author : Developer Assistant _LS

Link to the original text

This article is the original content of Alibaba cloud , No reprint without permission



  1. JS mechanism 3: stack, heap, garbage collection
  2. [grid compression evaluation] meshquan, meshopt, Draco
  3. Deep understanding of Vue modifier sync [Vue sync modifier example]
  4. WebView for front end engineers
  5. React form source code reading notes
  6. Deep thinking about modern package manager -- why do I recommend pnpm instead of NPM / yarn?
  7. On the sequence of event capture and event bubbling
  8. Help you build a systematic understanding of the front end scaffolding
  9. commander.js Principle analysis
  10. Common usage of nginx
  11. H5 jump to wechat app
  12. Front end algorithm interview must brush questions series [14]
  13. Thinking of cross end practice
  14. Vue server rendering principle analysis and introduction
  15. [KT] vscode plug in development example series (2)
  16. Design ideas of react and Vue framework
  17. JavaScript String.prototype.replaceAll 兼容性导致的问题
  18. JavaScript String.prototype.replaceAll Problems caused by compatibility
  19. 爱奇艺体育:体验Serverless极致扩缩容,资源利用率提升40%
  20. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  21. 对前端异常window error捕获的全面总结
  22. A comprehensive summary of front end exception window error capture
  23. 成功解决Problem while trying to mount target]\“. HTTP response code is 400
  24. Problem while trying to mount target] \ ". HTTP response code is 400
  25. 放弃okhttp、httpClient,选择了这个牛逼的神仙工具!贼爽
  26. 前端面试每日 3+1 —— 第679天
  27. How to add elements at the beginning of an array in JS?
  28. Give up okhttp and httpclient and choose this awesome immortal tool! Thief Shuang
  29. Front end interview daily 3 + 1 - day 679
  30. 【2021 第一期】日常开发 26 个常见的 JavaScript 代码优化方案
  31. Daily development of 26 common JavaScript code optimization schemes
  32. 前端的字符串时间如何自动转换为后端Java的Date属性,介绍springMVC中如何解决时间转换问题
  33. How to automatically convert the front-end string time to the back-end Java date attribute, and how to solve the time conversion problem in spring MVC are introduced
  34. 前端面试常考题:JS垃圾回收机制
  35. ReactDOM.render串联渲染链路(一)
  36. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  37. 粗涉Webpack
  38. Frequently asked questions in front end interview: JS garbage collection mechanism
  39. ReactDOM.render Serial rendering link (1)
  40. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  41. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  42. About webpack
  43. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  44. 详解vue静态资源打包中的坑与解决方案
  45. 一篇搞懂TCP、HTTP、Socket、Socket连接池
  46. 字节跳动2021前端技术岗发布+最新内部面试题
  47. Detailed explanation of Vue static resource packaging and Solutions
  48. Understanding TCP, HTTP, socket, socket connection pool
  49. 2008-2021 front end technical post release + latest internal interview questions
  50. 4. Vue基本指令
  51. 4. Vue basic instruction
  52. Java 发起 http 请求
  53. Java initiates HTTP request
  54. 网站由http升级为https图文教程
  55. Upgrade the website from HTTP to HTTPS
  56. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  57. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  58. 混合开发入门 Vue结合Android/iOS开发仿京东项目App
  59. Hybrid development entry Vue combined with Android / IOS to develop app imitating Jingdong project
  60. 无缝对接 Tableau,这家月活跃用户 5000+ 的大型银行如何实现自助式分析?