What Rendering Scheme Does Alibaba Need for 2020’s Double 11 Shopping Festival?

By Cao Yuanyan, nicknamed Yuanyan at Alibaba.

Image for post
Image for post

The evolvement and iteration of front-end technologies are clear. The continuous development of new technologies also supports the continuous expansion of front-end application scenarios, from Web and Weex, to Node.js and function-as-a-service. In our development, we can see parts that are unchanged. The pursuit of a better user experience is the only constant responsibility in the continuous development of terminal technologies. At Alibaba, the complexity and popularity of the Double 11 Shopping Festival makes it the most direct and effective way to comprehensively test a technology. Last year’s Double 11 was the first year that Alibaba’s open-source Rax was fully implemented. This article describes how Rax is designed to improve user experience.

Lightweight

Image for post
Image for post

At the beginning of this year, we launched the Rax 1.0 plan, which supports Hooks. The use of hooks can shrink business code. In addition, the new Rax 1.0 is more lightweight and faster than the previous Rax 0.6, with the scale of kernel code reduced from 57 thousand to just 17 thousand.

Image for post
Image for post

Adaptive Hydration Rendering

In the design of the Rax Hydration solution, we took compatibility and ease-of-use as top goals. Therefore, Rax will reuse existing nodes whenever possible and correct all differences. Rax has several types of correction: text correction, attribute correction, and node correction. If a node does not exist during node correction, it is also deleted to ensure the correctness of the rendering result.

Image for post
Image for post

Snapshot Rendering

Image for post
Image for post

Rax snapshot technology also requires a pre-existing state. When using the snapshot technology, we can store the page state as a snapshot at any time. After this, the next time the page is loaded, the page snapshot will be loaded from local storage. After the snapshot is loaded, we need to update it to the latest status. In the past technical solutions, when the new page is completed, we set it to the current snapshot page configured for the experience, and then set the latest page. This process could trigger page flashing. However, by using Rax’s Adaptive Hydration Rendering to update snapshots to the latest status, this problem can be avoided. This is also a result of a deep focus on compatibility as an important design goal of Rax Hydration.

Image for post
Image for post

Server-Side Rendering

Finally, we found a solution in the project. We calculated and concatenated strings in advance of compilation, and learned from the following test data that the SSR performance of Rax is eight times that of React. These results even surpass XTPL. This gives us the opportunity to use JSX to replace XTPL in appropriate scenarios.

-----------compare renderToString----------
React(16.12.0)#renderToString x 1,664 ops/sec ±1.40% (84 runs sampled)
Rax(1.0.13)#renderToString x 13,411 ops/sec ±1.05% (85 runs sampled)
Preact(10.0.5)#renderToString x 1,237 ops/sec ±2.18% (84 runs sampled)
Xtpl(3.4.2)#renderFile x 11,335 ops/sec ±8.17% (69 runs sampled)
The benchmark was run on:
PLATFORM: Darwin 17.5.0
CPU: Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
SYSTEM MEMORY: 16GB
NODE VERSION: v10.11.0

Native-Side Rendering

Image for post
Image for post

Personalized Rendering

Image for post
Image for post

In this case, both users with poor networks and those with low-performance devices are on the spot, and logically, low-performance devices and poor networks may incur a high reconnection rate. Therefore, it is necessary to choose the appropriate rendering solution for different scenarios. For example, if the network conditions are not ideal, NSR rendering is preferred for rendering on the client, and SSR rendering is ideal for rendering outside the client. If the device performance is not good, SSR rendering is preferred for rendering both on and outside the client. Therefore, we believe that the future rendering methods should be personalized and scenario-specific.

Through our continued efforts to improve these technologies, for the interaction efficiency, we expect that the Double 11 Shopping Festival in 2020 will bring more people an experience within 3 seconds, and far fewer people will average longer than 7 seconds.

Original Source:

Written by

Follow me to keep abreast with the latest technology news, industry insights, and developer trends.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store