How Frontend Intelligence Improves Development Efficiency
By: Alibaba Cloud
Tags: Alibabacloud, Image Processing, Domain Specific Languages, Artificial Intelligence, Frontend Development

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:

“We need this done today. Can you give us a hand?”

“This page is very simple, but we don’t have our own frontend developers. Can you help us with it?”

“I submitted my requests a long time ago. When will you be able to take care of it?”

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.

Following the Trail Blazed by Alibaba Group

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.

Standing on the Shoulders of Giants: Building Our Intelligent Capabilities

Finally, with the joint efforts of our team members, we launched two intelligent solutions that can improve development efficiency.

Design to Component: Achieving Zero Development Using a Component Designer

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.

Design to Code: Improving the Efficiency of Secondary Development with imgcook

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%.

Building General Technical Capabilities Based on Intelligence

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.

DSL Conversion Engine: Configuring and Outputting an Executable DSL

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.

Structure Engine: Understanding Module Structures and Parsing Definition Elements

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.

Exploring New Directions in Intelligent Development

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:

Improve the matching ratio for standard components to enhance configuration capabilities

Automatically identify loop structures to output data loop configurations

Promote the establishment of visual specifications to automatically complete HTML5 adaptation using PCs

Constantly integrate other intelligent capabilities, such as intelligent color blending and graph combination

2. Explore business empowerment approaches through intelligence. For example:

Change the business support mode to improve the business support efficiency

Connect data systems to provide recommendations for optimizing business results and assistance in decision-making

Integrate standard models to intelligently match content and reduce manual configuration

Analyze module structures to intelligently match existing components and improve building efficiency

Summary

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.

Original Source:

Gain Access to Expert View — Subscribe to DDI Intel