Pay attention to my public number: a small tree, exchange together, grow together.

As a member of the team responsible for Aliyun University’s official website and marketing, our daily work is to horizontally support the needs of all kinds of operation students, build online operation sites and marketing capabilities, and help them achieve user and income growth. In the old days we used to hear something like this:

• “Today we have an urgent need, can you help support it?”
• “This page is very simple, but we don’t have our own front end classmates, can you help support it?”
• “My request has been submitted for a long time. When will it be scheduled?”

In the past, collaboration was completely based on manual support, and people were always busy, but the front end often became a bottleneck, and it was difficult to spare time for in-depth thinking and capacity building. In the long run, it would fall into a vicious circle. Meanwhile, outsourcing and piecework services are gradually declining, and development and improvement are urgent. It is easy to think of componentized precipitation for common business scenarios and modes. Yes, we successfully changed the cooperation mode with design students, formed a united front, realized the precipitation of core marketing gameplay and common components, and realized the independent establishment of most of the daily scenes. But at the same time, we found that componentization cannot solve all the problems, and componentization development itself also has a large development cost. Can we bring some new ideas to us through the group’s accumulated ability and experience? At this time, we focused on the direction of group intelligence, which not only helped us to further improve the efficiency of development, but also laid a foundation for the evolution of our intelligence ability.

The group makes the wind, we ride the wind

For me, intelligence is the most mysterious part of the four directions of the group. After studying the sharing of the intelligent group and communicating with the group members, we sorted out the similarities and differences between our scene and the group intelligent direction scene.

Amoy system is under the premise of scene, data model and even demand standardization, using intelligence to achieve development and efficiency. Under the premise that the standardization at all levels is not mature yet, we expect to reduce the input of daily needs through intelligent ability, and use technology to improve the efficiency of development and empower operation. The core competence of the current group’s intelligence direction is D2C (Design to Code) ability, in which the recognition and expression of UI, data and logic are model construction and training based on the premise that “standardization is the prerequisite of intelligence”. Finally, IMGCook is output as the product carrier. In the other BU of the group, most of them take advantage of IMGCook’s ability and cooperate with visual choreography engine to implement low code development and improve development efficiency. This proves that the intelligent ability is feasible in the development of the efficiency improvement path. At this time, we need to consider more possibilities based on our scenario. Because we have a lot of daily/temporary needs, purely manual or outsourced models are always expensive and less immersive. Finally, we decided to further optimize D2C capability by automatically extracting data pits through tools, converting to generate module DSL, directly exporting renderable modules from visual draft, and finally allowing characters outside the front end to play by themselves. At the same time, our design (draft) specifications, data models and business requirements do not have mature standards, so we need to sort out solutions and design corresponding technical solutions according to the differences.

Standing on the shoulders of giants, build intelligent capabilities suitable for us

Finally, through the joint efforts of our team partners, we launched two intelligent schemes that could help us improve efficiency.

Design to Component – Component designer landing zero development

Realized the visual draft directly generation module, the ability to automatically dig the data pit. For common display pages, you can configure and go online at the hour level.

Design to Code – ImgCook improves secondary development

This part relies on IMGCook’s standard development link to extend custom DSL and reduce the cost of visual restoration by more than 70%.

Intelligence as the main line, precipitation general technical ability

First, DSL maintainability and extensibility issues need to be addressed, such as the assembly and output of multiple modular DSLS, hence the construction of a DSL transformation engine. On the other hand, zero development requires the ability to automatically dig holes and bind data, which requires us to obtain more information from the visual draft and have the ability to identify module structure, that is, reasonable grouping and node identification, so the construction of structural engine. In the whole process, the intelligent ability needed by the team was sorted out. In terms of technical design, more flexible designs were added to cope with the possibility of the future. Finally for our development to achieve different levels of efficiency.

DSL transformation engine: Configure the output of a runnable DSL

This step is to convert the relatively positioned module description data into directly usable code for the front end. The principle of custom DSL will not be described here. Our appeal is that DSL conversion capability can be available in Node, Web and other multiple ends. At the same time, as we need to support a variety of DSL specifications in the future, these specifications have reusable parts and need flexible expansion capabilities.

Structuring engine: mastering module structure, parsing and defining elements

The basic thinking of structuring is that imgCook’s current ability needs simple planning and arrangement of visual draft. We expect as little intervention on visual draft as possible to reduce the use cost of other roles, so it is necessary to standardize the description of modules. Imgcook’s official website recommends that the visual secondary editing of links is particularly important. Here, it will supplement the information not easily described by visual scripts, such as data field binding, loop processing, event declaration and other logic. If we expect zero-development links, we must auto-complete some of this information. For data field binding, it is necessary to know which nodes in the current module and which configurations need to be opened for each node, that is, it is necessary to have the ability of UI model identification and parsing. For the recognition of component structure, a simpler grouping algorithm based on our scenario is realized by referring to the group layout algorithm scheme. The final design of structured engine output is as follows, in which the element model is responsible for the identification and analysis of elements in the module, the abstract base class processes the general logic, and different elements can output different capabilities to achieve refined identification. The foundation of structural transformation is the standard grouping structure, which will be assisted by refined element models to achieve more intelligent structure recognition, such as loops.

Structural engine has made more consideration of generality in the underlying design, and can be used as a general module structure parsing capability in the future, not limited to the modules generated by D2C. Standard structural information can cover all the building platform modules and expand more business scenarios.

Riding the wind and waves, continue to explore the direction of intelligent construction

At present, the minimum closed-loop of D2C capability has been preliminarily realized, and it has been used in some business scenarios. We are looking forward to the results in efficiency improvement, and there are still many possibilities in the future:

• Based on intelligence, enhance efficiency, focus on structural engine optimization, enhance identification ability. Such as:
  • The matching rate of standard components is improved to supplement configuration capabilities
  • Automatic identification of cycle structure, automatic output of data cycle configuration
  • Advance visual specification and use PC to automate H5 adaptation
  • Continuous access to other intelligent capabilities, such as intelligent color matching, intelligent graphics
• Take intelligence as an opportunity to explore the direction of business empowerment, such as:
  • Change the business support mode and improve the business support efficiency
  • Series data system, provide business effect optimization suggestions, assist business decision-making
  • Access standard model, content intelligent matching, reduce manual configuration
  • Module structure analysis, intelligent matching of existing components, improve construction efficiency

conclusion

At present, there are inevitably some problems, such as the need to do standardized processing of visual manuscripts, and it is difficult to avoid zero input from front-end students in a short time. But smart capabilities give us an unprecedented ability to help the front end free up productivity and put it into more valuable areas.

Finally, welcome to build Aliyun ToB’s online system and do something different. Long-term acceptance of any posture of the club recruit students, email [email protected], welcome to exchange.