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

As the technology of front and back end separation becomes more and more mature, the back end develops towards micro services, and the front end projects become more and more bloated and have to do more fine-grained separation. In this way, the idea of micro front end becomes popular, and some big factories also introduce some solutions. In this article, let’s take a look at the micro front end.

How does the front end evolve into a micro front end?

From the earliest back and forth end is not separated, with the help of the back end page rendering, JSP, ASP, PHP technology prevailing. With the continuous expansion of the project, the disadvantages of this development form are gradually exposed. The front-end and back-end are more and more complex, with serious coupling and inconvenient division of labor and cooperation. Then the model of front and back end separation was born, engineers who like to do user experience, focus on the front end, engineers who like to optimize server performance, engineers who like to work with data, work on the back end. Before and after the separation, technology is also constantly upgrading and back-end service development, began to micro, front end and as the years precipitation, projects become bloated, packaged compilation speed is slow, and want to try a new technology, large-scale elevated risk to replace the old code, and then the front face, so the front-end development to micro front end times.

What is a micro front end?

Understand what is a micro front have to know what is micro service first, the service is the back end one of the upgrades for service-oriented architecture (soa), with the help of a lightweight communication protocol will organize one by one service, forming a complete set of services, loose coupling between each service, can be developed in different languages, each service provide different responsibilities, and then organize together, provides functions.

The micro front end can be said to absorb the idea of microservices, the front end of the project is also broken up, each project can use different technologies, can be deployed separately, and finally with the unified master application to load the sub-application, the page integration.

The micro front end is to divide different functions into sub-applications according to different dimensions. The child applications are loaded through the master application.

The core of the micro front end lies in the demolition, demolition after closing again!

What are the advantages of microfront-end?

  • Simple, loose coupling
  • The code base is smaller, highly cohesive, easier to maintain, and faster to compile
  • Progressive upgrades reduce the risk of front-end code refactoring
  • Independently deployable
  • Easy for different teams (different technology stacks) to develop and integrate
  • Old apps can’t be thrown away
  • Shared component

What are the implementation schemes of the micro front end?

  • Server-side integration, where necessary, can also establish a set of front-end counterpart structures on the server side, using HTTP server routing to redirect multiple applications.

  • iframe

    The biggest feature is to provide a browser native hard isolation solution, whether it is style isolation, JS isolation and other issues can be perfectly solved.

  • Web Components combines all three

    • Custom Elements: A set of JavaScript apis that allow you to define Custom elements and their behavior, and then use them as needed in your user interface.
    • Shadow DOM: A set of JavaScript apis for attaching a wrapped “Shadow” DOM tree to an element (rendered separately from the main document DOM) and controlling its associated functionality. This way, you can keep the functionality of elements private so that they can be scripted and styled without fear of running afoul of the rest of the document.
    • HTML Templates:<template> 和 <slot>The element lets you write tag templates that are not displayed on rendered pages. They can then be reused many times as a basis for custom element structures.

  • ESM

    ESM has a major drawback of compatibility. Most of the older browsers still cannot be used directly. It can be compiled into compatible code through webpack, rollup, esbuild, Snowpack and other compilation tools.

  • qiankun

    True single-page micro front end framework, based on single-SPA package

  • EMP

    Happy time business in Taiwan independent research and development of single page micro front-end solutions

  • .

5 conclusion

As a back-end engineer, I really don’t have a good grasp of some details of the front end, but micro-service and micro-front end bring more possibilities to our project. The evolution direction of this technology is worth our thinking, and maybe it is you who will lead the next technological era.