Micro distal [daily notes]

1. What is the front-end micro

Front-end micro-micro main draw back-end service concept. Simply put, is to a Big Mac (Monolith) is split into a front-end engineering a small project. They are fully equipped with independent development, operation capability. The entire system will collaborate on these small projects to achieve and demonstrate the interaction of all the pages.

Micro service so you can follow to understand the comparison:

Micro Services	Micro front end
A micro service is generally constituted by a set of interfaces, interface address is URL. When the service receives a request micro interface, you will find the appropriate routing logic, the output response content.	A micro-tip end is composed of a set of pages, the page address are URL. When a request is received front-end micro-page URL, it will be routed to find the appropriate components to render the page content.
Micro-services have a backend gateway, as a single inlet for receiving all client requests the interface, the interface according to the matching relation with the URL of the service, routed to the corresponding service.	Micro will have a front end loader, all as a single inlet to receive the URL to access the page, the page URL according to the matching relation with the micro front end, the front end of the corresponding selected micro-loading, by the front-end micro-routing response URL.

1.1 micro front-end architecture

Micro generally front-end architecture may be performed by the following ways:

Use routing HTTP server to redirect multiple applications
Design Communications, loading mechanism on different frameworks, such as Mooa and Single-SPA
To build a single application of a combination of a plurality of independent applications through the assembly
iFrame. IFrame and using message passing custom
Build applications using a pure Web Components
Construction of combined Web Components

2. Why use micro front end

Mainly from several angles below

Packing speed
Page load speed
The multiuser collaboration
sass product customization
Product Split

2.1 Packing speed

Engineering is growing, packing more and more slowly. Think edx finish the entire packaging process, how much time? Compile a static resource edx need 20-30 minutes.

6 months ago, we had never been seen or B-end engineering a Monolith. There were already more than 20 dependent, more than 60 public assemblies, more than 200 pages, more than 700 docking interfaces. We used Webpack 2, and enable DLL Plugin, HappyPack 4. 4 compiled using threads in my personal host, probably five minutes. And if not split, we are doing now nearly 400 pages, more than 1,000 docking interfaces.
What does this mean time? It will not only delay the time our developers, will also affect the efficiency of the entire team. When on-line, at Docker, CI environment, etc., will be extended time consuming. If after a few Bug deployed immediately to repair the line, it is not coming to know what time it is.
After using the micro front-end transformation, we currently have 26 micro front-end engineering, packaged average time between 30-45 seconds.

2.2 multiuser collaboration

After using micro front-end code to submit the risk of conflict is blocked, it goes up in equal shares to each project.

In the collaboration, we have three places in the national team of front-end, the development of so many people in the same project, the probability of conflict suffered the code will be very frequent, and the impact was relatively large conflict. If a problem occurs in the code, leading CI fails, all other people's code and submit updates will also be blocked.

2.3 Sass product - customization and localization

Heart wants SaaS product, but customers always do customization.

Customization often means, rub it into "custom business logic" in the code.
Localization will have to consider code security aspects of how not to put all the source code to customers, you can implement custom?

Through the micro front-end technology, we can easily reach the lower limit of the localization code security - the front-end module source code only to the customer that he purchased. Customization most simple stand-alone new module also simple: delivery teams to add a new micro-front-end engineering can be, do not need to rub it into the existing R & D projects.

3. How to integrate micro front-end app

In front of the micro program, there are several issues we have to solve:

A plurality of rear end corresponding to the front end requires
Provide a seamless integration of application registration mechanism, complete the application
- How different subsystems business to focus on a large platform, unified open?
- How to give permission so that it could access a specific service module platform while prohibiting its free access rights to different users of the service module?
- How to quickly access new subsystem, and subsystem version management, to ensure the synchronization functions?
Integrated applications and deploy applications independent release build

3.1 Entrance project

The final line is running a single-page application, and project development requirements of the application independent. So we created a new entrance project to integrate the various applications. Entrance Project (Portal), in addition to providing "sub" registration, merge function, but also provide some public support, such as

User login mechanism
will be unified login and authentication of users to the SSO problem, all projects have to access back-end Server SSO check the login status, so as to protect the consistency of user authentication security between business systems.
Public reference library
every business project is a separate front-end engineering, so there will be some of the same dependencies, such as Vue, moment, lodash and so on. If these elements are packed into their vendor.js where it is bound to cause too much redundant code, the browser running memory pressure increases. We rely on these public, public assembly, CSS, Fonts and so on into a project, the project by the package will depend, assembly export, and is injected into the global UMD way.
Permission to take the menu
Global exception handler
Global number of large column micro front-end [daily notes] According to RBI

3.2 route distribution applications

In the single-page application, we will be based on the route distribution components. In the front-end micro-projects, we need to route distribution to different applications.

Http reverse proxy
This can usually be accomplished by a reverse HTTP proxy server. But this looks more like a way to aggregate multiple front-end applications, but we will put together these different applications together so that they look like a complete whole. However, each time the user application from A to B when applications need to refresh the page.

Javascript client asynchronously loaded
in this way is, the client browser via Ajax load application, and the contents of the different modules are inserted into the corresponding div, but must also manually clones each script tag for it to work.
"Subproject" external output HTML page does not require entry, resource files can only output, resource files, including js, css, fonts and so on imgs.

function  (element) {
  [].forEach.call(element.querySelectorAll('script'), function (nonExecutableScript) {
    var script = document.createElement("script");
    script.setAttribute("src", nonExecutableScript.src);
    script.setAttribute("type", "text/javascript");
    element.appendChild(script);
  });
}

document.querySelectorAll('.load-app').forEach(loadPage);

Components Web
REACT, reusable components of vue. Each component is independently developed, their main application program using assembled into the final application.

class Header extends HTMLElement {
  attachedCallback() {
    ReactDOM.render(<App />, this.createShadowRoot());
  }
}

document.registerElement('microfrontends-header', Header);

4. Some frameworks

4.1 single-spa

single-spa is a framework for bringing together multiple javascript microfrontends in a frontend application.

To build a single-spa to load react + vue two App: https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op
official document: HTTPS: // single-spa.js.org/docs/getting-started-overview.html
official Demo: https://single-spa.surge.sh/
Demo warehouse: https://github.com/CanopyTax/single-spa-examples

git clone [email protected]:CanopyTax/single-spa-examples.git
cd single-spa-examples

 Install yarn at https://yarnpkg.com/lang/en/docs/install/
yarn
yarn build
yarn start
open http://localhost:8080