Introduction:

In 2021, 618 was successfully rolled off the platform, and the order amount on the platform reached a new high of 305.6 billion yuan. As the main front-end undertaking team of the big Promotion line, I was responsible for the development of 16 venues this year. This article will reveal the secrets from the three aspects of venue innovation function, technical framework and collaboration mode, how to develop the 2021 multi-venue, high-demand 618 promotion in a short time, and resolve the balding crisis.

It’s not the same 618

1. Taro3 applications: Laton H5 and applets

In recent years, due to the advantages of small programs in user reach and retention, more and more attention has been paid to them. The team has also come into contact with conferences that need to be developed in small programs (other than H5 form). Taro’s advantage is to package multi-terminal programs with the same set of code, which meets our requirements for small program development. Considering future business channels, we completed the landing of Taro3 technology stack in the venue in Q1 2021. In this process, we encountered two blank screen problems: the blank screen of the android browser of the lower version and the blank screen of the main purchase small program.

• A blank screen is displayed on the browser of a lower version of Android

This is usually caused by the fact that older browsers are not compatible with higher-order syntax, and even a blank item will appear blank after simplifying the page. Ultimately, the problem was identified in the use of Web Components. As the main channel of the forum is H5, after feedback and discussion with the Taro development team, we will replace the basic Components implemented by Web Components with React Components for H5 applications. Do not make changes in applets. Dom nodes are shown as follows:

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

• Jingdong shopping mini program’s special processing of H5 link hash route results in a blank screen

The default hash route will be added when Taro3 packages H5, and the history route cannot be used when Babel (activity publishing platform) publishes activities. Meanwhile, jingdong Shopping applet and Jingxi applet will add some parameters and hash parameters when WebView processes links. Thus resulting in small program H5 page path disorder. There are three solutions:

1. And small procedures to open the white list
2. Modify H5 link address add “omitH5Params”
3. Change Taro3 route Settings

As the number of conferences is up to 16, the use of plan 1 and Plan 2 requires the statistics of the links of various conferences and channels, which is very risky. Therefore, we discussed with the Taro development team and finally realized the effect of plan 3, which added the route configuration hook, set a separate route for H5, and access the venue through the default link of Babel in the small program. Reduced development and operation and maintenance costs.

The key configurations of the final project are as follows:

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

2. Disaster recovery service: ensures user experience

The online duration of the conference is about 1 month, and the visit PV is over 100 million. The page security requirements are very high. There are two front-end ways to handle data exceptions:

• If the request is abnormal, the simple Babel page is displayed
• Monitor requests and use built-in data pockets when exceptions occur

From the perspective of user experience, the two schemes have their own advantages and disadvantages. The advantage of scheme one is that it can display real-time information of commodities and advertising groups, but the disadvantage is that the page structure is different from the expectation and lacks interactive guidance. The advantage of scheme 2 is that the page structure is consistent with the normal one, while the disadvantage is that the data is solidified and the operation strategy cannot be timely followed up. To this end, we have designed the overall Dr Process:

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 redirect to ensure that the user experience is in line with expectations.
• Follow the operation policy to update dynamically, and back up the bottom pocket data every 1 hour (configurable).

During the 618 special session and peak period, we counted the exposure of Dr Services, as shown in the figure below (data sensitivity does not provide specific values) :

3. Smart UI: Effectively improve conversion rate

With the deepening of the refined operation strategy and the popularity of intelligent applications, commodity BI in the venue can no longer meet the demands of users. The concept of “smart UI” was added this year. According to the construction of user design portrait, the same commodity information/venue entrance, through the front of the presentation of different design styles. As shown above.

For the front end, the requirements can be simplified as: when the page is loaded, the UI style of goods/stores can be determined by requesting the user design portrait delivered by the back-end interface.

• Function implementation

  As a typical SPA project, the page will request the page data and render it with JS after loading index.html and the main script, as shown below:

  

  To prevent secondary page rendering, we can request the intelligent UI interface in parallel while requesting the page data, as shown in the figure below:

  

• Implementation effect

  Taking 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:

  

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

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

On the homepage of JINGdong shopping APP, page refresh can be triggered by pull-down operation. Even on some special days (such as 618 Promotion), xView can be triggered to launch the venue entrance, which shows that users have been cultivated the habit of pull-down operation. However, in a meeting, if you need to update the page data (for example, to kill products), you can only return to the upper-level page and open it again.

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

• Function implementation

  First of all, we need to set the WebView to support pull-down refresh through the unified configuration protocol of the navigation bar, and set the function name to be called when the pull-down refresh starts. Finally, we just need to write down our page refresh logic in the callback function.

• Implementation effect

5. VR Turntables: Cool Generation Z

For advocating personality, refuse to follow the trend, for new things have a strong curiosity and try to the Z generation of people, big brands of dryness factory from the operation strategy, design style to the dynamic effect of the presentation have made the corresponding adjustment. VR turntable is a typical case.

Let’s take a look at a comparison diagram of visual design. It can be seen that the requirements for achieving accuracy are quite high:

• Function implementation

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

• Initialization: process the circle drawing (each card height setting, center, and rotation Angle), set the initial value of each state, including center coordinates, touch starting coordinates, rotation Angle, rotation state, lock, etc.
• Rotation:
  • Touch: record the current wheel Angle and start coordinates, release the lock
  • In the sliding process: judge whether to slide horizontally, set the state, calculate the sliding Angle and the current item index, and process the wheel animation.
  • Stop rotation: judge whether the current operation is enough to rotate (with 1/2 card Angle as standard), release the lock, set the rotation state, trigger the roulette callback.

• Implementation effect

summary

There are also many novel interaction forms in 2021 618 (e.g., omni-channel AB pages, selection of terms for Gen Z, etc.), and modules that achieve higher click and conversion rates than previous campaigns (e.g., 10 billion shopping gold series, division floor optimization, etc.). 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 the initial gulP + EJS, later 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, the basic configuration and the support of EUI component library are adopted. Then, the common tool library is encapsulated in the middle layer and the combination of different business modules is combined to complete the development of the venue. And this series of division of labor, combination of the basis, can not leave the implementation of good team norms; In addition to the front-end work, the team also thinks about future technology directions (intelligence) and better user experience (disaster recovery). The details are shown in the figure below:

2. Efficient collaboration

Projects with short development cycles and heavy workloads will inevitably encounter team collaboration scenarios, and we currently deal with three types of scenarios:

• Multiple people collaborate on the same page, such as the marquee Manufacturer and scene page
• Multiple people cooperate with the page of different periods of the venue, such as 4 periods of the main venue
• Reuse of the same component in different venues, such as ten billion shopping money in the grand promotion of the venue

Therefore, efficient way of collaboration, reasonable branch organization, scientific version iteration becomes particularly important.

• Code branching specification

Branch code management based on product requirements during project development. In principle, one branch corresponds to one requirement. The project has a development branch dev during the development cycle. 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, the functional branch is merged into the development branch dev

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

• Common Module maintenance

The management of common modules is always an important issue in development. Public 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 scaffolding and introduced in the form of NPM during project initialization. For common code in different installments of the same project,

Such as preloaded modules, fault-tolerant components, bottom navigation, etc., usually you can create a folder, such as Common, for storage.

• Common modules at the business level

Common modules at the business level may accumulate over the development lifecycle and therefore cannot be integrated in scaffolding ahead of time, such as tool classes. For example, in this year’s 618 event, many venues included red envelope rain, countdown and other functions. These functions behaved almost the same from venue to venue, so they could share the same code.

Introduce 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 you to embed another sub-repository in a project repository, but the sub-repository is based on a commitID. If other developers do not operate the sub-repository according to the corresponding specifications, the original commitID will change. It has the potential to affect all projects that have introduced this sub-repository.

Compare the management modes of public modules

way	advantages	disadvantages
npm	Easy to introduce, can be used in multiple projects	Two-way synchronization cannot be performed, and special personnel are required for maintenance and contract delivery
git submodule	To sub – warehouse introduction, clear directory	Based on commitID, changes in commitID may cause changes in the sub-warehouse
git subtree	To sub – warehouse introduction, clear directory	The update and push instructions of sub-warehouse are relatively complicated

Git subtree is a better fit for our needs. Like git subModule, it allows us to introduce subprojects into the current project. This subproject is just as intuitive as any normal directory. Just maintain the subproject repository as you would any other repository, and then go back to the current project to synchronize the subproject code.

• Project Version iteration

Due to the long duration of the 618 event, the same event may be divided into different stages, such as warm-up period, special period and peak period. Each stage has corresponding changes, such as new floors and new functions. If you put the warm-up function into the peak phase, or turn the peak phase configuration into a special phase, it can lead to catastrophic problems.

It is generally possible to manage different installments of code by branching, but this requires the developer to be able to branch and keep up with code updates. Even so, if you branch off in the wrong direction when you release a project, it can still cause serious accidents.

In order to avoid the above situation, we took the following measures:

• Different stages correspond to different entry files
• Different stage specific functions/floors are stored in the stage named directory
• Different stages are configured with different issuing commands

Taking jingdong Gold List as an example, jingdong Gold List is divided into special event period and high tide period during the whole 618 event. We use S1 and S2 directories to correspond to the entrance of special event period and high tide period respectively in the project:

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

Then configure the activity information corresponding to stages:

You can run the yarn deploy — name=dist stage=1 and yarn deploy — name=dist stage=2 commands to differentiate deployment packages in different stages.

Using the above method can ensure that each installment corresponds to the specified entry file and the specified running command, as much as possible to avoid the situation of iteration error.

summary

Greatly promote the development of the venue, which means that a large number of venues (they) in a short time of development online, at the same time greatly promote the online time is long, the operation strategy will be dynamic adjustment, in addition to the workload in the plan, but also need to consider the change of manpower reservation and cost. Therefore, a technical framework suitable for rapid iteration and efficient development, as well as efficient collaboration, is the foundation to support us to accomplish the task.

conclusion

Every year’s 618 event is a huge challenge for us. Efficient development mode, elegant collaboration and reliable disaster recovery solutions are our constant goals, and we will continue to improve our technology in response to the changes of each event. We believe that only sufficient technical reserves can escort JINGdong 618 and become the cornerstone of jingdong 618’s continuous innovation.

The above is the way our r&d team developed the 618 campaign and the details of the consideration, we hope to shed some light and grow together.