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

Alibaba cloud technology blog 2021-02-23 03:41:56
connect ground gas micro end

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 :

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 :

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 :

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 :

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 .

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

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 .

Link to the original text

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

本文为[Alibaba cloud technology blog]所创,转载请带上原文链接,感谢

  1. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  2. Javascript数据类型
  3. HTTP interface debugging tool! 48000 star HTTP command line client!
  4. Parameter encryption of front end URL link band
  5. HTTP interface debugging tool! 48000 star HTTP command line client!
  6. Three front end frameworks: data binding and data flow
  7. Reading Axios source code (1) -- exploring the realization of basic ability
  8. Event bubble and capture in JavaScript
  9. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  10. R & D solution e-Car front end monitoring system
  11. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  12. R & D solution e-Car front end monitoring system
  13. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  14. 解决ajax跨域问题【5种解决方案】
  15. Top ten classic sorting of JavaScript
  16. HTTP 1. X learning notes: an authoritative guide to Web Performance
  17. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  18. My http / 1.1 is so slow!
  19. Why Vue uses asynchronous rendering
  20. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  21. The tapable instance object hook of webpack4. X core tool library
  22. The tapable instance object hook of webpack4. X core tool library
  23. Using libcurl for HTTP communication in C + +
  24. Using libcurl for HTTP communication in C + +
  25. Using CSS variable in Vue
  26. Deeply understand the update of state and props in react
  27. No matter how fast the Internet is, it's useless! In addition to Baidu disk, there is this website slow to let you eat shriveled
  28. Baidu share does not support the solution of HTTPS
  29. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  30. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  31. Vue cli creates vue3 project
  32. Nginx reverse proxy for windows authentication using NTLM
  33. Rust tutorial: introduction to rust for JavaScript developers
  34. Deploying personal blog to Tencent cloud with serverless framework
  35. R & D solution e-Car front end monitoring system
  36. JavaScript advanced learning
  37. Spend 1 minute to master these 5 ppt tips, courseware making less detours
  38. Vue: vuex persistent state
  39. React native gets the current network state of the device Netinfo
  40. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  41. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  42. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  43. Vue determines whether the El form in the elementui is updated or changed. If it changes, it will prompt whether to save it. If it does not change, it will leave directly
  44. Algorithm problem: sum of two numbers -- JavaScript and Java implementation
  45. High performance nginx HTTPS tuning
  46. JQuery advanced
  47. day 30 jQuery
  48. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  49. TCP/IP 开胃菜 之 HTTP
  50. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  51. JavaScript data type
  52. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  53. Solve Ajax cross domain problem [5 solutions]
  54. HTTP of TCP / IP appetizer
  55. Optimization of pod creation efficiency in serverless scenario
  56. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  57. First knowledge of HTTP / 1.1
  58. First knowledge of HTTP / 1.1
  59. Webpack learning notes series 05 devserver
  60. Webpack learning notes series 04 - resource processing optimization