Notes on JD Mini Program Development Based on Taro | JD Cloud Technical Team

1. Mini Program Basic Model

Let’s start with the history of WeChat Mini Programs, which can be roughly divided into three stages from its predecessor to the present:

Phase 1: WeChat web pages need to use the native capabilities of the app, and WeChat officially launched js-sdk
Phase 2: Solve the problem of white screen on the mobile terminal and use WeChat web resources for offline storage
Stage 3: Pursue the original experience, redesign and generate applets

In order to meet the openness requirements of merchants, service providers and other users in JD.com’s applications, JD.com has also launched its own mini-program platform. According to the official definition: JD.com’s mini-program platform is a fully open ecological model. Entering the platform, users can share JD’s APP traffic benefits, massive SKUs, and open capabilities, improve user experience, and bring new opportunities to merchants.

The biggest difference between the applet architecture and the web is that the running environment of the applet is divided into a rendering layer and a logic layer, in which JXML templates and JXSS styles work on the rendering layer, and JS scripts work on the logic layer.

The rendering layer and logic layer of the applet are managed by two threads respectively: the interface of the rendering layer uses WebView for rendering; the logic layer uses JsCore thread to run JS scripts. A small program has multiple interfaces, so there are multiple WebView threads in the rendering layer. The communication between these two threads will be relayed through the client (Native will also be used to refer to the client below). The network request sent by the logic layer is also forwarded through Native. The communication model of the small program is shown in the figure below.

The rendering layer of the applet is responsible for handling tasks such as page rendering, user interaction, and event processing. The logic layer is responsible for processing tasks such as business logic, data calculation, and interface requests. By dividing the rendering layer and the logic layer into two independent threads, the applet can realize the asynchronous execution of time-consuming operations (equivalent to web workers), thereby improving the fluency and response speed of the applet. For example, when a network request is made, the logic layer can call the API asynchronously and hand over the task to the background thread for processing, while maintaining the responsiveness and fluency of the user interface and enhancing the user experience.

Since the environment of the logic layer and the rendering layer are different, the logic layer cannot access the dom interface. From this picture, we can also see that the main factor affecting the performance of the applet is the data interaction between the rendering layer and the logic layer.

2. What did the vue-like and react-like frameworks do?

Jingdong applet development can use native grammar, so why do we still use Taro? There may be several reasons:

1. To improve development efficiency, React and Vue can be used for development.
For students who are familiar with web development, with the help of cross-end frameworks, "theoretically" you can develop a small program like an ordinary React or Vue application. It is no different from the previous development mode. You don't need to care about the syntax of AXML or WXML, and you can also use the Less or Sass you are familiar with to write styles.

2. One-time development, multi-terminal operation
As can be seen from the name of the framework, the most important two words for the cross-end framework are cross-end. The cross-end here mainly refers to different small program platforms, such as JD applets, Alipay applets, Dingding applets, WeChat applets, and Toutiao applets. In addition to applets, H5 is generally supported, and some cross-end frameworks may also support React Native. This ensures that after development using the cross-end framework, it can be distributed to different small program platforms such as WeChat and Alipay, and can also be compiled into an ordinary H5 or RN application. Really achieve one-time development and multi-terminal operation.

3. Component reuse
Since we can develop once and run on multiple ends, our code can be reused in different applets or H5. Based on this, public components can be deposited and public logic abstracted, which will greatly improve development efficiency.

4. Performance improvement
Mainly for the optimization of data interaction, to achieve incremental updates. Implement tree-shaking through webpack and other capabilities to reduce package size.

3. Technology selection

Due to the need to develop JD applets, we give priority to using the Taro cross-terminal framework. There are few ui frameworks that support applets internally. We choose the relatively stable vue3 framework nutui-vue, and use the officially recommended state management library pinia. The final project framework selection is Taro3+vue3+nutui4+pinia.

In terms of network requests, the server interface is uniformly connected to the color gateway, and the login status is opened through the host app, and the request header is manually filled in when the request is initiated. The front end is connected to the self-developed scaffolding whale-cli, and the services interface api and entry and exit parameter definitions are automatically generated through data configuration.

In terms of resource management, large images and icon resources are connected to oss external links, and small images are connected to iconfont to reduce the size of the code package. The project adopts the division method of first-level pages as main package pages and other pages as sub-package subpages, which is convenient for subsequent expansion.

4. Both efficiency and performance

(1) Public component encapsulation
In order to solve the C-side adaptation problem, public components such as PageContainer and SafeAreaInsetBottom are encapsulated, and the APIs of Toast and Dialog are exposed inside the components to simplify invocation and development.
Basic components such as Empty, CustomImage, SelectSearch and other components are common functional modules in the page. After encapsulation, they provide a better way to use and reduce redundant code.

(2) Long list performance optimization
This is an important point in the user experience of small programs, and it is also a point that encounters many problems during the development process, and there are countless pitfalls. Long list rendering may have the following problems: (1) sliding freeze; (2) sliding white screen. After going through solutions such as sliding Loading and scrolling ScrollView, there are always some problems, and finally the solution of virtual list + sliding Loading is adopted.

(3) Project configuration
Taro-based project configuration is mainly to modify the configuration files in the /config folder, mainly using two configuration items: env and defineConstants, and the variables configured by them are also available after compilation. The variable defined by defineConstants is a global variable, but it is easy to be reported by ts that the variable is undefined, so the env configuration item is mainly used. env can read variables in the command line, so it is very convenient to use the command line to define variables.

The above is a practical note on the development of small programs based on Taro. What problems did you encounter in the process of developing small programs? Welcome to the message area to discuss and exchange~

Author: Jingdong Retail Chen Zhen

Source: JD Cloud Developer Community