preface

Hello, I’m flying pigs front end, is the topic of today to share how to fall to the ground micro front-end integration operating table, the first simple introduce myself to you, a flower called his evening, external network id for Tw93, there are some time flying pigs in the front-end technology foreign influence, operational flying pigs front-end team public number Fliggy F2E and nuggets column, Take this to introduce some flying pig front end systematic construction 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



From the”Why do you want to make the flying pig integrated operation table, what do you want to make, how do you want to do“Here are four pieces to tell you.





Why do we want to make flying pigs integrated operation workbench

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, with the increasing business complexity of the product itself, it can only solve the problem of food and clothing for the operation, and the demand for mutual investment and exchange of various platforms is increasingly strong, so the value of 1 + 1 > 2 cannot be brought to the business under this system, facing the following pain points that need to be addressed:





What is it going to look like


In order to solve the above pain points, we launched the construction project of integrated operation platform, aiming to provide operation students with better and more efficient operation platform solutions by means of new technology exploration and upgrading. The goal of the first phase is to explore the technical side and complete the construction of the workbench framework.It can meet the requirements of multi-platform scenarios and precipitate a set of micro-front-end solutions for pan-operating platforms based on existing businesses







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.





What to do




Front side depth using constructed Qiankun


On the front side, we deeply use and more jointly build the qiankun, bottom layer application between the loading using single-SPA, the upper layer to achieve style isolation, JS sandbox, preloading and other upper layer capabilities, while providingumi-plugin-qiankunTo solve umi under the fast use, become our front side of choice.







In the area of sub-application routing control, we integrated the existing ANTD Pro routing configuration and the configuration item of Qiankun into a passed configuration config, so that the access of sub-applications could only be configured here and unified control could 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 screen and screenshot, which is convenient for direct feedback and notification to be submitted 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, we built Gateway Gateway Middleware on the Business workbench Node side, low-level dependencieshttp-proxy-middlewareAbility to achieve, using the server proxy forwarding interface at the same time in the request to add tokenResolve the interface login permission and cross-domainIn addition, direct access to the master and child applications will cause the problem of Intranet login and login permissions unavailable, which is used hereAvoid’s authorizedThe ability to allow sub-application login to be provided by the main application itself, so through the intermediate gateway layer with us toqiankun prFetch custom capabilities and Slave NamebaseCan solve the request and route jump compatibility problem.





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 widgets using the class NPM package way to realize the business components, including setting the corresponding agreement to drive the corresponding widget rendering and display, to facilitate the back-end classmates more manageable, specification on the vision at the same time, we tucked under various scenarios of use, facilitating a widget can be more seamlessly into the 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 side display of the middle and background, most of the scenes are not supported by interaction design students, and the front-line R&D students have different understandings of interactive vision standards.As a result, the use experience of many pages can barely reach the state of use, and there is still a great distance from good 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 trouble, general level follows Ant Design; Same type/same functional module display
  • Comfortable alignment: Alignment makes pages and obsessive students look comfortable. Title, button, form, tag multiple collection classes need to be aligned
  • Uncommonly used pack up: Pack up unimportant content for users to 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; Do not let the user fail to go to 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 precipitation of forms, we can use this capability 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 back there


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 upper layer sub-application control platform. At the same time, the current new packaging system may give us a lot of new ideas to expand the existing packaging ability; And how the above out of the box protocol-driven build can improve our ability to generate more quickly through low code build!





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 “Fliggy F2E”, which has a lot of systematic construction of articles dry goods, worth reading!

This article is formatted using MDNICE