What do we do

The Double 11 Promotion has just come to an end, and I believe you have also done a lot of things. In recent years, a variety of major promotion activities have emerged. Behind these activities, we are involved. We have been expanding our business for seven years, and every year we undertake a large number of venue construction requirements.

The status quo thinking

Venue development demand is growing, and the means of research and development are also improving. From the initial manual development to the construction of a low-code platform (jingdong internal code name Babel, hereinafter referred to as “Babel”), with the assistance of Babel, the development efficiency of the venue has been greatly improved. However, Babel focuses on fixed floors, so personalized modules cannot be built on a large scale. With the increase of the number of personalized modules, a new approach is urgently needed to solve the bottleneck problem of development efficiency.

We learned that Deco smart code can quickly generate code from the design draft, which is suitable for the scenario of building personalized modules. In the 618 Promotion, WE tried to use Deco to build part of the personalized venue and achieved good results. Therefore, we applied Deco to develop the personalized venue module on a large scale in this Double 11 Promotion.

(Sample of Venue design for Double 11)

How does it work?

In advance, we were worried about whether there would be barriers to use, such as special requirements on the design draft (we had to ask the designer for modification). In fact, we were totally worried. After getting the design draft from the designer, we could directly upload the drawing board of the floor to Deco through plug-ins.(Use demo)

Jump to Deco’s details page to see the structural style code for the entire floor. Layout structure and style basic compound handwriting habits, especially flexible layout, basic and handwriting is no different. To some flaw point a little adjustment, you can run to see the effect of the floor.

Reference component library

When you develop a page, you manually import a component library, and then reference components in the page to make up the page.

import { xxImage, xxText } from '@xxxUI'
<View className='head' onClick={btnClick}>
  <xxImage src={url} mode='heightFix' size={300} />
  <xxText className='taro-text' >{name}</xxText>
</View>
Copy the code

On Deco, the way you use components will change. You first need to set up the component library in Deco, then select a design area, click on the corresponding component, and you can replace it with a component without writing extra references and styles. If there is no mapping component, the default conversion is the basic tag (div/text/image).

(Use demo)

If further improvements are needed, Deco’s AI capabilities are needed. By training component library, automatic identification and replacement of components can be realized.

Training component libraries takes extra work, but once you’ve done the training, you can handle a large number of sessions without importing and styling components one by one and exporting pages that replace them.

(Use demo)

Developing data logic

You can see a lot of front-end concepts in Deco, props, state, lifecycle, global variables, and so on. Basic operations in the code editor can be implemented in Deco. Now that you have these capabilities, start writing code.

[Asynchronous request]

Each venue has a large number of data requests, manual development, we use a lot of encapsulated request methods, according to different request scenarios use different request methods, but the request mode is relatively fixed, all kinds of requests are a bit complicated.

fetch(url)
  .then(...)
  .catch(...)
Copy the code

In Deco we can access the encapsulated methods and continue the code in the same way as before. Deco also gave us a little surprise. It supports many forms of request, just click a few parameters, can help me generate the request code, whether composite request or ordinary custom request, can quickly generate code.

(Use demo)

[Code hint]

In addition, it provides intelligent code hints for data binding to component properties and writing code in the editor.

Deco’s code prompts, in addition to the editor’s code prompts, dynamically show the scope of the selected node, and show the data structure and true value of the variable, with a simple click to select data from within the scope. By contrast, coding is easy and you don’t have to worry about messing up data fields.

(Use demo)

[Data reporting]

Finally, Deco integrates the data reporting function, which can directly set the click burying point and exposure burying point, etc. After simple configuration, data reporting is complete.

The source code! The source code!

Most of the development was done through Deco, and finally the source code was acquired for verification testing.

Deco provides many convenient customization schemes. We have customized a set of code templates on Deco, which can directly output the appropriate project code without too much secondary adaptation.

In addition, Deco also supports the direct generation of low-code component co-built platform (JINGdong internal code name Babel IHub) components to seamlessly connect with Babel. Every time I finish the design draft development on Deco, I will directly output the code and merge it into the project to run the verification.

(Use demo)

Precipitation component

After each business is completed, new requirements need to be deposited and enriched into the component library. We upload the standard component style to Deco, define the internal logic of the component, and then output a standardized component. Development loop can be completed on Deco.

Deficiency in

Deco is very convenient, but it also has some disadvantages. After each edit, you need to download the code locally, install the environment, and manually compile the project to get the components. Due to the development of a large number of components, it is tedious to repeat these steps every time, and hopefully this can be optimized in subsequent releases.

practice

In this Double 11 promotion, dozens of floors built by Deco were successfully launched. In the use of Deco, we have explored a set of access mode suitable for us from unfamiliar to familiar. Adjust different strategies for different business processes, and the efficiency has reached 48%. I believe that with the deepening of business cooperation, greater empowerment can be brought.