For Web applications, the front end is getting bigger and the back end is getting less and less important. 80-90% of the code in modern Web applications is front-end code, with very little back-end code. As you can imagine, most new Web applications today face a similar situation.

Web applications also change over time, as do development techniques and frameworks. This requires support that allows different front-end frameworks to coexist, such that old modules built in Vue2 need to be integrated with new modules built in React or Vue3.

Individual applications are becoming bloated

A single approach to a large front-end application becomes cumbersome and requires a way to break it down into smaller modules that can run independently.

Such as:

  • apps.devpoint.cn/micro: An entry page built using static HTML

  • Apps. Devpoint. Cn/Settings: use vue2 build old module

  • Apps. Devpoint. Cn/dashboard: use vue3 build new modules

Here are a few things you need to do:

  • A pure JavaScript code base that manages routing and user sessions, as well as some common CSS. Both should be as light as possible.

  • A single set of modules, “applets,” are built on various frameworks and stored in different code bases.

  • A deployment system that integrates all modules from different code bases and deploys them to the server when modules are updated.

The solution is the micro front end

Many companies, it turns out, are using the same approach, called “Micro frontends”. The term Micro Frontends first appeared in the ThoughtWorks Technology Radar in late 2016, extending the concept of microservices to the front-end realm. Within the microservices framework you can build a rich and powerful browser application, a single page application, on top of the microservices architecture. Over time, the front end faces increasing requirements and difficult code maintenance, which is often referred to as a front-end monolithic architecture.

The idea behind a micro front end is to treat a Web site or Web application as a combination of features developed and owned by a separate team. Each team has a different business or task area that they care about and specialize in. The team is cross-functional, developing its functionality end-to-end, from the database to the user interface.

Front-end monomer architecture

Microfront-end architecture

Implementing a micro front end

There are several common ways to implement a microfront end, but they are not limited to:

  1. Single-spa (a front-end microservice javascript framework) : It can combine multiple frameworks on the same page without requiring a page refresh (see the React, Vue, Angular 1, Angular 2 DEMO).
  2. Integrate multiple single-page applications through different urls: these applications usenpm/bowerComponents implement integration.
  3. Isolate microapplications toiframeLibrary andWindow.postMessageAPI for coordination.iframeThe data state shares the API exposed by its parent window.
  4. Communication between different modules is achieved by sharing an event bus (for example, EEV), each of which uses its own framework to handle both incoming and outgoing events.
  5. Integrate different modules using Varnish Cache.
  6. Web Component Integration: Web components are a set of standards proposed as a W3C specification. Allows you to create reusable components that can be imported into a Web application, just like widgets that can be imported into any Web page. Web components can be packaged into microservices along with the back end, simplifying the front-end application to a route that orchestrates the different Web components.
  7. “Blackbox” React components.

resources

  • Single-spa framework (see above).
  • Micro-frontends.org (GitHub warehouse), contains “techniques, strategies and methods for building modern Web applications with multiple independent teams”.
  • Project Mosaic, a collection of libraries that support microservices-style architectures for large web sites.