How to share resources among multiple applications?
In the past, most of the processing methods were extracted and referenced in the form of NPM packages. For example, when there may be some business logic modules or other reusable modules between multiple application projects, they are extracted and managed and used in the form of NPM packages. But this raises the following questions:
• ** Releases are inefficient. ** If you need to iterate the logical services in the NPM package, you need to release the NPM package first, update the NPM package version for each application that uses the NPM package, and then build and release the NPM package version for each application, which is a tedious process. If there are more applications involved, there will be more effort and effort.
•** Multi-team collaboration is prone to irregularities. ** An NPM package containing generic modules is a shared asset and “everyone” owns it, but in practice this usually means that no one owns it. It can quickly become cluttered and stylistically inconsistent code with no clear convention or technical vision.
These issues led us to realize that scaling up front-end development so that multiple teams can develop a large and complex product simultaneously is an important but difficult challenge.
So, back in 2016, the micro front end concept was born.
What is a micro front end?
The concept of a micro front end
Micro Frontends: Micro-frontends.org/ defines the Micro front-end concept:
Techniques, strategies andrecipes for building a modern web app with multiple teams that can shipfeatures independently.
According to The Website of Micro Frontends, the microfront-end concept is an extension of the microservices concept, abandoning the large monolithic approach and breaking the front-end into small, simple blocks that can be independently developed, tested, and deployed. While still aggregating into a product in front of the customer. It can be understood that a microfront-end is an architectural style that aggregates several small, independently deliverable front-end applications into one whole.
A few points to note:
• A microfront end is not a specific technology, but rather an integration of technologies, strategies, and methods, which may be presented as a macro architecture in the form of scaffolding, helper plug-ins, and specification constraints. There are several alternatives to this architecture, all of which have their pros and cons, but the one that fits the current business scenario is a good one.
• ** The micro front end is not constrained by the technology stack. ** The design of each set of micro front-end solutions is based on actual needs. If multiple teams use the React stack uniformly, there may be no requirement for cross-stack use of micro front-end solutions. If multiple teams use react and Vue technology stacks at the same time, there may be high requirements for cross-stack microfront-end.
Usage scenarios for the micro front end
1. Break up giant apps to make them more maintainable.
2. Compatible with historical applications to achieve incremental development.
Advantages of a micro front end
Synchronous update
Compared with the NPM package method of extraction, let us realize the importance of updating process and efficiency. Because the micro front-end is the aggregation of multiple sub-applications, if multiple service applications rely on the function module of the same service application, only the service application needs to be updated, and other service applications can be updated immediately, thus shortening the update process and saving the update cost.
The incremental upgrade
Migration is a very time consuming and difficult task. For example, there is a management system that has been developed and maintained using AngularJS for three years. However, as time goes by and team members change, AngularJS can no longer meet the requirements in terms of development costs and staffing requirements. Therefore, the team wants to update the technology stack and implement new requirements in other frameworks. But what about existing projects? Direct migration is not possible, and a complete rewrite in the new framework is not practical.
The solution is to use a microfront-end architecture, which allows you to develop new requirements entirely using the new framework while preserving the original project, and then integrate the old project with the new project. In this way, not only can the product get better user experience, but also can make the team members in technology progress, product development cost is also reduced to the lowest.
Independent deployment and distribution
In the current single-page application architecture, the user interface is built by components. After the development of each component or function in the application or the completion of bug repair, the entire product needs to be rebuilt and released every time, and the task is time-consuming and tedious.
After using the micro front-end architecture, can will not be able to function modules of the split into separate application, the function module can separate build release, build time will be very fast, don’t need to change other content after release application will automatically update, this means that you can be frequently build release operation.
Independent team decision making
Because a microfront-end architecture is framework-agnostic, when an application is being developed by multiple teams, each team can work with its own technology stack, which allows the team to make appropriate decisions about which technology to use, making collaboration less rigid.
Micro front landing scheme
Self-organizing mode: Intermodulation by convention, but problems such as dealing with third party dependencies.
Pedestal mode: Manage sub-applications by building pedestals and configuring hubs. For example, there are generic solutions based on SIngle Spa, as well as tailored solutions based on the team’s business.
Decentralized: Off the pedestal, each application can share resources with each other. For example, the EMP micro-front-end solution based on Webpack 5 Module Federation can realize multiple applications sharing resources with each other.
Among them, the EMP micro-front-end scheme in the decentralized mode is worth paying attention to at present, which can not only realize the call across the technology stack, but also deeply customize shared resources among the applications of the same technology stack. If you are just beginning to research the micro front end, you can try to understand the EMP micro front end solution, may bring you a good use experience.
Systemjs modular solution
Systemjs:github.com/systemjs/sy…
In the microfront-end architecture, microapplications are packaged as modules, but the browser does not support modularization, and you need to use SystemJS to implement modularization in the browser.
Systemjs is a JavaScript library for modularity, with its own modularity specification.
During the development phase we can use the ES module specification and then use WebPack to convert it to systemJS supported modules.
** Use WebPack to package the React application as a SystemJS module, and load the module in the browser with SystemJS.
NPM install [email protected]@4.4.0 [email protected] [email protected]@babel/[email protected] @ Babel/[email protected] @ Babel/[email protected] @ Babel/[email protected] [email protected]
src/index.html
src/index.js
src/App.js
package.json
webpack.config.js
