Solution for Fliggy Unified Operation Workbench
Categories: Share
This article has been desensitized and approved for publication on the Fliggy Front-end Team Official Account.
After 3 months of development, the first phase of Fliggy Integrated Operation Workbench has finally started to be used internally. During this period, aiming at operation scenarios, based on the integrated integration solution of micro front-end and SDK, we completed the access and configuration connection of more than 10 platforms in 4 major scenarios, and optimized hundreds of visual and interactive experiences. After accessing later experience measurement and user feedback tracking capabilities, the overall has reached a usable state.
Take this summary to hope to communicate with everyone about the background reason, goal and solution, process and effect, and outlook of doing Fliggy micro front-end operation integrated platform, hoping to give some input to students in similar scenarios. If there are deviations in understanding or unclear descriptions, welcome everyone to point out directly or make suggestions.
Background Reason
Along with the development of Fliggy business, we have established operation platforms for multiple scenarios in the past two years to improve operation efficiency, satisfying operations to complete business appeals.
But as the business complexity of the product itself continues to increase, it can only solve the problem of food and clothing for operations. Coupled with the increasingly strong demand for mutual investment and intercommunication among various platforms, it is impossible to bring 1 + 1 > 2 value to the business under this system, facing the following pain points that need to be solved:
- Dispersed entrances lead to high configuration costs
- Platforms are not connected with each other, leading to inability to effectively form synergy
- Lack of upper-level scenario solutions to form operation best practices
Goal and Solution
To solve the pain points, we launched the
Based on this, we started from the actual business operation configuration scenario, combined with existing mid-backend technologies and micro front-end solutions, and produced the following solution architecture diagram:
Process and Effect
We made an operation platform main application with front and back ends (Ant Design Pro + Midway), and designed the overall platform framework including product functions and interactions. Connected existing sub-operation platforms through micro front-end solutions and main applications. Subsequent operation students only need to enter a unified platform to operate. (Sorry, due to security reasons, some information needs to be desensitized)
Pan-Shopping Guide Domain Micro Front-end Solution
The solution in this part is the technical architecture core of the operation workbench. It needs to solve front and back end capabilities of each sub-application platform can be simply and lightly accessed to the operation main workbench, supporting App-level isolation and seamless switching capabilities. For the front-end side, it requires corresponding strategies for sub-application registration, routing, resource loading, communication, lifecycle, isolation sandbox mechanism. For the back-end side, it requires solving a series of difficult problems such as connecting internal network login permissions and login-free between main and sub applications, cross-domain problems, correct interface request paths, post interface security verification.
Micro front-end is an architecture similar to microservices. It applies the concept of microservices to the browser side, that is, transforming web applications from a single monolithic application into multiple small front-end applications aggregated into one.
Based on this, for front-end side basic solutions, we have researched single-sap, ice-stark, qiankun; single-spa only solved the loading solution between applications, without considering other peripheral issues; ice-stark implements application loading by hijacking history, isolating applications through specifications is slightly not refined enough, and almost all existing operation sub-platforms are umi systems which also does not fit well; while qiankun underlying application loading uses single-spa, upper layer implements style isolation, js sandbox, preloading and other upper layer capabilities, and at the same time provides umi-plugin-qiankun to solve rapid use under umi, becoming our front-end choice solution.
On the backend side, we built a Gateway middleware on the Node side of the operation workbench, relying on http-proxy-middleware capability implementation at the bottom layer, borrowing server-side proxy forwarding interface while adding tokens on requests to solve interface login permissions and cross-domain problems. At the same time, for the problem that internal network login permissions are not connected when main and sub applications are directly accessed, here we use the login-free authorization capability, letting the main application itself provide login for sub-applications. In this way, through the middle gateway layer combined with the Fetch custom capability and Slave NameBase we gave to qiankun pr, compatible problems of requests and route jumps can be solved.
After the solution worked, we made a lot of optimizations on simplifying sub-application access, including reducing initial usage understanding cost to the lowest. Currently the main application only needs to configure front and back end configs separately. For sub-applications, if using antd pro system, code modification can be completed in just half an hour, additional scenarios also have corresponding documents for quick modification, while not affecting existing sub-application platforms’ own code and normal use. Later considering integrating sub-application access logic into the management platform side to further reduce access costs.
Business Componentization Widget Integration Solution
The above micro front-end solution is used to solve the access problem of main and sub applications, but for a more complete integrated system, it is also necessary to open up configuration intercommunication between platform business Widget sub-applications.
For example, configuring interactive gameplay in the Fliggy scenario venue, operation configures venue building delivery in the building system, but before involving interactive module configuration, it needs to be completed on the interactive platform, and then associate these two configurations through the corresponding id. Consistency is very inelegant.
Based on this, we launched the Widget Integration sub-item, and formed a unified development specification, including unified parameter customization, callback events, open api services, precipitating basic business configuration capabilities into Widget SDK, and opening up at the business data layer, so as to achieve the effect of integrated configuration, that is, satisfy that any SDK can be inserted into any operation system. This can well realize the connection of integrated configuration capabilities between subsystems, and gradually begin to play a role.
Operation Platform Visual Interaction Unification and Performance Optimization
Speaking of front-end display of mid-backend, most scenarios do not have design interaction students support, plus frontline R&D students have different understanding of interactive visual standards, leading to many pages’ usage experience barely reaching usable status, and there is still a long distance from good-looking and easy-to-use.
Including performance, it is easy to have problems such as large resource packages and slow interfaces leading to poor feedback speed. All are seemingly unimportant on the surface, but greatly affect operation students’ happy use of platform to work, and doesn’t look like a platform made by a frontend.
Based on this, we spent 4 weeks unifying product visual interaction optimization and secondary Review for all accessed platforms on the pan-shopping guide side, and formulated a system of regular Review for mid-backend products to prevent pages that are not easy to use and not good-looking from going online.
At the same time, there is an optimization in a place invisible to users. We precipitated a set of performance optimization solutions meeting current scenarios for mid-backend pages under micro front-end system for antd pro, including upgrading to antd4, removing multi-language, replacing moment, enabling treeShaking, locking versions, loading on demand, public dependencies externals cdn method, accumulating saving nearly 1/3 of resource loading.
Mid-backend Experience Measurement and User Feedback Tracking
Talking about mid-backend system experience and data measurement, previously ordinary data burying point methods were commonly used, but generally not perfect enough and measurement depth was not enough, leading to difficulty in better management.
Through researching existing solutions, we accessed the mid-backend experience measurement solution, and precipitated family bucket sdk, solving internal network system micro front-end mid-backend access with one line of code, based on platform access data, performance experience, visitor portrait, error monitoring solution, subsequently connecting with open data capabilities and operation metrics to better assist operation efficiency improvement.
At the same time, in order to better collect and track user feedback, including continuously letting using students provide feedback suggestions to the platform, we also accessed feedback tracking solution, allowing project students to repair and optimize at the first time.
Co-construction and Feeding Back
During the period of doing the operation workbench, many basic capabilities directly reused the underlying basic capabilities built by the Group and Ant, including introducing micro front-end architecture qiankun, mid-backend experience measurement solution, user feedback tracking capability use, bringing great convenience to our business platform development, and also well interpreting the relationship of mutual complement and promotion between infrastructure and upper-layer users.
In the process of use, combined with our business usage scenarios, we submitted 3 PRs to qiankun cumulatively, respectively solving route base prefix, Fetch supports custom, clear usage documentation. To solve antd icon cdn extraction, we submitted Min File PR to it; in experience measurement usage, also belong to initial angel users, meanwhile fed back some suggestions on usage, subsequently solving quick use of mid-backend applications under internal network account system with one line of code by abstracting measurement sdk; when using feedback feedback, helped solve the problem of styles being removed under micro front-end system together, including providing some usage optimization suggestions landing, including subsequent agreed frontend technical exchange.
Last but not least
The above is our construction summary of these months, more about exploration on operation integration technical solution, and overall optimization of existing platforms. Specific real integrated operation workbench still needs subsequent continuous iteration and more students’ participation, letting technology bring greater differentiated value to business.