Introduction:

In 2021, 618 has been successfully offline, and the order amount of the platform has reached a new high, reaching 305.6 billion yuan. As the main front-end team for the promotion line, we have been responsible for the development of 16 venues this year. This paper will reveal the secrets from the three aspects of innovative functions, technical framework and collaboration mode of the venue, how to develop the multi-venue and high-demand 618 promotion in 2021 in a short time, and solve the baldness crisis.

It’s not the same 618

1. TARO3 application: Laton H5 and applet

In recent years, miniprograms have become more and more important due to the advantages of user access and user retention. The team has also been exposed to the venue that needs to be developed in small programs (not in the H5 form). The advantage of TARO is that it is packaged with the same set of code to produce multi-terminal running programs, which meets our needs for small program development. Considering the future business channels, we completed the implementation of the TARO3 technology stack at the venue in Q1, 2021. In this process, we encountered two white screen problems: the white screen of the low version of Android browser and the white screen of the main small program.

• The lower version of Android’s browser has a white screen

This phenomenon is usually caused by the incompatibility of lower-level browsers with higher-level syntax. After simplifying the page, it is found that a blank item will also go blank. The problem was ultimately identified in the use of Web Components. Since the main channel of the meeting is in the form of H5, after feedback and discussion with the Taro development team, the React component is replaced with the basic component of Web Components for the application of H5. Do not make changes in the applet. DOM nodes are shown in the figure below:

This feature has been synchronized in the latest version of Taro, and users do not need special processing. A set of project code to solve the H5 page development and small program development, save twice the amount of development.

• The special handling of H5 link hash routing by JD Shopping Mini Program resulted in a white screen

The default hash route will be added when Taro3 packages H5. History route cannot be used when Babel (activity publishing platform) releases activities. At the same time, JD Shopping Mini Program and Jingxi Mini Program will add some parameters and hash parameters when processing links in WebView. Thus leading to small program in the H5 page path disorder. There are three solutions:

1. And small program to open the whitelist
2. Change H5 link address to “omitH5Params”
3. Change the TARO3 routing Settings

As there are as many as 16 major promotion venues, the adoption of scheme 1 and scheme 2 requires the statistics of the links of various venues and channels, which is very risky. Therefore, we discussed with the Taro development team and finally realized the effect of scheme 3. We added a new route configuration hook, and made a separate route setting for H5. Through the default link of Babel, the venue can be accessed in the small program. Reduced development and operational maintenance costs.

The key configuration of the final project is as follows:

router: {
      forcePath : '/',
      customRoutes: {
        [`/pages/${process.env.TASK_DIR_NAME}/index`]: '/'
      }
    }

2. Disaster recovery service: guarantee of user experience

Promote the venue online for about 1 month, PV visits over 100 million, very high requirements for page security. For data exceptions, there are two ways to handle the front-end:

• Jump to the simple version of Babel page when an exception is requested
• Monitoring requests, abnormal use of built-in data for the bottom

From the perspective of user experience, both schemes have their own advantages and disadvantages. The advantage of scheme one is that it can display real-time product and advertising group information, but the disadvantage is that the page structure is different from the expected one and it lacks interactive guidance. The advantage of the second plan is that the page structure is the same as that in normal times, while the disadvantage is that the data is fixed and the operation strategy adjustment cannot be timely followed up. For this reason, we carried out the overall process design for disaster recovery:

We have adopted this year to two or morethings disaster plan one or two of the new service, by the client (hall) of each configuration monitoring interface (usually the first screen to pull data interface), and the interval time of the backup data (general for 1 hour), by the server to the request of personalized data backup to the OSS server, so as to achieve the following effects:

• There is no page jump to ensure that the user experience meets expectations;
• Dynamically update according to the operation strategy, and backup the bottom data once every hour (configurable).

In the 618 special period and high tide period, we counted the exposure of disaster recovery services, as shown in the figure below (the specific value of data sensitivity is not provided for the time being) :

3. Intelligent UI: effectively improve the conversion rate

With the deepening of refined operation strategies and the popularity of intelligent applications, commodity BI in the conference room has been unable to meet the demands of users. This year, the concept of “smart UI” was added. According to the construction of user design portrait, the same commodity information/venue entrance, through the front end to present different design styles. This is shown in the figure above.

For the front end, the requirements can be simplified as: when the page is loaded, the UI style of the product/store can be determined by requesting the user design portrait issued by the backend interface.

• Function implementation

  As a typical SPA project, the page will load the index.html and the main script before the request page data is rendered by JS, as shown in the figure below:

  

  In order to prevent the second rendering of the page, we can request the intelligent UI interface in parallel while requesting the page data, as shown in the figure below:

  

• Implementation effect

  Using the feeds at the bottom of the main venue and the store entrance as an example, the actual page looks like this:

  

  From the data of interactive students’ rechecking of activities, the intelligent UI strategy has been effectively verified in terms of the click-through rate and conversion rate of the floors.

4. Pull-down Refresh: Another way to refresh a page

In the home page of Jingdong shopping APP, the drop-down operation can trigger page refresh. Even on some special days (such as 618 promotion), the drop-down can trigger XView to launch the entrance of the venue, which shows that users have been developed the habit of drop-down operation. However, in the venue, if you need to update the page data (such as seckill products), you can only return to the superior page and reopen it again.

Since the event was presented through WebView, after communicating with the responsible team, 618 in 2021 launched the “pull-down refresh” function for the first time in the event.

• Function implementation

  First of all, we need to set the WebView to support drop-down refresh through the navigation bar Uniform Configuration Protocol, and set the name of the function to be called at the beginning of the drop-down refresh. Finally, we just need to write our page refresh logic in the callback function.

• Implementation effect
  
  

5. VR Turntable: Cool Generation Z

For Gen Z people who advocate individuality, refuse to follow the trend, and have a strong curiosity and trying mentality for new things, big-brand dry-making factories have made corresponding adjustments in terms of operation strategy, design style and dynamic effect. The VR turntable is a typical example.

Let’s take a look at a comparison diagram of visual design, and we can see that the requirements for accuracy are quite high:

• Function implementation

Roulette processing mainly considers three parts: initialization, rotation in the process, stop rotation.

• Initialization: process circular drawing (height setting, center setting, and rotation Angle of each card), set initial values of each state, including center coordinate, touch starting point coordinate, Angle before rotation, rotation state, lock, etc.

• Rotation:

  • Touch: record the current wheel Angle and start coordinate, release the lock
  • Sliding process: judge whether to slide horizontally, set the state, calculate the slide Angle and the current item index, roulette animation processing.
  • Stop rotation: judge whether the current operation is enough to rotate (1/2 card Angle as the standard), release the lock, set the rotation state, trigger the wheel callback.

• Implementation effect

summary

In 618 2021, there are also many novel interactive forms (such as omni-channel AB page, Generation Z entry selection, etc.), modules with higher clicks and conversion rates (such as ten billion yuan shopping gold series, floor optimization of business division, etc.) compared with previous years’ promotion. You can refer to the war report organized by the design students.

Wonderful interactive display:

The development of revelation

1. Technical framework

Since joining Jingdong, we have experienced Gulp + EJS at the beginning, then Webpack + Vue/React, and now Taro3. The final goals of our iteration are as follows:

• More extreme performance
• Faster development efficiency
• Lower maintenance costs
• Stable reuse and iteration

Firstly, through the basic configuration of the bottom layer and the support of EUI component library, and then in the middle layer, encapsulate the commonly used tool library, cooperate with the combination of different business modules, and finally complete the development work of the venue; The basis of this series of division of labor and combination is inseparable from the implementation of good team norms. In addition to the front-end work, the team will also think about the future direction of technology (intelligence) and better user experience (disaster recovery). The details are shown in the figure below:

2. Efficient collaboration

Teamwork is inevitable for projects with short development cycles and heavy workload, and we currently deal with three types of situations:

• Multiple people collaborate on the same page, such as the manufacturer and scene page
• Multi-player collaboration page with different periods of the venue, such as 4 periods of the main venue
• The reuse of the same component in different venues, such as tens of billions of dollars of shopping money to promote the completion of the venue

Therefore, efficient collaboration, reasonable branch organization and scientific version iteration become particularly important.

• Code branch specification

Code branch management is based on product requirements in development projects. In principle, one branch corresponds to one requirement. There is a development branch dev in the development cycle of the project, and all functional branches are created based on the development branch dev and named in the form of feature-xxx.

When the functional module is developed, merge the functional branch into the development branch Dev

If branch dev has a problem after merging a functional branch, we can quickly revert back to the node before the merge and even detect the problematic branch to ensure the reliability and maintainability of the development branch

• Public module maintenance

The management of common modules is always a problem that needs to be considered in development. Common modules can be divided into the following two categories:

• Common modules at the technical level

Common modules at the technical level, such as request libraries, component libraries, tool classes, etc., can be integrated in the scaffolding and introduced by NPM during project initialization. For common code in different stages of the same project,

For example, preloaded modules, fault-tolerant components, bottom navigation, etc., can usually be set up in a folder, such as Common, for storing.

• Common modules at the business level

Common modules at the business level may accumulate over the development cycle, so modules such as tool classes cannot be pre-integrated into the scaffolding. For example, in this year’s 618 activity, many venues have included functions such as red envelope rain and countdown, which have similar performance among different venues, so the same code can be shared.

Introducing common code in different projects, such as NPM, Git submodule, Git subtree, etc. They each have advantages and disadvantages, such as NPM dependency management focuses more on the bag, but you can’t accomplish two-way synchronization, which means that there need to maintain this package, if I were in the current project to develop a component, the component in also may need to be used in other projects, but I cannot be promoted to NPM bag inside, and need the corresponding person to do this thing. Another example is Git Submodule, which allows embedding another sub-repository in a project repository, but the embedded sub-repository is based on a commitID. If other developers do not follow the corresponding specifications when operating the sub-repository, the original commitID will be changed. It has the potential to affect all projects that introduce this sub-repository.

Public module management mode comparison

way	advantages	disadvantages
npm	Easy to introduce and can be used in multiple projects	Unable to two-way synchronization, the need for special maintenance, special person delivery
git submodule	With the introduction of sub-warehouse, catalog clear	Based on the commitID, a change in the commitID may result in a change in the subrepository
git subtree	With the introduction of sub-warehouse, catalog clear	Subrepository updates and push instructions are relatively complex

The Git subtree is more suitable for our needs. Like the Git submodule, it allows us to introduce a subproject into the current project. This subproject is as intuitive as any other normal directory. Just maintain the repository for the subproject as you would any other repository, and then go back to the current project to desynchronize the subproject code.

• Project Version Iteration

Due to the long duration of 618 activities, the same activity project may be divided into different stages such as warm-up period, special period and high tide period, and each stage has corresponding changes, such as new floors and new functions, etc. If the function of the warm-up period is sent to the high tide period, or the configuration of the high tide period is made into a special period, it can lead to disastrous problems.

It is generally possible to branch the code in different stages, but this requires strong branch management skills and the ability to synchronize code updates. Even so, if the wrong branch is cut when the project is released, it can still cause a serious accident.

To avoid the above situation, we have taken the following measures:

• Different stages correspond to different entry files
• The unique functions/floors of different stages are stored in the named catalogue of stages
• Different stages are configured with different publishing instructions

Take Jingdong Gold Billboard Activity as an example. During the whole 618 activity, Jingdong Gold Billboard Activity is divided into special period and high tide period. In the project, we used S1 and S2 catalogues respectively to correspond to the entrance of special period and high tide period:

Among them, the check-in floor and the racing floor in the high-tide period are different from those in the special period, so these two floors are placed in the S2 file directory:

The corresponding activity information is then configured by staging:

Distinguish the staging of a packaged deployment operation by executing the commands yarn deploy — name=dist stage=1 and yarn deploy — name=dist stage=2.

Using the above method can ensure that each stage corresponds to the specified entry file and the specified run command, as far as possible to avoid iteration errors.

summary

To promote the development of the venue means to launch the development of a large number of venues (we) within a short period of time. At the same time, to promote the online time for a long time, the operation strategy must be adjusted dynamically. Besides the planned workload, we also need to consider the manpower reserve and cost of the change. Therefore, a technical framework suitable for rapid iteration and efficient development, as well as an efficient way of collaboration, is the foundation to support us to complete the task.

conclusion

Every year’s 618 activity is a huge challenge for us. Efficient development mode, elegant collaborative mode and reliable disaster recovery plan are the goals we always pursue. We will also continuously improve our technology according to the changes of each activity. We believe that only sufficient technical reserves can escort JD 618 and become the cornerstone of JD 618’s performance to constantly reach new heights.

The above is our R & D team’s consideration of the development methods and details of 618 activity, and we hope to cast a brick to attract jade and grow together.