The beginning of the story

  • From the micro frontqiankunI noticed it last year when it started to go viral, our companySaasThe system could use this to solve some UI and experience issues, as well as smooth transfer of the technology stack, but the time is not yet ripe

  • This year, I felt like it was time to push the micro front end, and the company’s internal DevOps platform started to roll out, so I started thinking about this

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

I did a technology sharing within 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 problems

Reform background

  • Currently there are several sites, but the UI presentation varies from site to site, and we look unprofessional
  • Different sites clearly belong to the system of our department, but the jump needs to be an overall jump and all the white screen, the user experience is very poor
  • Can not undertake global requirements, such as: multiple site technology stack version is not the same, here to do a demand, need to go to several different versions of the technology stack to achieve a time, but also difficult to maintain the same effect

why not iframe

  • Why not use an iframe? This is the first question that almost any micro front end solution will be diss.
  • However, the majority of micro front-end solutions have abandoned the iframe solution for a reason, and it is not for the sake of “show-off” or “uniqueness”.
  • Regardless of experience issues, iFrame is almost the perfect micro-front end solution.
  • The biggest feature of iFrame is that it provides a browser-native hard isolation solution, which can be solved perfectly, whether it’s style isolation, JS isolation, etc. But its biggest problem is that its isolation can not be broken through, resulting in the context between applications can not be shared, resulting in the development experience, product experience problems.
  • URLs are out of sync. Browser refresh iframe URL state missing, back and forward button cannot be used. UIs are not synchronized, DOM structures are not shared. Imagine a popup with a mask layer in the lower right quarter of the iframe of the screen, and we require the popup to be centered by the browser, and to center automatically when the browser 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 main application cookie to be transmitted to the root domain name are different in the sub-application to achieve the effect of free login. Slow. Each time a child application enters, it 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.

The above copy of Ali’s introduction to Qiankun, I think it is very good, have taken a small notebook down to recite silently

The micro front end to me is its core value

  • Technology Stack Irrelevant – Deconstructing Boulder Applications
  • The solution is as simple as using an iframe as a micro front end, while addressing the various experience issues that iframes bring. 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 lifecycle of B-side products, ensuring smooth migration of our ancestral code, and how to ensure that I will still be able to use the current technology stack a few years from now

  • Enhance the integration capability of our platform and products, which is very much needed for enterprise level projects

    The official start of the

    What is a micro front end?

    Micro-front-end is a kind of technical means and method strategy for multiple teams to jointly build modern Web applications by publishing functions independently

  • The micro front-end architecture is designed to solve the problem of unmaintainable application after the monolithic application evolves from an ordinary application to a monolithic application due to the increase and change of personnel and teams involved in a relatively long time span.

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

    Micro front principle

Subapplication communication mechanism

After multiple considerations, Qiankun, the mainstream mature micro front-end framework in the industry, was chosen

The core design philosophy of QIANKUN

  • 🥄 simply because the main application micro application can do technology stack independent, Qiankun for users is just a library similar to jQuery, you need to call several Qiankun API to complete the application of micro front end transformation. Also, thanks to Qiankun’s HTML Entry and sandbox design, accessing microapps is as easy as using an iframe.
  • 🍡 Decoupling/technology Stack-Independent Micro Front-end The core goal of Qiankun’s micro front-end is to break down band-stone applications into loosely-coupled micro applications that can be autonomous, and many of Qiankun’s designs follow this principle, such as HTML Entry, sandbox, and inter-application communication. Only in this way can we ensure that micro applications are truly capable of independent development and independent operation.

Deployment before renovation

  • Rebuild the deployment before resolving the domain namepath, according to thepathFor example, myfuwu.com.cn/A points to project 1

Deployment after modification

  • Due to thek8sThere are multiple configurationsingress pathSo I’m going to take the previousA B C DthepathThey all point to the base project at the micro front, so that when users visit the base project, they only visit the base project first

  • The base project then parses the URL and loads the real child application according to the URL match. (There is A maintained registry, for example, to request projects deployed in F if path is A.)

    In this way, the micro front end does not cross the domain, does not change any code inside the jump path, the implementation of deployment.

  • It took me only 20 minutes from start to finish, so a professional DevOps platform is important

Problems encountered

  • The window. XX method written in the child application will not be found. It will need to be written in the window of the base
  • It is suggested that the dependencies loaded through script should be put into the OSS or their own file service, so as to facilitate the setting of cross-domain etc
  • If it is possible to load a script twice, use the ignore attribute. This will result in an error
  • Style isolation is important and class separation is recommended
  • You don’t have to preload in development mode, and you have to preload in production mode for a much better experience

conclusion

  • On the whole, the difficulty of the micro-front-end lies in the implementation of the transformation at the lowest cost. Like me, I do not change the code in the project to achieve the lowest cost, so that other partners can not only develop and deploy sub-applications independently, but also 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 flow was cut away in time, and this problem was solved later.)

By the way, make fun of today’s customer use our system, a little sister, 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 for you remotely?

  • As a result, the little sister asked us to check for a day, and finally found that her account was in lowercase, but she filled in uppercase, so that she could not log in, and almost made us buy train tickets overnight and run away

If you think it’s good, click it for me
Star tag/watch/like/follow/forward!

Or you need more information micro front can also add me WeChat, pay attention to the public number after the menu bar has the way to contact me