Uncovering the Secret of Bump Technology: 618 Big Promotion Analysis

Lead

In 2021, 618 has been successfully rolled off, and the amount of orders placed on the platform has reached a record high, reaching 305.6 billion. As the main front-end undertaking team of the big promotion line, it was responsible for the development of 16 venues this year. This article will reveal the secrets from the three aspects of the venue's innovative functions, technical framework and collaboration methods. How to develop the high-demand 618 promotion of more than 2021 venues in a short period of time to resolve the baldness crisis.

Different 618

1. Taro3 application: pull through H5 and applets

In recent years, mini programs have received more and more attention due to their advantages in user reach and user retention. The team has also been exposed to venues that need to be developed in mini programs (not in H5 format), and Taro’s advantage is to use the same set of codes. Package a program that runs on multiple terminals, which meets our needs for small program development. Taking into account the future business channels, we completed the landing of the Taro3 technology stack in the venue in Q1 of 2021. During this process, we encountered two white screen problems: the white screen of the Android low version browser and the white screen of the main purchase applet.

• Android low version browser white screen

This phenomenon is generally caused by low-level browsers that are not compatible with high-level grammars. After simplifying the page, it is found that a blank project will also have a blank screen. Finally, the problem is determined in the use of Web Components. Since the main channel of the current venue is H5, after feedback and discussion with the Taro development team, for the application of H5, the basic components implemented by Web Components are replaced with React components; no changes are made in the applet. The Dom node is shown in the figure below:

At present, the latest version of Taro has synchronized this function, and users do not need special processing. A set of project codes can solve H5 page development and small program development, saving twice the amount of development.

• The special processing of the JD shopping applet on the H5 link hash routing results in a blank screen

Taro3 will add the default hash route when packaging H5. History route cannot be used when the Tongtian Tower (event publishing platform) publishes events. At the same time, JD shopping applet and Jingxi applet will add some parameters and hash parameters when processing links in WebView. The path of the H5 page in the applet is confused. There are three solutions:

1. Open the whitelist with the mini program
2. Modify the link address of H5 and add "omitH5Params"
3. Change Taro3 routing settings

Since there are as many as 16 conference venues in the big promotion, the use of plan 1 and plan 2 requires statistics on the links of each venue and channel, which is very risky. Therefore, after discussing with the Taro development team, the effect of Scheme 3 was finally realized. A new routing configuration hook was added, and a separate routing setting was made for H5. The venue can be accessed in the mini program through the default link of Tongtian Tower. Reduced development and operation and 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: the guarantee of user experience

The online time of the big promotion venue is about one month, with over 100 million PV visits, and very high requirements for page security. For data abnormalities, there are two front-end processing methods:

• Jump to the simple version of Tongtian Tower page when the request is abnormal
• Monitoring request, using built-in data pocket when abnormal

In terms of user experience, the two schemes have their own advantages and disadvantages. The advantage of solution one is that it can display real-time product and ad group information. The disadvantage is that the page structure is different from expectations and lack of interactive guidance; the advantage of solution two is that it is consistent with the normal page structure, but the disadvantage is that the data is solidified and cannot be followed up with operational strategy adjustments in time. . For this reason, we designed the overall process for disaster recovery:

This year we adopted a new version of disaster recovery service that takes into account the first and second scenarios. The client (each venue) configures the monitoring interface (usually the first screen data pull interface) and the data backup interval (commonly 1 hour) , The request of depersonalization data is backed up to the OSS server by the server, so as to achieve the following effects:

• There is no page jump to ensure that the user experience meets expectations;
• Follow the operation strategy to update dynamically, and back up data every 1 hour (configurable).

During the 618 special session and climax period, we counted the exposure of disaster recovery services, as shown in the figure below (data sensitivity does not provide specific values temporarily):

3. Smart UI: Effectively increase conversion rate

With the deepening of refined operation strategies and the popularity of intelligent applications, the commodity BI in the venue can no longer meet the demands of users. This year, the concept of "smart UI" was added. According to the construction of user design portraits, the same product information/venue entrance will present different design styles through the front end. As shown in FIG.

For the front-end, the requirements can be simplified as follows: When the page loads, determine the UI style of the product/shop by requesting the user-designed portrait issued by the back-end interface.

• function realization

  As a typical SPA project, the page will start requesting page data and rendering it by js after loading index.html and the main script, as shown in the following figure:

  

  In order to prevent secondary rendering of the page, we can request the smart UI interface in parallel while requesting page data, as shown in the following figure:

  

• achieve the effect

  Take the feeds at the bottom of the main venue and the entrance of the store as an example, the actual page effect is as follows:

  

  Judging from the data of interactive students' review of activities, the smart UI strategy has effectively verified the click-through rate and conversion rate of the floor.

4. Pull to refresh: another way to refresh the page

On the homepage of the JD shopping app, the page refresh can be triggered by the pull-down operation, even on some special days (such as the 618 promotion), the pull-down can trigger the xView to launch the venue entrance, which shows that users have been cultivated in the habit of the pull-down operation. But in the venue, if you need to update the page data (such as spike products), you can only go back to the superior page and reopen it.

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

• function realization

  First, we need to set the WebView to support pull-down refresh through the unified configuration protocol of the navigation bar, and at the same time set the name of the function called at the beginning of the pull-down refresh, and finally we only need to write our page refresh logic in the callback function.

• achieve the effect
  

5. VR Turntable: Cool Gen Z

For the generation Z people who advocate individuality, refuse to follow the trend, and have a strong curiosity and trial mentality for new things, the big-name drying factory has made corresponding adjustments in terms of operation strategy, design style, and presentation of dynamic effects. VR turntable is a typical case.

Let's first look at a comparison chart of visual design, we can see that everyone's requirements for accuracy are quite high:

• function realization

The processing of the roulette mainly considers three parts: initialization, rotation, and stop rotation.

• Initialization: Process circular drawing (each card height setting, centering, and rotation angle), and set the initial value of each state, including center coordinates, touch starting point coordinates, angle before rotation, rotation state, lock, etc.

• Rotating:

  • When touched: record the current wheel angle and start coordinates, release the lock
  • During the sliding process: Determine whether to slide horizontally, set the status, calculate the sliding angle and the current item index, and process the roulette animation.
  • When stopping rotation: judge whether the current operation is enough to rotate (take 1/2 card angle as the standard), release the lock, set the rotation state, and trigger the roulette callback.

• achieve the effect

summary

There are also many novel interactive forms in 618 in 2021 (such as omni-channel AB pages, entry selection of Generation Z, etc.), and modules that have achieved higher clicks and conversion rates compared with previous years of big promotions (such as: tens of billions of shopping Gold series, business department floor optimization, etc.). You can refer to the battle report compiled by the design classmates.

Wonderful interactive display:

Development Secret

1. Technical Framework

Since joining JD.com, we have experienced the initial gulp + ejs, 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

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

2. Efficient way of collaboration

Projects with short development cycles and heavy workloads will inevitably encounter team collaboration scenarios. At present, we often deal with three types of situations:

• Multi-person collaboration on the same page, such as big-name drying factory and scene page
• Multi-person collaboration pages in different periods of the same venue, such as 4 periods in the main venue
• The reuse of the same component in different venues, such as the connection of tens of billions of shopping dollars in the big promotion venue

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

• Code branch specification

When developing a project, code branch management is based on product requirements. principle, one branch corresponds to one requirement . In the development cycle of the project, there is a development branch dev . All functional branches are dev and named in the form of feature-xxx

When the functional module development is completed, the functional branch will be merged into the development branch dev

If the branch dev has a problem after merging a functional branch, we can quickly roll back to the node before the merged branch, or even check the problem branch, so as to ensure the reliability of the and the easy maintainability of

• Common module maintenance

The management of public modules has always been a key consideration in development. Public modules can be divided into the following two categories:

• Technical public module

For technical public modules, such as request library, component library, tool class, etc., they can be integrated in the scaffolding and introduced in the form of npm For the common code of the same project in different stages,

For example, pre-loaded modules, fault-tolerant components, bottom navigation, etc. Generally speaking, you can create a folder, such as common , for storage.

• Common modules at the business level

For business-level public modules, they may accumulate with the development cycle, so tools cannot be integrated in the scaffold in advance. For example, for this year's 618 event, many venues include red envelope rain, countdown and other functions. The performance of these functions between different venues is similar, so you can share the same set of codes.

Common codes are introduced in different projects, generally npm , git submodule , git subtree etc. They have their own advantages and disadvantages. For example, npm focuses more on package dependency management, but cannot achieve two-way synchronization, which means that someone needs to maintain the package. If I develop a component in the current project, this component is in It may also be used in other projects, but I can't upgrade it to the npm package, and I need someone to do this. Another example is git submodule , which is characterized by allowing to embed another sub-repository in a project warehouse, but the embedded sub-repository is based on a certain commitID . If other developers do not follow the corresponding specifications when operating the sub-repository, the original commitID changes, it may affect all projects that have introduced this sub-warehouse.

Comparison of public module management methods

method	Advantages	Disadvantages
npm	Easy to import, can be used in multiple projects	Two-way synchronization is not possible, and special personnel are required to maintain and send out packages
git submodule	Introduced as a sub-repository, the catalog is clear	Based on commitID, changes in commitID may result in changes in sub-repositories
git subtree	Introduced as a sub-repository, the catalog is clear	The update and push instructions of the sub-repository are relatively complicated

git subtree relatively more in line with our needs. Like git submodule , it allows us to introduce sub-projects in the current project. This sub-project is as intuitive as other ordinary directories. If there are changes such as adding public modules or modifying functional modules, only You need to maintain the warehouse corresponding to the sub-project like other warehouses, and then go back to the current project to synchronize the sub-project code.

• Project version iteration

Due to the long duration of the 618 event, the same event project may be divided into warm-up period, special , 160f0153f83833 climax period and other different stages. Each stage has corresponding changes, such as new floors and new functions. Wait. If the warm-up period function is sent to the climax period, or the climax period configuration is made into the special period, it may cause catastrophic problems.

Generally speaking, you can manage the code of different stages through branches, but this requires developers to have strong branch management capabilities and synchronize code updates in time. Even so, if you cut the wrong branch when releasing the project, it will still cause serious accidents.

In order 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 naming directory of stages
• Configure different release instructions in different stages

Taking the Jingdong Gold List event as an example, the Jingdong Gold List event special period and the climax period during the entire 618 event period. We use the s1 s2 060f0153f83959153f 060f0153f83942 and the 060f0153f839153 climax period corresponding to the special period :

Which, the height of the sign floors and racing floor and special stage is different, so the two floors on s2 under the file directory:

Then configure the activity information corresponding to the staging:

By executing the commands yarn deploy -- name=dist stage=1 and yarn deploy -- name=dist stage=2 to distinguish the corresponding staged packaging deployment operations.

Using the above method can ensure that each stage corresponds to the specified entry file and the specified running command, and avoids iteration errors as much as possible.

summary

The development of large promotion venues means that a large number of venue(s) will be developed and launched in a short period of time. At the same time, the large promotion will take a long time online, and the operation strategy will definitely be dynamically adjusted. In addition to the planned workload, it is necessary to consider the manpower reservation for changes. And cost. Therefore, a technical framework suitable for rapid iteration and efficient development, as well as an efficient way of collaboration, is the basis for supporting us to complete the task.

Concluding remarks

The 618 event every year is a huge challenge for us. Efficient development model, elegant coordination method, and reliable disaster recovery plan are our goals. We will continue to improve every event. technology. We believe that only sufficient technical reserves can escort JD 618 and become the cornerstone of JD 618's continuous performance.

The above is our R&D team's development methods and details of the 618 event. We hope that we can use our ideas and grow together.