By Yeshu
On Alibaba Cloud's official website and marketing mid-end team, we need to meet various requirements put forward by operation engineers as we work to build an online operation field and marketing capabilities and help drive growth in users and revenue. In the past, we often had to deal with the following requests:
In the past, collaboration was entirely in the form of manual support, and everyone was exhausted. Due to the lack of frontend developers, we had no time for deep thinking or capacity building. In the long run, this turned into a vicious circle. With the gradual decline in outsourcing and piece-rate services, it was urgent to improve our development efficiency. It is easy to think about building components for common business scenarios and models. Now, we have successfully changed the way we collaborate with the design team and reached an agreement for building core marketing methods and common components. This enables operation engineers to build most daily scenarios independently.
However, we have found that component-based development cannot solve all problems and also entails high development costs. Therefore, we decided to draw on the existing capabilities and experience of the Alibaba Group for inspiration. We focused on the intelligent development efforts of the Alibaba Group. This offers us a way to further improve our development efficiency and lays a foundation for improving our intelligent capabilities.
For me, intelligence is the most mysterious of the Alibaba Group's four frontend orientations. After I read the information shared by the intelligence team and talked with its members, I considered the similarities and differences between our scenarios and the intelligent scenarios in the Alibaba Group.
The Taobao system intelligently improves development efficiency through standardized scenarios, data, and requirements. Without mature standards at all levels, we hope to reduce the investment necessary to meet daily requirements and improve development efficiency through technologies that empower operation engineers.
Currently, Alibaba Group's core capability in the field of intelligent development is D2C. Models are built and trained for identifying and expressing UIs, data, and logic following the principle that intelligence is standardization. Finally, we launched imgcook as a product that provides these capabilities. Several business units in the Alibaba Group use imgcook with a visual orchestration engine to reduce the coding required during development and improve the development efficiency.
This proves that it is possible to improve development efficiency through intelligent capabilities. Therefore, we can consider more ways to use these capabilities in our scenarios. As we have a large number of routine and temporary requirements, it is expensive to only rely on manual work or outsourcing. This also results in poor business experience.
Ultimately, we decided to further optimize our D2C capabilities. We used tools to automatically extract data for tracing, convert the data into Domain Specific Language (DSL) modules, and directly output renderable modules from the visual draft. After this, people other than frontend developers can use the renderable modules independently. In addition, there are still no mature standards for our design (draft) specifications, data models, and business requirements. Therefore, we must work out and design corresponding technical solutions based on different needs.
Finally, with the joint efforts of our team members, we launched two intelligent solutions that can improve development efficiency.
This solution can directly generate modules based on visual drafts and automatically extract data for tracing. When we need to develop pages for common display scenarios, we can configure and launch them within a few hours.
This solution relies on the standard development pipeline of imgcook to develop custom DSLs, which can reduce the cost of visual restoration by more than 70%.
First, we must be able to maintain and scale our DSL by assembling and outputting multiple DSL modules. Therefore, we developed a DSL conversion engine. To achieve zero development, we must implement automatic data extraction and binding for tracing. This requires us to obtain more information from visual drafts and identify module structures, which is basically performing reasonable grouping and identifying nodes. Therefore, we developed a structure engine.
Throughout this process, we compiled the intelligent capabilities required by the team and introduced more flexible technical designs to cope with future possibilities.
Ultimately, we were able to improve our development efficiency, though the scope of this improvement differed in different areas.
The following section details the technical solution we adopted to implement D2C capabilities.
This process converts the description data of the relative positioning module into code that frontend developers can directly use. We will not go into the principles of custom DSL here because we are focusing on DSL conversion capabilities available on multiple terminals, such as nodes and web servers. In the future, we will need to support multiple DSL specifications. Therefore, these specifications must be reusable and scalable.
We divide the capabilities into the core layer and the processor layer. Each processor is an independently functional unit that provides functions, such as template, style, data, and schema, which are required by the final code. The core layer standardizes the input and output, connects the processor flows, and provides additional scalability. Finally, we configured the output of the DSL conversion engine.
The basic thinking about structure is that imgcook must be able to perform simple planning for visual drafts. We hope to minimize the need for intervention in visual drafts and reduce the efforts required on the part of other personnel. Therefore, we must provide standard descriptions of modules. Visual secondary editing is especially important in imgcook's official website recommendation process. Here, descriptive information that cannot be easily added to visual drafts can be added, such as data field binding, loop processing, event declaration, and other logic.
If we want to achieve a zero-development process, we must implement automatic supplementation of such information. To bind data fields, we must know the nodes that the current module contains and the configurations that each node needs to open. This means we must be able to identify and parse UI models. To identify component structures, we used the existing layout algorithm of the Alibaba Group and implemented a simple grouping algorithm based on our scenarios.
The following figure shows the final design of the structure engine. In this structure engine, the element model is used to identify and parse elements in modules. The abstract base class processes general logic, and different elements can output different capabilities to achieve fine-grained identification. The structure conversion is based on a standard grouping structure, which can support refined element models in the future to identify structures, such as loops, more intelligently.
The structure engine has many general designs at the underlying layer, which can be used to parse general module structures in the future, including modules not generated by D2C. Standard structure information covers all modules required to build a platform, allowing this engine to be used in more business scenarios.
So far, we have implemented a minimum complete link of the D2C system, and it has been applied in some business scenarios. We hope it can improve our development efficiency and open up more possibilities in the future:
Improve development efficiency based on intelligence and focus on optimizing the structure engine to enhance identification capabilities. For example:
Explore business empowerment approaches through intelligence. For example:
Currently, there are still some problems. For example, visual drafts must be standardized, and zero intervention by frontend developers is not achievable in the short term. However, intelligence empowers us with unprecedented capabilities, which can reduce the workload on frontend developers so that they can focus on more valuable work.
66 posts | 3 followers
FollowAlibaba F(x) Team - June 22, 2021
Alibaba Cloud Community - March 9, 2023
sunqi - February 12, 2020
Alibaba Clouder - July 27, 2020
Alibaba Cloud Serverless - September 29, 2022
Alibaba Cloud Native - October 9, 2021
66 posts | 3 followers
Follow
Offline Visual Intelligence Software Packages
Offline SDKs for visual production, such as image segmentation, video segmentation, and character recognition, based on deep learning technologies developed by Alibaba Cloud.
Learn More
AIRec
A high-quality personalized recommendation service for your applications.
Learn More
Artificial Intelligence Service for Conversational Chatbots Solution
This solution provides you with Artificial Intelligence services and allows you to build AI-powered, human-like, conversational, multilingual chatbots over omnichannel to quickly respond to your customers 24/7.
Learn More
Alibaba Cloud Model Studio
A one-stop service platform for whole-process generative AI engineering and application development, based on Tongyi Qianwen (Qwen) and other popular models
Learn MoreMore Posts by Alibaba F(x) Team
