“This is the fifth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Writing in the front

In 2020, we received a request to merge two independent front-end sites into one. I felt quite confused when I received this demand, which was beyond my own cognitive scope. After further research and consultation, THE general steps were as follows:

  • Create a front-end Node project, as long as the function is responsible for configuring the project interface address and request forwarding
  • Create a new front-end Layout project that renders common components such as menus
  • Change the items that need to be merged separately, mainly by removing common components such as menus

I think this is the micro front end. Later, I came into contact with an internal micro-service system of the company, and I could connect my project to the company’s front-end mid-platform system only according to relevant configurations. The main purpose is

  • Subsystem publishing is unconstrained, deployed independently, and updated synchronously
  • Non-invasive integration of backend projects using React, Angular, Vue and other front-end frameworks

While comfortable to use, there are still some questions about the project. So today I’m going to talk about what I understand to be front-end microservices.

I understand the micro front end

The main problem to be solved is that a huge front-end application becomes unmaintainable and uniterable after countless iterations. This pain point is consistent with the problems encountered in back-end projects.

It’s essentially decoupling and decoupling and decoupling.

Advantages:

  • Each project operates independently and is deployed independently without interfering with each other
  • The speed of project compilation and packaging is significantly improved, and the whole project will not be repackaged because of an accident
  • Projects can be reused, such as user modules. Multiple projects can share one

Ali Micro front-end framework qiankun

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.

About the concrete construction/deployment of Qiankun

  • Micro-front-end construction based on Qiankun
  • Implementation of automatic deployment of GitLab-CI/CD with Microfront-end Qiankun + Docker + Nginx

Of course, it is better to use official documents to get started with qiankun project practice.

Write in the last

  • Everyone knows Iframe seems to have all the attributes of a microfront-end, so why not?

    For the answer, see Why Not Iframe. In a word, Iframe is too restrictive and Not developer friendly.

  • Some thoughts on the micro front end

    In my opinion, the front-end microservice framework needs to pay attention to the following points:

    • A set of unified UI, Layout framework
    • A complete set of user login, authentication basic services
    • A complete set of microservice access process

Conclusion: Qiankun provides a set of frameworks that can integrate React and Vue to quickly build a production-usable micro front-end architecture system. How this architecture is used in real projects and the value it can bring is still up to developers to decide based on their actual needs.