preface

A friend of mine who did a test on netease last month told me that some of them were sharing their “micro front end” experience online and said it sounded great. I pointed it out to him directly that it was useless, not very practical, and gave him a shock. And now, I’m wearing the pain mask.

This article may mainly record the process of problem solving, from the beginning of research, writing demo, finding problems, searching materials and solving problems. After a couple of weeks of backtracking, simply embedding a new app written by ionic4 in ionic1 may not seem very helpful. And the process will be longer, because I am also the first time to actually contact the preparation of micro front-end (Qiankun), careful reading!

Our app was written at the beginning of 2017 using Ionic1 (ular1), which doesn’t even have a Webpack, simply importing JS files with script tags, and then packaging them with Cordova. It was already on the way of reconstruction, but our boss needs to separate out one of the modules for reconstruction, which can be sold as a single product (new APP) and integrated into the existing APP for original customers to use. I even wonder if the boss is always paying attention to the development of the front end, I listened to this demand, feel he almost did not say the word “micro front end”.

start

Since the problem has appeared, it will always be solved. Since this article is written while doing, it may fail in the end. If it fails, the APP may be rebuilt in the next few months, or it will be directly destroyed by KTV. Research failure + (refactoring | | KTV) = double mask pain. As for the use of Qiankun in our project, I initially think there may be several problems: 1. 2. Communication between applications 3. Can the old project be modified to fit the micro front-end project (ionIC1 compatible with Ionic4) 4. Are different versions of ionic Native plug-ins compatible or are there any solutions available

one Framework using

Originally thought simply according to a document to run a demo should be no problem, as expected or too naive. First, I built a simplest page, introduced JS, and called the qiankun registered micro-application in JS. Two micro-application projects were created, one was a VUE project with vue-Router, and the other was a Vue project without vue-Router. First, the simplest layout and display were carried out.

After a simple layout, we now start two vue projects locally (vue-first without vue-router, vue-second with vue-router) with ports 8001 and 8002, then register the microapplication in main.js and start it. Micro application in the configuration of the official website also said very clear, click on the home page of the project practice, choose VUE, you can see, code copy and paste, should have no problem!

Then start the project and you can see that vue-Second has been mounted on our app. We can switch from Home to About without any problem.

However, it can be seen that the current routing mode is history mode, and the server needs to cooperate with rendering to display the routing normally after refreshing, but the project needs hash mode, so it needs to be changed.

First change the activeRule in main to ‘#/vue-second’, then change the routing mode in vue-Router to hash mode, and add the vue-second prefix in the case of micro applications being run by Qiankun

The route has been successfully changed to hash mode. After refreshing, there is no problem and it can be displayed normally. The first task, the basic operation of the project should be ok.

However, there is a pit in the middle, when I jump to the about page, the js loading path is wrong, resulting in 404, which is not in the loaded Vue project path, but directly under the current port, which needs to be configured in webpack. This question is also addressed in FAQ qiankun.

two Communication between applications

Qiankun also provides apis for communication between applications, so this should be a good point to copy documents and run demos.

If the main application changes state, it will also trigger the callback function.

3. Embed a new app using a micro front end in an existing app

Since it is decided to introduce a micro front end, there must be a master application. There are two schemes. The first is to create a master application, configure routing information and so on, and embed the original APP and the new module. I choose the second solution, because if we use the first one, we need to make a relatively large transformation of the original APP, which is completely inconsistent with our original intention. In accordance with the principle of minimal change, I decide to use the original APP as the main application.

Once the plan is settled, the rest is simple. Build an Ionic app and start the service locally. Unfortunately, the Ionic has already been converted to the VUE3 version, ending its micro front end, and should be rushing to the VuE3 in a hurry.

Create an Ionic app locally and start the service locally. Then complete the configuration items as in the vUE project above. I won’t go into the details of the process, because this is biased towards the needs of the company.

Then add a microfront-end object to the previous main.js and set it as the default object. Then start the service.

In console, there are a bunch of errors, but when I click sourcemap, I can’t find anything wrong. Then began the endless information, analysis of the problem, because it is spare time to see, before and after adding up for many days, or nothing. This kind of thing is the most painful, obviously the time spent, the result is nothing.

Error: error: error: error: error: error: error: error: error: error: error: error: error: error: error: error: error: error: error: error: error Window. constructor () ¶ Window. constructor () ¶ Window. constructor () ¶ Window. constructor () ¶ Window. constructor () ¶ Window. constructor () ¶ window. constructor () So I printed out the window object on both sides and found the problem.

The print above is the window of the main application, while the print below is the Window of the micro application. It is found that the window of the micro application uses a proxy proxy, and the problem can be easily solved once the target is established. To prevent operations in microapplications from affecting global Windows, each microapplication’s window is an object that uses a proxy. After configuring sandbox: False in Qiankun. Start, the app will be displayed successfully.

However, since sandbox is not used any more, there is definitely a hidden danger in the global operation of Windows, but I haven’t encountered it yet. There is no specific mention in the document of Qiankun, so we can only analyze the specific problems by then.

After the page can be displayed formally, since the previous APP uses hash routing, the route configuration only needs to be changed to change the route of the current micro-application to hash mode.

It’s just a new app embedded in a blank page, now comes the real challenge! I directly took out the old IONic1, changed the configuration routing, and introduced Qiankun. I found that the operation process was also relatively smooth. There was a short white screen loading during switching back and forth, which might need to be optimized.

Four. The plug-in USES

Since ionic4 is embedded in ionic1, the plugin is surprisingly easy to use. The original plugin was introduced directly to the new app. Just use the plugin for cordova in the micro front end environment and the plugin for ionic4 in the standalone environment.

conclusion

It took about 3 weeks to complete the whole process. It was really painful, painful and painful. I said the important things three times. And get ridiculed by the tech lead, just writing a demo, is that really so much trouble. What a hassle! I really thought about giving up many times in the middle. After all, the document only teaches 1+1=2, and what should be done is 1.1+1.1=2.2, HHH. However, in the end or step by step down, in the demo, or quite a sense of achievement. However, the article has written this ghost appearance, also did not think of, before writing also full of confidence to study the realization principle of the micro front end, and then write in together, can only be made up behind. I learned more and more things, and I owed more and more technical debt… Come on together, with your mutual encouragement.

Wechat official account: Lazy dog Small front end