The beginning of the story

  • From the micro front endqiankunI noticed it last year when it startedSaasThe system can use this to solve some problems of UI and experience, as well as smooth transition of technology stack migration, but the timing is not mature enough
  • This year the timing was right and it felt like it was time to push the micro front end, plus the company’s internalStar boatThe platform (Devops platform) started to roll out, and I started thinking about the transformation

Transformation is not to show skills, only to improve the development, user experience! Use the micro front end when you need it

I did a tech share internally

  • My micro front end transformation uses the configuration of K8S + Qiankun + Ingress (PATH) to achieve the purpose of rapid deployment without cross-domain problems

Reform background

  • There are several sites, but the UI presentation is different from one site to another, and we look unprofessional
  • Different sites clearly belong to the system of our department, but the whole jump is required and all blank screens are displayed when jumping, resulting in poor user experience
  • Unable to undertake global requirements, for example: multiple sites with different versions of the technology stack, here to do a requirement, need to go to several different versions of the technology stack once, it is difficult to maintain the same effect

why not iframe

  • Why not use iframe? This is the first question that almost any microfront-end solution will be diss.

  • But most of the micro front-end solutions have abandoned the IFrame solution, naturally for a reason, not to “show off” or deliberately pursue “maverick”.

  • Iframe is pretty much the perfect microfront-end solution, if you leave aside the experience issues.

  • The most important feature of iframe is that it provides a browser native hard isolation scheme, no matter the style isolation, JS isolation and other problems can be solved perfectly. However, its biggest problem is that its isolation can not be broken, leading to the application context can not be shared, resulting in the development experience, product experience problems.

  • The URL is not synchronized. The browser refresh iframe URL status is lost, and the back forward button is unavailable.

The UI is not synchronized and the DOM structure is not shared. Imagine a pop-up with a mask layer in the bottom right corner of the iframe, and we want the pop-up to center the browser and automatically center the browser when resize.

  • The global context is completely isolated and memory variables are not shared. Iframe internal and external system communication, data synchronization and other requirements, the cookie of the main application should be transparently transmitted to the sub-applications with different root domain names to achieve the effect of free registration. Slow. Each child application entry is a process of browser context reconstruction and resource reloading.

  • Some problems better solve the problem of (1), some problems we can turn a blind eye (question 4), but some problems we are difficult to solve the problem of (3) even unable to solve the problem of (2), and these can’t solve the problem it will bring very serious to product experience problems, finally lead us to abandon the iframe solution.

Ali’s introduction to Qiankun is copied above. I think it is quite good. I have taken a notebook and memorized it silently

The micro front end is the core value for me

  • Tech stack independent – Deconstruct monolith applications
  • The solution is as simple as using iframe to do a micro front end, and at the same time solves the various problems of experience brought by iframe. Ideally, as a goal of front-end application, is automatic circulation ability, and the flow capacity is not used for the implementation of the loss and (that is to say, in the 21 years can meet in the application of micro front-end application, in 2025, also should be able to normal access to run normally, and also keep circulation between the main application and ability)
  • The long product life cycle of the B-side ensures smooth migration of our ancestral code, and how do I ensure that I still have access to the hot technology stack years from now
  • Strengthen our platform, product integration capabilities, enterprise projects need this very much

The official start of the

What is a micro front end?

The micro front end is a kind of technical means and method strategy that multiple teams jointly build modern Web applications by releasing functions independently

  • The micro front-end architecture aims to solve the problem of non-maintenance of single application in a relatively long time span, when it evolves from a common application to a monolite application due to the increase and change of people and teams involved.
  • This type of problem is especially common in enterprise Web applications

Microfront principle

Subapplication communication mechanism

After many considerations, the mainstream and mature micro-front-end framework in the industry was selected: Qiankun

The core design concept of Qiankun

  • 🥄 Simply because the main application and micro applications can be stack independent, Qiankun is just a library like jQuery for users. You need to call several apis of Qiankun to complete the micro front end transformation of the application. Meanwhile, thanks to THE HTML entry and sandbox design of Qiankun, accessing microapplications is as simple as using IFrame.
  • The core goal of 🍡 decoupling/Technology Stack independent micro front end is to disintegrate boulder applications into several loosely coupled micro applications that can be autonomous. Many designs of Qiankun are based on this principle, such as HTML Entry, sandbox and inter-application communication. Only in this way can we ensure that microapplications can be developed independently and run independently.

Deployment before transformation

  • Before the transformation of the deployment, domain name resolutionpath, according to thepathFor example, MyFUwu.comApoints to project 1

Deployment after transformation

  • Due to thek8sThere are multiple configurationsingress pathThe ability, so I will be beforeA B C DthepathAll point to the base project of the micro front end, so that when the user visits, only the base project will be accessed first
  • The base project then parses the URL and loads the real child application based on the URL match. There is a registry to maintain, for example whenpathforAAsk to be deployed onFThe project)

This is done, the micro front end does not cross the domain, does not change any jump path in the code, and can be deployed.

  • It took me just 20 minutes from deployment to success, so a professional Devops platform is important

Problems encountered

  • The window.xx method written in the child application will not be found when using iframe to nest a microfrontend sub-application page. Instead, it will be written in the window of the base
  • It is recommended that the dependencies loaded through scripts be placed in oss or their own file services to facilitate cross-domain Settings
  • If it is possible to load a script twice, add ignore, otherwise an error will be reported
  • Style isolation is important, and classes are recommended
  • Development mode does not enable preloading, production mode enable preloading experience is much better

conclusion

  • On the whole, the difficulty of micro front-end lies in the realization of transformation at the lowest cost. As I do not change the code in the project, so as to achieve the lowest cost, other partners can not only develop and deploy sub-applications independently, but also can be integrated into the micro front-end mode

  • The problem I met the most wonderful work was OSS, ali cloud OSS often return without cross-domain cors head, cause the user may hang, I remove the OSS directly, he made a file service, specialized for static resources (this question is really serious, we are enterprise applications, white can be said to be a serious problem, But fortunately, the traffic was cut away in time, and the problem was solved later.

By the way, a little sister, a customer using our system today, I said to her on the phone: Hello, I am the RESEARCH and development of XXX, can you log in today? Can I take a look at it remotely?

  • As a result, my little sister let us search for a day, and finally found that her account number was lowercase, but she filled in uppercase so that she could not log in, almost made us buy train station tickets overnight and run away

If you feel good, please help me to click the star/view/like/follow/forward

Or you need more information about the micro front end can also add my wechat, the public number: the front peak after the menu bar contact me ~