Introduction of Taro

Taro is a multi-terminal development framework based on the React syntax specification. You can learn more about it at taro.aotu. IO. Some time ago, after the launch of Taro, JINGdong Shopping mini program has started the reconstruction of some pages based on Taro. This article is to share some practice of using Taro to reconstruct the code of product classification page.

Hybrid development mode

Jingdong shopping applet in the past did not use any third-party framework, but based on the native applet mode, carried out the encapsulation of modules such as page/component base class, network request, local storage, page jump and so on. Due to the large size of the project (involving more than 100 pages), it is definitely not feasible to directly transform the whole project into the development mode of Taro. Therefore, we adopt such a development mode of mixing native applet and Taro, and reconstruct some old pages using Taro, while develop some new pages using Taro directly. Here, taking the product classification page as an example, we first take a look at the directory structure of the original JINGdong shopping mini program project:

├ ─ ─ dist │ ├ ─ ─ app. Js │ ├ ─ ─ app. Json │ ├ ─ ─ app. WXSS │ ├ ─ ─ assets / │ ├ ─ ─ common / │ ├ ─ ─ libs / │ └ ─ ─ pages │ ├ ─ ─ cate │ │ ├ ─ ─ the components / │ │ ├ ─ ─ index. The js │ │ ├ ─ ─ index. The json │ │ ├ ─ ─ but WXML │ │ └ ─ ─ but WXSS │ └ ─ ─ index / ├ ─ ─ SRC / ├ ─ ─ └─ ├─ package.json ├─ └ /Copy the code

1. Initialize Taro

Taro init jDWXA-taro in the project root directory to initialize the project. After completion, a directory named jDWXA-taro will be added. The source code for taro is written in this directory:

├ ─ ─ dist / ├ ─ ─ SRC / └ ─ ─ jdwxa - taro ├ ─ ─ the config │ ├ ─ ─ dev. Js │ ├ ─ ─ index. The js │ └ ─ ─ the prod. Js ├ ─ ─ node_modules / ├ ─ ─ Package. The json ├ ─ ─ project. Config. Json └ ─ ─ the SRC ├ ─ ─ app. Js ├ ─ ─ app. The SCSS ├ ─ ─ index. The HTML └ ─ ─ pages └ ─ ─ cate ├ ─ ─ index. The js └ ─ ─ index.scssCopy the code

2. Taro configuration

Separate Taro projects will include app.js, app.json, app.wxss and page files to be generated in the dist/ directory. In mixed development mode, only a single page needs to be generated. Open and edit the config/index.js file:

const config = { outputRoot: '.. /dist', weapp: { appOutput: false, npm: { dir: '.. /.. /dist/common', name: 'taro' } }, // ... }Copy the code

As shown in the code, the outputRoot field is the location where the generated target page is stored, pointing to the dist/ directory at the top level (the original project). App.js, app.json, and app.wxss files will not be generated. The NPM field indicates the storage directory of the Taro runtime framework files. Specify it as the common/ directory. In this way, the Taro compiled object file is perfectly integrated into the original applet project.

3. Page development

React + JSX: React + JSX: React + JSX: React + JSX

  • With appletssetDataTaro is used to update page data in different wayssetStateIs asynchronous, the related code execution timing needs special attention;
  • In order to facilitate JSX template writing, it is recommended to split the long WXML content into smaller components;
  • There is no need to worry about the reuse of old components, whether it is a native widget, a normal JS module, a style file or a third-party component library.
  • At present, the Taro compilation generated object code, debugging will be a little difficult, but yesSourceMapSupport is actively under development.

4. The end result

Now that the reconfigured product category page has been running stably online for some time, you can scan the following small code to try it out:

The benefits brought by Taro

Multiterminal run

The biggest benefit is the ability to create multiple versions, avoiding rework and saving development costs. Take the classification page as an example, just run NPM Run build: H5 to generate the H5 version of the classification page, the running effect is consistent with the small program, you can scan the following TWO-DIMENSIONAL code to experience:

Note: The above is only a sample page generated by Taro. As some business components have not been fully adapted to both ends, version H5 has not been officially put into use.

Performance improvement

Performance problems encountered in small program projects are mostly caused by frequent calls to setData. This is because every time setData is called, the small program will conduct operations similar to serialization of this part of data in the logical layer (running environment JSCore). The data is converted into a string form and passed to the view layer (WebView). The view layer deserializes the data and then renders the page. This process has certain performance overhead.

Therefore, in the development process, we suggest merging setData as far as possible to reduce the number of calls, for example:

this.setData({ foo: 'Strawberry' })
this.setData({ foo: 'Strawberry', bar: 'Fields' })
this.setData({ baz: 'Forever' })Copy the code

The above code calls setData 3 times, causing unnecessary performance overhead and should be merged:

this.setData({
    foo: 'Strawberry',
    bar: 'Fields',
    baz: 'Forever',
})Copy the code

After Taro is used, setState is called asynchronously when data is updated. It will automatically merge multiple setState calls in the same event loop. In addition, data diff optimization will be carried out to automatically eliminate those unchanged data, thus effectively avoiding such performance problems. Such as:

// this. State = {foo: '1967', bar: {foo: 'Strawberry', bar: 'Fields', baz: 'Forever',}} // Update this.setState({bar: {foo: 'Norwegian', bar: 'Fields', baz: SetState ({foo: '1967', bar: {foo: 'Norwegian', bar: 'Wood', baz: 'Forever',}})Copy the code

Although the above code has gone through setState twice, only the data of bar.foo and bar.bar are updated. At this time, Taro will automatically merge the data and eliminate the duplicate data.

$scope. SetData ({'bar.foo': 'Norwegian', 'bar.bar': 'Wood',})Copy the code

Other income

Taro offers exciting features over native applets (support for TypeScript, NPM, rich JSX syntax, advanced ES features, and more) that not only improve the development experience, but also help with automated testing, continuous build, and more.

For example, jingdong shopping mini program encapsulates a getImg method, which accepts a picture URL and optional width and height as parameters, and then decides whether to use webP format according to the device type, applies appropriate picture compression rate according to the current network environment, automatically processes protocol headers and domain name conversion. Finally, the image URL that matches the target size is generated. We require that all images must be processed by getImg method before they can be displayed. However, because JS method can only be called in the logical layer, and then passed to WXML for display after processing, it is difficult to detect in automation tools and timely find the situation of images output without calling getImg.

After Taro is used, getImg method can be directly used to process SRC when Image tag output from JSX template. After such writing method is defined as a standard, it can be easily detected by automatic tools:

render () {
    return <Image src={getImg(url, 750)} />
}Copy the code

So for existing projects, Taro can be well integrated without the need for overall reconstruction. What are you waiting for

Convex laboratory
Aotu. IO/notes / 2018 /…