The author | xuan wanted

Product | tao front-end team

2020 618 promotion has passed, as an important promotion activity of tao department every year, what role does the front end of Tao Department play in it, how to ensure the smooth progress of the promotion? What new technologies are being used? Amoy department’s front end team hereby holds an essay on 618 series to introduce the front end figure in 618. This article is written by Xuan Hu from the industry and workbench team to introduce the industry Rubik’s Cube project.

Writing in the front

In the past year, the author supported a batch of industry channel front-end construction in the Tmall industry, and deeply realized that the development of business makes the demand for rapid site construction and efficient use increasingly strong. However, the development mode of the front end of the industry is still labor-intensive. More and more new business needs are fulfilled by increasing the input of outsourcing resources and working overtime. However, both outsourcing and overtime work will lead to a further decline in code maintainability, which will do more harm than good to the long tail business like channel.

Thanks to the accumulation of Amoy department front end, now we can use the perfect Tianma building system, Rax1.0 cross-end development framework, IMGCook intelligent production these tools to complete the development of one module and build a complete small program channel, but in the industry such a production relationship, We hope to precipitate a more efficient production system to support our high-efficiency work.

Began late last year, Tmall industry has been finished and UED, product team TaoUI component specifications, and to build a web component center to settle the material supporting industry, so, if according to certain specifications, using direct drive components, direct data model is the most universal modules do not need to develop? Thus, the industry rubik’s Cube project came into being.

image.png

image.png
image.png

TL; DR

We want to provide a set of module production and use platform for the industry business to quickly set up the industry page and efficient operation and maintenance

The Stone Age

At the end of last year, when we started to promote the implementation of TaoUI components, it was the outbreak of industry channel demand. We took this opportunity to precipitate a batch of common modules named rubik’s Cube to support business.

image.png

This batch of modules successfully helped us to support 7 channels in taobao/Tmall industry in a short period of time, as well as the mixed Feeds of marketing scenes of new fashion in the clothing industry, effectively releasing the pressure of research and development. In this batch of modules, we introduce for the first time the form of data-driven UI, which orchestrates data acquisition behavior and assembles data and component materials by running data source DSLS configured on the build platform.

TIC-PFE (1).png

This solution supported our business development for several months, but we also found several problems:

  1. The operation needs to configure data source parameters and material information while building the platform. Due to the complex schema, cumbersome operation and poor scalability, the data source parameters and material information can be configured at the same time
  2. As the application of TaoUI components continues to increase and customization points become more and more, we propose topic-based configuration, which allows business customization, but it is impossible for a generic module to pass through all parameters to components
  3. The data acquisition of existing schemes is based on the front-end initiation of requests, and the performance is severely limited in the scenario of many data sources or complex mixing rules
  4. The Rax compile-time applet scheme does not support dynamic import of components, and the ability of common modules to introduce business customization (external components) is practically impossible to implement

So, we decided to move on to the next era

Bronze Age

Based on our previous experience in rubik’s Cube general module in the industry, we decided to make the following adjustments:

  1. Components are configured based on themes, and themes (collections of element styles) support business customization, resulting in a web component configuration platform
  2. To build a data link with the back end of the industry, the data source acquisition, mixing, paging and other capabilities of the fixed model DSL will be implemented at the server end, and the front-end module will return to render its own duties
  3. Self-built web module workshop (industry Rubik’s cube) platform for configuring data sources and material themes, and for the final release of DSL and production modules
TIC output architecture (1).png

image.png

This program has now supported the product content mixed feed stream of tmall apparel industry 618 conference. Through a more general and lightweight program, it has brought a richer experience to the marketing conference, so that users can not only buy cool, but also see cool.

The Age of Steel (Future)

The capacity of the industry rubik’s cube is still in the initial stage. We hope that in the future, through systematic construction, we can help businesses arrange data more quickly and efficiently -> produce standardized and tonal channel modules, so as to efficiently support the demand scenes of rapid establishment and frequent iteration of channels.

Industry Rubik’s cube. PNG

At the same time, because this scheme completely relies on the arrangement of data and materials to render the channel module, it has natural access advantages in the mixed arrangement of materials based on data, AB for different types of data, different materials and other refined operation scenarios, which can perfectly realize the algorithm control data, data determines UI. This concept has been implemented in the internal data platform of Tmall apparel based on the industry rubik’s cube.

Industry rubik’s cube from 0 to 0.1 is inseparable from the support of relevant students, thank you all!!

The Amoy 618 series is expected to be 7, covering interactive, performance, multimedia, PHA, capital loss prevention, party P2C, intelligent UI, shop mini program, industry Rubik’s cube and other contents in Amoy 618.

Other articles in this 618 series:

Welcome to pay attention to the “Amoy department front end team” public account to continue to subscribe.