After 3 months of development, the first phase of The Flypig integrated operation platform was finally put into use internally. During this period, we completed the access and configuration of more than 10 platforms in 4 scenes based on the integrated integration scheme of micro front-end and SDK for operation scenes, and optimized hundreds of visual and interactive experiences. In the later experience measurement and user feedback tracking ability access, the whole has reached the available state.
To sum up, I hope to communicate with you about the background, reason, goal and plan, process and effect, as well as outlook of the integrated operation platform of Flying Pig micro front end. I hope we can give some input to students with similar scenes. If there is any misunderstanding or unclear description, we welcome you to directly point out or give suggestions.
The background reason
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:
- Entry fragmentation leads to high configuration costs
- Platforms are not connected with each other, resulting in the inability to effectively form a resultant force
- Lack of upper-level scenario solutions to form operational best practices
Objectives and Programmes
In order to solve the pain point, we started the construction project of “Universal Studios – Integrated Operation Workbench”, aiming to provide better and more efficient operation platform solutions for operation students by means of new technology exploration and upgrading. The goal of the first phase is to explore the technology side, complete the construction of the workbench framework, and meet the needs of multi-platform scenarios. Precipitate a set of micro-front-end solutions for the general operation platform based on the existing business
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:
Process and effect
We designed a master application of the operating platform with Ant Design Pro + Midway, and designed the overall platform framework including product functions and interactions. We connected the existing sub-operating platforms with the master application through the micro front end solution. The subsequent operation students only needed to enter a unified platform to operate. (Sorry, some information needs to be desensitized for safety reasons)
General shopping domain micro front end solution
This part of the solution is the core part of the technical architecture of the operation workbench. It needs to solve the problem that the front and back end capabilities of each sub-application platform can be easily and easily connected to the operation workbench to support app-level isolation and seamless switching. For the front side need to application for registration, routing, resource loading, communications, life cycle, isolating the sandbox mechanism has a corresponding strategy, master the application need to be solved for the back-end side between Intranet login access to free climb, cross-domain problem, interface request path right, post interface security check this a series of problems.
Microfront-end is a kind of architecture similar to microservices. It applies the concept of microservices to the browser side, that is, the Web application is transformed from a single single application into a combination of several small front-end applications.
Based on this, we have investigated single-SAP, ICE-Stark and Qiankun for front-end foundation schemes. Single-spa only solves the loading scheme between applications, without considering other peripheral issues; Ice-stark hijacks history for app loading, and isolating apps by specification is a little less refined and does not fit with the existing operating sub-platform system that is almost entirely UMI. Single-spa was used in the loading between the bottom applications of Qiankun, while the upper layer realized style isolation, JS sandbox, preloading and other upper capabilities. At the same time, UMI-plugin-Qiankun was provided to solve the rapid use of UMI, which became the choice of our front-end solution.
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, there will be the problem of Intranet login and login permission impassability. Here, we use the ability of no-login authorization to let the master application provide the login of sub-application. 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.
Plan to run after, we do on child application access to simplify a lot of optimization, including the first time use to minimize the cost of understanding, at present the main application you just need to the conifg on respectively before and after the configuration, if antd pro system is used for the child application only half an hour to complete the code modification, additional scene also has the corresponding document can be rapid transformation, At the same time, the existing sub-application platform’s own code and normal use will not be affected. In the future, we will consider integrating the sub-application access logic into the management platform to further reduce the access cost.
Business componentized Widget integration solution
The above micro-front-end solution is used to solve the access problem of the host and sub-applications. However, for a more integrated system, the configuration and communication between the sub-applications of the platform business widgets are also needed.
For example, interactive gameplay is configured in the venue of the flying pig scene. The operation carries out the setting and placing configuration of the venue in the building system, but the interactive module configuration needs to be completed on the interactive platform before it is involved, and then the corresponding ID is used to associate the two configurations, which is not elegant in terms of consistency.
Based on this, we started Widget integration sub-items and formed unified development specifications, including unified parameter customization, callback events and open API services. Basic business configuration capabilities were deposited into Widget SDK and connected in the business data layer, so as to achieve the effect of integrated configuration. In other words, it can meet the role of any SDK that can be inserted into any operation system, which can well realize the integration of configuration ability between subsystems, and gradually begin to play a role
Operation platform visual interaction unification and performance optimization
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.
In terms of performance, it is easy to have problems such as large resource package and slow interface, which leads to poor feedback speed. These problems are not important on the surface, but affect the operation students’ happy use of the platform, and it is not like a front-end platform.
Based on this, we spent 4 weeks to optimize and unify the visual interaction of products on all the platforms connected to the shopping guide side and conduct a secondary Review. Meanwhile, we formulated the system of regular Review of products in the middle and background to prevent unusable and unattractive pages from being launched.
At the same time, there is also an optimization where users can’t see. We have settled a set of performance optimization scheme suitable for the current scene for the middle and background pages of ANTD Pro under the micro-front-end system. Including upgrading to ANTD4, removing multi-language, replacing moment, opening treeShaking, locking version, loading on demand, and relying on externals CDN, saving nearly 1/3 of resource loading.
Mid – background experience measurement and user feedback tracking
When it comes to the middle and background system experience and data measurement, the common data burying method was widely used before, but it was generally not perfect and the measurement depth was not enough, which made it difficult to better manage
On the basis of existing research, we have access to the backstage experience in measuring solution, precipitation and buckets of SDK, one line of code that can solve the micro front-end in the background of access network system, based on the platform to access the data, the performance experience, visitors portraits, error monitoring solution, subsequent again with the help of data and operational metrics through open ability, better auxiliary operation effect
At the same time, in order to better collect and track user feedback, including continuously asking users to provide feedback and suggestions to the platform, we also connected the feedback tracking program, so that students in the project can repair and optimize in the first time.
Build and feed back
During the operation stage, many basic capabilities were directly reused by the Group and Ant Construction, including the introduction of micro front-end architecture Qiankun, middle and background experience measurement scheme, and the use of user feedback tracking capability, which brought great convenience to the development of our business platform. It also illustrates the mutually reinforcing relationship between infrastructure and upper users.
In the process of use, we submitted PR for Qiankun three times in combination with our business usage scenarios, which were respectively used to solve the routing base prefix, Fetch support for customization and clear use documents. In order to solve the CDN extraction of ANTD Icon, we submitted Min File PR to Qiankun. In terms of the use of experience measurement, it also belongs to the initial angel users. At the same time, some suggestions on the use of the above are given back. Subsequently, the measurement SDK can solve the quick use of middle and background applications under the Intranet account system by one line of code. In the process of feedback, I helped solve the problem that the style was eliminated under the micro-front-end system, including providing some optimization suggestions for the use, including renewing good front-end technical communication.
Last but not least
Above that we three months for the construction of the summary, more operational integration technology solutions above ground, and the optimization of the existing platform as a whole, the real integration of operating table will continue at the back of the iteration, and more students to participate, let technology bring more differentiated value to the business.