I used a micro frontend on a company project and almost got fired

The beginning of the story

• When the micro-front-end qiankun started to fire last year, I noticed that our company’s Saas system can be used to solve some problems in the UI and experience, and to smooth the transition of the technology stack, but when the machine is not mature enough

• I seized the opportunity this year. I felt it was time to advance the micro front end. In addition, the company's internal Xingzhou platform (Devops platform) also began to promote, and I started thinking about transforming it.

  The transformation is not to show off skills, but to improve the development and user experience! When you need a micro front end, use it again

I did a technology sharing inside the company

• My micro-front-end transformation is to use the configuration of k8s + qiankun + ingress(path) to achieve the purpose of rapid deployment without cross-domain issues.

Transform the background

• There are several sites, but the UI display between sites is different, we look very unprofessional
• Different sites obviously belong to our department's system, but when you jump, you need to jump as a whole and display all the white screens. The user experience is very poor.
• Unable to undertake global requirements. For example, the version of the technology stack of multiple sites is different. To make a requirement here, you need to implement it once in several different versions of the technology stack, and it is difficult to maintain the same effect.

why not iframe

• Why not use iframe? This is the first problem that almost all micro-front-end solutions will be diss.
• However, most of the micro front-end solutions have given up on the iframe solution by agreement. There is naturally a reason, not to "show off skills" or deliberately pursue "maverick".
• If you don't consider experience issues, iframe is almost the perfect micro front-end solution.
• The biggest feature of iframe is to provide a browser native hard isolation solution, whether it is style isolation, js isolation and other issues can be perfectly solved. But his biggest problem is also that his isolation cannot be broken, resulting in the inability to share the context between applications, and the resulting development experience and product experience problems.
• The url is out of sync. The browser refreshes the iframe url status is lost, and the back and forward buttons cannot be used.
The UI is not synchronized and the DOM structure is not shared. Imagine a bullet frame with a mask layer in the iframe at the bottom right corner of the screen. At the same time, we require this bullet frame to be displayed in the center of the browser and automatically centered when the browser is resized..
• The global context is completely isolated, and memory variables are not shared. For the communication and data synchronization requirements of the iframe internal and external systems, the cookies of the main application must be transparently transmitted to the sub-applications with different root domain names to achieve the non-logging effect. slow. Each entry of a sub-application is a process of browser context reconstruction and resource reloading.
• Some of the problems are easier to solve (question 1), some problems we can close one eye (question 4), but some problems are difficult to solve (question 3) or even impossible (question 2) , And these unsolvable problems will bring very serious experience problems to the product, and eventually lead us to abandon the iframe solution.

Ali’s introduction to qiankun copied above, I think it’s pretty good. I have already memorized it silently with a small book.

The core value of micro front end for me

• Technology stack has nothing to do-Deconstruct the boulder application
• The solution is as simple as using iframe as a micro front end, and at the same time it solves various experience problems brought by iframe. In an ideal state, the micro-front-end application targeted for this purpose will automatically have the circulation capacity, and this circulation capacity will not be lost due to the upgrade of the main application (that is, the micro-front-end application that can access the main application in 21 years) , It should be able to access and operate normally by 2025, and also retain the ability to circulate between different main applications)
• The B-side product has a long life cycle to ensure that our ancestral code can be migrated smoothly, and how to ensure that I can still use the popular technology stack in a few years.

• To strengthen the integration capabilities of our platform and products, enterprise-level projects need this

  Officially begin

  What is a micro front end?

  Micro front-end is a technical means and method strategy for multiple teams to jointly build modern web applications by releasing functions independently

• The micro-front-end architecture is designed to solve the problem of unmaintainable application after a single application has evolved from a common application to a monolithic application due to the increase and change of participating personnel and teams in a relatively long time span. .

• This type of problem is especially common in enterprise-level Web applications

  Principle of Micro Front End

Sub-application communication mechanism

Considering from many parties, we chose the mainstream and mature micro front-end framework in the industry: qiankun

Qiankun's core design concept

• 🥄Simple Because the main application micro-applications can be independent of the technology stack, qiankun is just a jQuery-like library for users. You need to call several qiankun APIs to complete the micro-front-end transformation of the application. At the same time, due to the design of qiankun's HTML entry and sandbox, the access of micro-applications is as simple as using an iframe.
• 🍡 The core goal of the decoupling/technology stack-independent micro front end is to disassemble the boulder application into several loosely coupled micro applications that can be autonomous, and many designs of qiankun adhere to this principle, such as HTML entry, sandbox, inter-application communication Wait. Only in this way can we ensure that micro-applications truly have the ability to develop and run independently.

Deployment before transformation

• The deployment before the transformation, resolve the domain name path , according to path , for example: myfuwu.com.cn/A points to project 1

Deployment after transformation

• Because k8s has the ability to configure multiple ingress path A B C D of the path 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 sub-application according to the url to match. (At this time, there is a maintained registry. For example, when path is A , go to request the project F

  In this way, the micro front end does not cross domains, and does not change any jump paths in the code, and the deployment is realized.

• It only took me 20 minutes from the beginning of the deployment to the successful deployment, so a professional Devops platform is very important

Problems encountered

• In the micro front end mode, when you nest a sub application page in a micro front end mode through an iframe, the window.xx method written in the sub application will not be found. At this time, it needs to be written in the window of the base
• It is recommended that the dependencies loaded through script etc. be unified on oss or your own file service, so that it is convenient to set up cross-domain, etc.
• If it is possible to load the script twice, add the ignore attribute, otherwise an error will be reported
• Style isolation is very important, it is recommended to use class to distinguish
• There is no need to enable pre-loading in development mode, and the experience in production mode is much better.

to sum up

• On the whole, the difficulty of the micro front end lies in the realization of the lowest cost transformation. Like me, the code in the project is not changed to achieve the lowest cost, so that other small partners can develop and deploy sub-applications separately, or they can be integrated into the micro front end. Mode
• The most bizarre problem I encountered at the time was OSS. Alibaba Cloud’s OSS often returned cors headers without cross-domain, causing users to have a blank screen. I directly removed OSS and created a file service myself to store static resources (this The problem is really serious. We are an enterprise-level application. The white screen can be said to be a super serious problem, but fortunately, the traffic was cut away in time, and the problem was solved later)

By the way, a customer used our system today, a young lady, I said to her on the phone: Hello, I am the research and development of xxx, can you not log in today? Can I help you see it remotely?

• As a result, Miss Sister asked us to investigate for a day, and finally found that her account was in lowercase, but she could not log in because she filled in uppercase, and almost made us buy train tickets overnight and ran away.

If it feels well written, help me to order the 160f77fad80627 star/watching/like/follow/forward it

Or if you need more information on the micro front end can add my micro letter, after public concern number menu bar links have my way ~