Ali Yun · Also tree follow my public account: a small tree, exchange together, grow together.

As a member of the team responsible for the official website and marketing of Ali Cloud University, 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 growth 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.

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.

The following is a detailed introduction to the technical solution of D2C capability.

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.

Therefore, we divide the capabilities into Core layer and Processor. Each Processor is an independent functional unit responsible for template, style, data, Schema generation and other functions required by the final code. The core layer is responsible for standardizing input and output, completing the series of processor processes and supplementing extensibility. Finally, the output of the configured DSL transformation engine is completed.

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.

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 ali Cloud ToB online system, do something different. Long-term acceptance of any posture of the club recruit students, email [email protected], welcome to exchange.