Front-end early chat conference, a new starting point for front-end growth, jointly held with the Nuggets. Add wechat Codingdreamer into the conference exclusive push group, win at the new starting line.
The 14th | front-end growth promotion, 8-29 will be broadcast live, 9 lecturer (ant gold suit/tax friends, etc.), point I get on the bus 👉 (registration address) :
The text is as follows
The text is as follows
This is the 37th lecturer of front-end Early Chat, and also the seventh session – front-end micro front-end special session, shared by Yuoxi from Feizu – brief edited version of lecture notes (please see video and PPT for the complete version with demo) :
preface
Hello everyone, I’m Yuxi from Feizhu Front-end. Today’s topic is “How to Implement Integrated Operation Platform of Micro Front-end”. First of all, I would like to briefly introduce myself. The public account Fliggy F2E, which operates the front end team of Flying Pig, as well as the nuggets column, introduces some systematic construction of flying Pig front end to everyone.
The overview
Before 17, 18, 19 years of Weex, interactive, Serverless from 0 to 1 construction, 20 years of this year is mainly to make flying pig micro front-end integrated operation platform construction, which is the theme of today’s sharing
I will tell you from four parts: why we want to make the flying pig integrated operation table, what we want to make it, how we do it and how we want to do it later.
First, why do we need to make the flying pig integrated operation table
Development of operational attributes of flying pigs
In 2012, in the process of Ali ALLIN Wireless, Feizhu App was also created, which is equivalent to a tool attribute, used for users to quickly query ticket information. Around 2014, tool attributes gradually became rich, and after the popularity of Singles’ Day, they slowly changed into a marketing and selling attribute. At that time, various marketing platforms were gradually established.
Around 2017, the operating mentality of the main scene at that time, including the theme mentality of overseas supermarket, good weekend place and so on, shopping guide platform gradually sprouting at this time. 18 years later, with the popularity of Douyin/Livestreaming, feizhu has become more diversified, evolving from theme to content.
With the gradual enrichment and development of the business, all kinds of internal primary and secondary operating platforms are also developing from “availability and efficiency improvement” to “intensive cultivation”. With the construction of the integrated operation platform, it is now at the arrow below.
Pain points in development
With the development of flying Pig business, we have built various operating platforms in recent two years to improve operation efficiency, which can meet the requirements of operation and business completion.
However, as the business complexity of the product itself continues to increase, it can only solve the problem of food and clothing for the operation. Moreover, the demand for mutual investment and exchange of various platforms is increasingly strong. Under this system, the value of 1 + 1 > 2 cannot be brought to the business, and the following pain points need to be solved:
Two, to make what appearance
Pain points to solve the problem above, we start the integration operation table construction projects, aimed at using new technology to explore and upgrade to the operating students provides a better and more efficient operating platform solutions, the first phase of the target for the technical side of the agent, to complete the construction of the workbench frame, content using multi-platform scene, to precipitate a set based on the existing business of generic operating platform front-end solutions.
Based on this, we started from the actual business operation configuration scenarios, combined with the existing middle and background technologies and micro front-end solutions, and produced the following scheme architecture diagram:
The bottom layer is aided by Ant Design system and the ability of Qiankun, and the middle layer is assisted with the specifications related to the integrated workbench that fit the existing business scenarios. The ability to build componentized widgets that can be used to interconnect functions and become a source of composition for existing sub-applications; The main application on the top layer, namely the upper layer of the flying Pig operation table, includes the overall framework, quick navigation, permission login control, the collection of operation scenarios, including the follow-up SOP solution for business operation.
Three, how to do
Front side depth using constructed Qiankun
On the front side, we deeply used and built the loading between the bottom applications using single-SPA, the upper layer to achieve style isolation, JS sandbox, preloading and other upper layer capabilities, while providing umI-plugin-Qiankun to solve the quick use of UMI. Become the solution of choice for our front end.
In the area of sub-application routing control, we integrated the existing Ant Design Pro routing configuration and qiankun’s configuration into a general configuration config, so that the sub-application access can only be configured here and unified control can be achieved later.
The front-end side in addition to the micro front-end and routing this piece, in fact, also includes more things that can be done, including the integration of public resources such as AntD, Loadsh, Router, and so on unified large version, by writing umi-externals-URL processing, so as to reduce nearly 1/3 of the resources; In terms of experience measurement we have the ability internally to stratify users including error performance monitoring; At the same time, the output has an online feedback system that can record screens and screenshots, so that it can be used for direct feedback and notification and issue to the corresponding responsible students in the process of use.
The self-built unified gateway at the back-end collaborates with the host and sub-applications
On the back-end side, we built Gateway Gateway Middleware on the operation workbench Node side, and the bottom layer relies on http-proxy-middleware capability. At the same time, token is added to the request by using the server proxy to forward the interface to solve the problem of interface login permission and cross-domain. At the same time, for the master and sub-application to access directly, the problem of Intranet login and login permission is blocked. Here, the ability of no-login authorization is used to make the sub-application login provided by the master application itself. In this way, the intermediate gateway layer can cooperate with the Fetch customization capability of Qiankun PR and Slave Namebase to solve the compatibility problem of request and route jump.
Componentize Widget services
The micro front-end can well solve the problem of seamless access between host and sub-applications, but it is not mature for block scenarios and has existing problems:
- With the mature development of business scenarios, the scenarios of block capability embedded configuration gradually increase;
- In order to remove the original general recruitment capacity, reduce the maintenance pressure;
- Gradually enrich the capabilities of existing widgets to meet the needs of access in more scenarios and system access.
Based on this, we implement business components through the widget NPM component package, including the development of the corresponding protocol to drive the corresponding widget rendering and display, so that the backend students can control it more. At the same time, in terms of visual specifications, we collect the display of use in various scenarios. So a widget can be embedded more seamlessly into an existing system.
For example, if we want to configure interactive gameplay in the building system, the interactive gameplay configuration widget can achieve the following integrated configuration:
Interactive experience of operating platform
When it comes to the front-end display of the middle and background, most of the scenes are not supported by interaction design students. In addition, the front-line r&d students have different understandings of the standards of interactive vision, leading to the use experience of many pages barely reaching the state of being usable, which is far from being beautiful and easy to use.
Based on this, we sort out the principles to be grasped in the visual specifications of several types of operation scenes:
- Unity of the same kind: no fuss, common level follows Ant Design. Keep the same type/function module display;
- Comfortable alignment: Alignment makes pages and obsessive students look comfortable. Title, button, form, tag multiple collection classes need to be aligned;
- Infrequently used pack: Pack away unimportant content so users can find key execution points. Class tables hide or put things that are not commonly used in a drawer;
- Simple without hindrance: let new users know the next operation without reading the manual, and can not let users fail to take the next step due to XXX.
For example:
By unifying the existing atomic classes and then moving forward, we can unify the existing interaction out of the box and precipitated corresponding capabilities, including the ability to search lists, scene decks, and form previews. With these capabilities precipitated, the subsequent generation of new pages can be increased to a larger stage than before.
Such as FormRender’s form precipitate, we can use this ability to produce a large number of form pages while completely letting the back end control the display, which can be protocol driven display, more details can be seenalibaba/form-render.
What do you want to do in the back
The above is what we did in the first stage. For the next stage, we will focus on the development of scene SOP capability, and at the same time, we will carry out crazy out-of-the-box improvement in the middle layer, carry out more abstraction and standardization in the bottom layer, and form unified initialization and release capability in the project at the bottom layer.
For the scenario of operation configuration, the ultimate goal is to improve the efficiency of operation configuration and continuously optimize the use effect of business through data. Subsequently, we will gradually optimize the configuration of operation side in the form of SOP, and finally form an integrated configuration capability.
In terms of technology, we will try to explore more new technologies, especially in terms of the unification of micro front end specifications, and how to enable the existing system to access the sub-application capabilities of the current mainstream micro front end, including the control platform of upper layer sub-applications. At the same time, the current new packaging system may give us a lot of new ideas to expand the existing packaging capabilities, as well as the above out-of-the-box protocol-driven build way through low code to improve our ability to quickly generate!
Welcome to flying pigs
It’s time for the commercial break. In fact, the front end team of Flying Pig is a good front end team in Ali, with P9 leading the team. The whole team includes mature high P and young fresh meat.
In terms of technology, at present we have team planning and development in novel technology, middle Taiwan technology and basic technology. If you are interested, you can talk about it directly. At the same time, you are welcome to have the ability to come and lead a direction!
Finally, it is also very welcome to pay attention to the front of the flying pig public number, there are many articles in the systematic construction of dry goods, worth reading!
Nearly two years Scott observed front-end industry has been completely into the competition, the deep water area, the size of the company’s front TL took office, beginning with the team, in view of the front end engineers, this group should how tube one director, plays with a result, help and growth, is set up this front-end technical director communication group of learning, in the selection of people keep on learning from each other to grow, The threshold to join the group is you have a real line or a dotted line in the group, please add Scott wechat: Codingdreamer to invite you to join the group, pay attention to the application remarks: “to join the management group”
This article is formatted using MDNICE