Alita, the industry’s first React Native to WeChat applet engine, was officially released

Author: Jingdong ARES Multi-terminal Technical Team

Preface

Alita is a React Native transcoding engine tool created by JD.com ARES multi-terminal technical team. It has a brand-new approach to React syntax, supports processing React syntax at runtime, realizes alignment of main components between React Native and WeChat applets, and can convert React Native codes into WeChat applets in a concise and efficient way.

Alita is not a new framework and does not propose new grammar rules. She only does one thing, that is, runs your React Native code on WeChat applet. Therefore, Alita is very low in invasiveness. Whether it is selected or not will not have much impact on your original React Native development mode.

Alita project open source address:https://github.com/areslabs/alita

React Native

WeChat applet

What capabilities does Alita have

Complete React syntax support

Alita’s design goal is to transform RN applications as lossless as possible. Even if RN applications already exist, we hope that they can be run on WeChat applet platform with only a few modifications. Therefore, Alita must have sufficient support for React syntax, includingJSXGrammar, React Lifecycle, etc

JSX语法

Alita supports mostJSXGrammar, what does this mean? This means that you can use React’s free code mode and strong component support, and that you can continue to use your own programming habits without making too many modifications to the existing RN code. This is mainly due to Alita’s handling of JSX syntax at runtime, rather than the compile-time processing common in the community today.

Therefore, Alita is not restricted by other programs in the following communities:

  1. JSXOf components that are only allowed to appearrenderIn the method
  2. Can’t passpropsTransferJSXFragments or returnsJSXFunction of
  3. Transfer function on attribute is not supported

Alita has no pressure to convert the following code:

生命周期

Alita supports all React life cycles. WeChat applets themselves provide life cycles for components, but there are some differences between these life cycles and React in writing and calling, and React life cycles are more abundant. Alita, when supporting React’s life cycle, divided them into two categories, the first category:componentDidMount,componentDidUpdate,componentWillUnmountThese three life cycles have corresponding triggering opportunities on WeChat applets, such asready,detached, only need to call the corresponding method of React component when the relevant callback of WeChat applet is triggered. Another kind, there is no direct corresponding life cycle at WeChat applet end. For this kind of life cycle, the corresponding callback is triggered mainly by mini-react embedded in Alita. Alita realizes alignment of React life cycle through these two ways.

In addition, Alita smoothed the gap between RN and WeChat appletsEventsAndStyleDifference, can lossless RNEventsAndStyleTransfer to WeChat applet.

RN basic components and apis

RN provides many basic components and API, which together with React development form RN application. Alita not only needs to process React syntax, but also must align a set of components and API equivalent to RN on WeChat applet platform in advance. For example, on the RN side, the way to request the network is throughfetchHowever, the WeChat applet itself does not existfetchMethods: This requires Alita to implement a WeChat applet based on the WeChat applet’s network API.fetchMethods. Similarly, RN module is usedFlatListFor example, after Alita converts RN application into WeChat applet code,FlatListThere is no WeChat applet platform, and the version of the applet needs to be implemented in advance on the WeChat applet platform.FlatList. This pre-processing process, which we call alignment, includes components, component attributes, API, etc.

Redux

Redux is a JavaScript state container, which provides predictable state management and is easy to test. Redux is a popular data layer management scheme in React technology stack. Thanks to Alita’s design to handle React logic in the runtime, Alita supports the conversion of RN applications using Redux into WeChat applets.

Animation

Animation is an indispensable ability of every app. The animation implementation of RN and WeChat applets is very different. RN’s animation ability is better than WeChat applets. It is impossible to completely transform RN’s animation into WeChat applets. For this reason, we have packaged a set of animation component library, which covers the animation capabilities of all WeChat applets. All animations developed using this animation library can be converted to applets without damage.

Alita principle

So how does Alita run RN conversion on WeChat applet? We do not intend to make an in-depth analysis in this article, but simply explain it from the compilation stage and the running stage.

Compile stage: We will analyze the RN source code statically and convert it into code recognizable by WeChat applets. First, we willJSXSyntax is converted into wxml module syntax of WeChat applets. RN components will be converted into WeChat applet custom components at this stage, and generally four files wxml, js, json and wxss required by WeChat applets will be generated. In addition, we will keep a copy of the RN source code translated by babel, all of whichJSXIt’s all done byReact.createElementIn the replacement and running phase, the source code that can be recognized by the JavaScript running environment of WeChat applets will be used.

Operation phase: Alita has embedded a mini-react, which will run the translated RN source code mentioned above in the operation phase. just like reach, it will recursively (after React Fiber, it is no longer the way to pass) process the component tree and call the componentrenderMethod, calling the component life cycle, calculatingcontextWait. In addition, React has an important reconciliation algorithm (virtual-dom) during its operation. mini-react also provides a simplified version of reconciliation to determine the destruction and reuse of components. After mini-react is executed, it will finally output a data structure describing the view, which provides all the data needed for WeChat applet rendering. The WeChat applet communicates with mini-react through the bridging module to obtain this data, and throughsetDataThe method is set to WeChat applet template to render the view.

Alita component library

In the project development, it is difficult to meet the needs only by using RN basic components and API. In the process of using Alita, we have accumulated many commonly used three-terminal components, includingScrollTabView,ViewPager,SegmentedControlWait, we are stripping and combing these components, and we will soon release Alita component library compatible with three terminals. This component library is also one of our priorities in the future. We will continuously optimize and expand new components.

In addition to the Alita component library, we also provide an extension method. Developers can easily extend our team’s basic UI component library to WeChat applets, and then run RN applications using these components on WeChat applets platform through Alita.

Conclusion

We will continue to expand Alita’s capabilities and support more end-to-end capabilities, such as Baidu applets and headline applets. We will continue to improve the developer experience, improve developer efficiency and help more developers.

We are also investigatingFlutterThe feasibility of the integration and transformation of this new cross-terminal scheme and WeChat applet.

We attach great importance to the feedback and suggestions of the open source community and will continue to draw nutrients from them to make Alita stronger.

Feedback

If you have any comments or suggestions, welcome toGithubCreate issue, thank you for your support and contribution.