Author: Jingdong ARES Multi-terminal Technical Team
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
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, including
JSXGrammar, React Lifecycle, etc
Alita supports most
JSXGrammar, 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:
JSXOf components that are only allowed to appear
renderIn the method
- Can’t pass
JSXFragments or returns
- 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:
componentWillUnmountThese three life cycles have corresponding triggering opportunities on WeChat applets, such as
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 through
fetchHowever, the WeChat applet itself does not exist
fetchMethods: This requires Alita to implement a WeChat applet based on the WeChat applet’s network API.
fetchMethods. Similarly, RN module is used
FlatListFor 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.
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.
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 will
JSXSyntax 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 which
JSXIt’s all done by
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 component
renderMethod, calling the component life cycle, calculating
contextWait. 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 through
setDataThe 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, including
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.
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 investigating
FlutterThe 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.
If you have any comments or suggestions, welcome toGithubCreate issue, thank you for your support and contribution.