Code reuse rate is 99%, Ctrip market insight platform Donut cross-terminal high-performance technology practice

About the Author

Brain, a senior software technology expert at Ctrip, focuses on front-end technology frameworks, cross-end technology solutions, front-end construction and engineering tools, and is committed to cutting-edge technology and architecture optimization.

1. Background

FlightAI (market insight platform) is a toB data product launched by Ctrip's air ticket big data team to empower the industry. FlightAI's user base mainly uses WeChat, but there is also demand for the use of mobile terminals and other enterprise office IM systems (such as enterprise WeChat, DingTalk, etc.). Since the big data team has a small number of front-end engineers and the existing technology stack is mainly web technology, there is a lack of mobile terminal development experience. Therefore, it is necessary to choose a technology that is mainly based on WeChat, has low R&D costs, and is cross-platform (WeChat applets, iOS, Android) applications to meet business needs and improve R&D efficiency.

FlightAI involves large-scale table operations and displays, big data charting, and large data index presentation, which requires high query and display rendering performance. In addition, it is also necessary to implement business functions, user login and registration, account management, and system integration in a multi-dimensional product matrix such as WeChat official accounts, web systems, applets, and mobile terminals to form a three-dimensional product service to improve user experience and operational efficiency.

1.1 Difficulties and Challenges

1.1.1 Main Difficulties

a. Complexity of cross-platform development:

• Although some frameworks such as React Native, Flutter, and Weex are isomorphic to the architectures of iOS and Android, they still face the problem of technology stack diversity in independently completing the entire mobile development process and infrastructure construction, especially in the cross-end architecture, which requires priority support for mini-programs.
• You need to master certificate management, script command calling, legal and regulatory prompts and constraints differences, real machine and simulator development, debugging, building, and publishing technologies for different platforms (iOS, Android, WeChat applets).
• Cross-platform compatibility issues, such as style compatibility and performance issues encountered in calendar optimization, require a deep understanding of the differences and limitations of each platform.
• There are many concepts of tokens, certifications, and legal and regulatory restrictions on different platforms and processes, which are difficult to distinguish.
• The compatibility, lifecycle management, permission system, and SDK of UI components on each platform are slightly different. Once a bug occurs, it is difficult to identify these differences.

b. Multiple-terminal login state is connected:

• The login state synchronization problem between different platforms needs to be solved to ensure that users have a consistent experience on different devices and platforms.
• Different terminals support various login methods, and both homogeneity and heterogeneity need to be addressed. For example, the APP terminal needs to support one-click login with the local phone number, account login, mini-program login, WeChat login, Apple login, etc., to support the review of various platforms.
• There are many types of tokens, and they are complex, each with different uses, involving logic such as code exchange between the front-end and the server and token verification.

c. Big data list rendering support:

• The dual-thread mechanism of mini programs makes it difficult to optimize the rendering performance of large data lists involving interactions.
• Under the technical architecture of the mini program, the official maximum supported DOM number is 16,000. Text nodes are also counted in the total number of nodes, which can easily exceed the DOM number limit and cause a "Dom limit exceeded" error.

1.1.2 Challenges of new technology platforms

a. Functional coverage:

• Although the official claim is that it spans multiple terminals, are the functional coverage and API coverage sufficient? Is the access complicated? Can it meet current and future needs?

b. Infrastructure:

• Are R&D tools, testing tools, deployment tools, and operation and maintenance tools mature? How can we quickly find support and solutions when problems arise?

c. Research and development of ecological compatibility:

• In addition to the challenges faced by large cross-end technology frameworks, implementation will face more challenges in small technology selection, such as component systems, chart libraries, support for other platforms, and compatibility issues.

1.2 Technology Selection

1.2.1 Business Requirements and Current Situation

a. Small team size, multi-terminal requirements and high R&D efficiency requirements:

• Small R&D team, whose existing technical skills are mainly JS technology stack, lacks mobile development experience, and must control training costs and R&D costs;
• Considering the integration difficulty and industry trends, analyzing functional requirements and performance requirements, etc., FlightAI users have strong demand for mobile use, which cannot be met by simply developing mini-programs;
• You need to choose a cross-platform framework with low technical complexity, low R&D cost, and simple technology stack. Donut technology meets the requirements of cross-terminal, high performance, and low cost, and it has official support from Tencent.

b. Business requirements:

• Establish an independent account system, independent domain name and brand, and require systematic operation with WeChat public accounts and web systems to form a product matrix;
• WeChat mini programs require high priority support in terms of both functionality and performance;

c. High performance requirements:

• Donut has excellent performance in terms of mini-program support and app performance. The underlying layer of the app is based on Flutter, using the same set of containers as WeChat mini-programs, and has close to native rendering performance;
• FlightAI has the need for real-time rendering of large amounts of data, which places high demands on rendering performance; this is consistent with the company's framework plan to support the use of Flutter to improve rendering performance.

1.2.2 Why choose Donut technology?

Since WeChat Mini Programs are the main usage scenario for the user group, multi-terminal frameworks that cannot support Mini Programs, such as React Native and Flutter, cannot be used. As for technical frameworks that support both Mini Programs and mobile terminals, the more popular ones on the market are Taro and Uni-App, but there are the following concerns:

• After using this type of framework, function updates are completely dependent on the framework, and some functions in WeChat mini-programs may not be supported;
• After using this type of framework, the code undergoes secondary conversion, and the performance may not be as good as native WXML. In addition, the conversion logic will introduce additional code and performance concerns.
• This type of framework generally has a custom DSL, which has a certain learning cost. Whether the documentation is sound and whether the community support is complete will directly affect the efficiency of configuration and custom functions;
• The advantages of this type of framework are mostly cross-terminal mini-programs. In fact, there are not many cases of online APPs, and big and small pitfalls are inevitable. For example, uniapp's nvue native development has limitations, especially in terms of style.
• Whether the full life cycle integration and management capabilities across multi-terminal application development are strong, including development, testing, construction, release, operation and maintenance, legal and regulatory reminders and interpretation, token management, etc.;

Donut is a container officially launched by Tencent that is the same source as the mini-program. It is superior to other derivative frameworks in terms of functionality and performance. It is based on Flutter at the bottom of the App, and is close to native rendering performance. Donut uses the mini-program DSL as the development language, which allows seamless switching and no secondary conversion costs. Anyone who can develop a mini-program can write a Donut APP. Tencent has fully integrated R&D tools, testing tools, deployment tools, and operation and maintenance tools, covering almost all the problems that a small team may encounter. The official documentation provides screenshots for each step, and the reading experience is good. It is summarized as follows:

a. High functional coverage

Commonly used APIs need to be adapted (8 in total) , and support is selected based on usage. Donut officially provides a large number of functional APIs. The official investment can also be seen from the functional support, ease of use, and architectural isomorphism with the App mini-programs.

Summary of JSAPI and component support, covering 6 major aspects

Component part : view components, forms, navigation, media, maps, canvas, development capabilities, and native components are all well supported;

API partial support : There are about 507 APIs in total; 371 are supported, accounting for about 73%. For some partially supported or unsupported ones, the official provides some other alternatives; (2024-03 statistics)

SDK part : Basic SDK and extended SDK have good support; this part is Native function, check it as needed, otherwise it will not be included in the package, and package it as needed to reduce the package size;

NativePlugin : supports Native custom extensions. This part is a one-time job and is generally not used unless there is a strong need for customization.

Cloud support : cloud development and cloud hosting, Donut gateway protection;

Buried point monitoring : heat map, playback function support is complete, support all buried points;

b. The infrastructure is relatively complete

The Donut platform covers various needs throughout the entire product development cycle, including development, deployment, and product experience analysis. Tencent has fully integrated R&D tools, testing tools, deployment tools, and operation and maintenance tools. The infrastructure is relatively complete and supports the entire production and research process, which can greatly improve R&D efficiency, especially for teams that have no mobile R&D experience. It plays a guiding and advisory role.

• Multi-terminal framework - supports one-time code writing and multi-terminal compilation using the mini-program native syntax to achieve multi-terminal development.
• Multi-terminal identity management - with just a few lines of code, quickly implement identity authentication and user management for apps and mini-programs.
• Security Gateway - Provides weak network acceleration, anti-crawling and anti-swiping, traffic management and other capabilities to ensure safe, efficient and stable business operations in all aspects.
• Product experience analysis - gain insights into product problems from the perspective of real users, find deficiencies in product experience, and improve user retention and conversion. It has the following functions:
• Zero code, full embedding
  No development is required, just one-click access, all elements are automatically embedded, and you can quickly start mini program data analysis.
• Restore the user operation site
  Innovative visual logs & heat maps restore the user's actual operation scene and provide clear problem analysis.
• Visual interactive analysis
  There is no need to write SQL throughout the process. You can complete the analysis process by simply clicking on the interaction on the simulator.
• One-click intelligent analysis
  No data analysis background is required. Intelligent analysis based on business goals can be performed to find user leakage points and improve conversion rates.

c. Strong R&D ecological compatibility

• UI component system

When selecting a UI component system, should I use TDesign, WeUI, Ant Design for Mobile, NutUI, Vant, or Material-UI?

The main considerations are the maturity, compatibility, and function of the components. TDesign is a component library officially produced by Tencent, while WeUI focuses on providing a style library. Considering the community's practical experience, TDesign was finally chosen. It has relatively rich components, a complete range of commonly used components, and is in line with WeChat design specifications. It has good compatibility with Donut APP, and reusing components can save a lot of development work.

• Chart library selection

Should I use echart or g2 mobile chart library, or choose wx-chart, ucharts, D3, antV, Threejs and other chart libraries? The following aspects were considered: Code standard: Some cases on the official website of EChart and D3 still use the syntax of ES5, and Antd follows the new syntax standard of ES6. Flexibility: ECharts＜G2＜D3; Difficulty of use: Echart≈G2PLot＜G2＜D3; Scenario: Threejs is recommended for three-dimensional graphs, and ECharts or G2, G2Plot can be used for two-dimensional graphs; Considering that the chart type of FlightAI is a regular graphic, and the PC version is also selected as Echart, Echart performs well in terms of mini-program integration and compatibility, but Echart is not compatible with the Donut system in terms of resolution processing. However, after writing an adaptation layer to solve this problem, it is very smooth to use, so Echart was finally selected.

• Applet Compatibility

Research on solutions for converting mini programs to other mini programs or web programs, such as mini programs converted from morjs, and other cross-terminal technologies such as Taro to Donut. Are they feasible?

In theory, Donut provides a container for running mini-programs. Other cross-end or conversion technologies should be able to run as long as the final product conforms to the WeChat mini-program specifications. However, the conversion will inevitably lead to loss of functionality and performance, and Donut conditional compilation and other syntax require special processing. Generally, the conversion code will bring additional processing logic and increase the package size. Although there are side effects, Donut's own expansion capabilities are still very strong. After all, it provides a mini-program container consistent with WeChat.

1.3 Introduction to Donut

Donut platform is a technology system produced by Tencent that realizes cross-terminal (Mini Program, IOS, Andord) based on mini programs, covering various needs of the entire product development cycle from development, deployment, to product experience analysis. Developers can focus on code logic, unify the complex development and construction process, development and operating environment, etc., effectively reduce the technical threshold and R&D cost of multi-terminal application development, and improve development efficiency and development experience. It includes 4 major features: multi-terminal framework, multi-terminal identity management, security gateway, and product experience analysis.

1.3.1 Donut system module diagram:

It is mainly divided into client and cloud functions. The client is mainly responsible for the annotated containers on the end side, processing the mini-program basic library, mini-program SDK and other infrastructure. The cloud side mainly handles various management and review functions. The processes are integrated on the WeChat Open Platform, WeChat Developer Platform, WeChat Public Platform, and Donut Management Platform.

1.3.2 Donut workflow

To put it simply, WeChat abstracts a simplified version of the WeChat APP as a container. The underlying layer is rendered based on Flutter, taking over the capabilities of the mini-programs and using WeChat developer tools to provide R&D support. In theory, any WeChat mini-program can run on this platform.

1.3.3 Who is Donut Technology Suitable for?

a. Individuals or enterprises that conduct business based on the Mini Program ecosystem;

b. Projects that require cross-terminal support, high performance, and high R&D efficiency;

c. Already have a mini program and want to expand to mobile projects;

d. Projects that wish to simplify or standardize development and operation processes and take advantage of the full software development lifecycle integration capabilities provided by WeChat.

2. How FlightAI built a cross-terminal mobile application Donut-APP based on mini programs

First, register the mini program on the WeChat public platform (mp.weixin.qq.com). After completing the registration, you can simultaneously complete the information and develop. Download the WeChat developer tools and refer to the development documents for development and debugging. To become a Donut cross-terminal R&D personnel, you need to know the following information:

2.1 Multi-terminal application development: Development account preparation

2.2 Understanding Account Relationships

2.3 Multi-terminal application development: development resource preparation

2.4 Enable multi-terminal application mode

a. Create or upgrade the applet to a multi-terminal project

b. Donut multi-terminal project structure

The structure is consistent with the mini program project, except that there are some configuration files across multiple terminal frameworks. The main function of app.miniapp.json is to maintain the binding relationship between multiple terminal applications and mini programs, configure the App mini program login page address, authorization page, etc.

project.miniapp.json is mainly used to configure native plug-ins, which are mostly related to native interaction; project.config.json is the configuration file related to the mini program.

2.5 Understanding Conditional Compilation

Donut supports writing platform-specific code in a conditional compilation manner. For example, some components are only supported by WeChat, and some business requirements are only displayed on WeChat. In this case, conditional compilation is required to achieve different requirements, and different code methods are used on the app and the mini-program. Generally, this type of code accounts for a small proportion. In the FlightAI project, I implemented the function of automatically counting conditional compilation code, which can be reported statistically or run on a single machine to understand the project status.

2.6 Support for multiple login methods - multi-terminal identity management

a. FlightAI login architecture design

Donut supports multiple login methods, which is sufficient for general projects, and has good integrated management in the background, which is officially called multi-terminal identity management. FlightAI's scenarios are more complicated. In addition to the 5 login methods provided by Donut, it also supports a total of 10 login methods such as password login, giving customers the greatest convenience and choice; although the supported methods are diverse, the underlying verification, authentication, authorization and other interfaces have been unified.

b. Unified identity recognition for mini programs and apps

The token of the mini program is exchanged with the code2Session interface, and the token of the App is exchanged with the code2Verifyinfo interface. Each interface has a supporting API, which is relatively complex and should not be confused. It is best to connect a complete set separately and then connect to another set.

2.7 Large List Rendering

Under the dual-threaded architecture of webview, the official maximum number of Doms supported by the Mini Program is 16,000. Text nodes are also counted in the total number of nodes, which can easily exceed the Dom limit, resulting in Dom limit exceeded. Please check if there's any mistake you've made.

Whether it is a simulator or a real device, a mini program or a Donut APP, in the view-all page of the FlightAI scenario, after testing, 442 rendered items are the critical point. If more than 442 items are rendered, a white screen will appear. Under this data structure, the number of Doms will reach the critical point, and it takes 5646ms to render 442 items on the IOS simulator. This also indirectly confirms that the Dom number limit is consistent on each end and each tool.

Official Recommendation Standard

The official recommendation (which is also the scoring standard) is that a single page should not have more than 1,000 nodes, no more than 30 levels of nesting, no more than 60 child nodes, and a page depth of no more than 10. However, pages with more complex functions can easily exceed the limit. So how do you overcome this problem?

Long list rendering characteristics

1) The list data is large, and the first setData takes a long time. The dual-thread model makes the interactive performance a bottleneck;

2) There are many DOM nodes in the list rendered at one time, and each setData needs to create a new virtual tree and perform a diff operation with the old tree, which is time-consuming;

3) The total number of DOM nodes in the rendered list is large, which occupies a high amount of memory, increasing the probability that the page will be recycled by the system.

Optimization ideas

Either completely change the dual-threaded underlying architecture, or optimize the data and status involved in rendering through some means, and only render the data displayed on the screen. The basic implementation is to listen to the scroll event and recalculate the data that needs to be rendered. Leave an empty div placeholder element for the data that does not need to be rendered. Here are two solutions:

a. WeChat officially provides a recycle-view solution, a virtual list solution;

During the scrolling process, when re-rendering the data, the height of the div placeholder elements before and after the current data needs to be set, and this also means within the same rendering cycle. Page rendering is triggered by setData, and the list data and div placeholder height are setData in two components. In order to put these two setData in the same rendering cycle, a hack method is used, so the batch attribute of recycle-view is defined as batch=＂{{batchSetRecycleData}}＂.

b. WeChat officially developed a skyline rendering engine to improve rendering speed.

The skyline rendering engine uses a more streamlined and efficient rendering pipeline and brings many enhanced features, giving Skyline a performance experience closer to native rendering.

After using skyline, there will be no limit on the number of DOMs; and an obvious comparison is that after using skyline, fast sliding of long lists will not be stuck, while fast sliding of the home page will be stuck if skyline is not enabled.

Note that the list layout container only supports being a direct child node or a component direct child node in the scroll-view custom mode. The scroll-view needs to set the custom mode type="custom" and the list-view needs to be a direct child node of the scroll-view.

WebView's JS logic, DOM tree creation, CSS parsing, style calculation, Layout, and Paint (Composite) all occur on the same thread. Executing too much JS logic on WebView may block rendering and cause interface freezes.

Skyline creates a rendering thread to handle rendering tasks such as Layout, Paint, and Composite, and demarcates an independent context in AppService to run the JS logic, DOM tree creation, and other logic previously undertaken by WebView. The performance has been significantly improved after the architecture has been deeply optimized.

Skyline long list official documentation

Performance comparison

Official example: From the online data of Mini Program Assistant, we can see that Skyline’s first screen time is 66% faster than WebView, and the lower the performance of the phone, the more obvious the difference.

In addition, I tried to calculate the number of Doms and Dom levels of the Mini Program by myself, and did statistics or optimization. I found that the querySeletorAll API could not use wildcards. In addition, Shadow-Dom was involved, and the calculation became very troublesome. I verified with WeChat officials that the maximum size of Dom is 16,000. This is a limitation at the compiler level and cannot be relaxed. After communicating with WeChat officials, they found that they can provide an API for calculating the number of Doms of Mini Programs. It is not available yet, but it will be available in the future.

2.8 Implement Push message push

Some thoughts and research on FlightAI's access to TPNS or the company's Push system; Tencent Cloud provides TPNS, but the cost of this push access is relatively high and it has been discontinued; the charging standard is approximately 800*DAU/10000, 8 cents/message, charged by user.

Donut provides a new version of push service based on IM, which will be supported from August 2024. The push function is implemented by configuring plug-ins and certificates, and supports online and offline push. Each manufacturer of IOS and Android needs to configure it separately, which is caused by different specifications of manufacturers.

The charging rules for the new version vary according to the location of the data center and different packages. The backend needs to apply for the corresponding certificate AppKey and AppID according to each manufacturer, and formulate a push strategy based on demand.

Considering the access cost, you only need to configure PluginId on the client. The configuration example is as follows:

2.9 Officially build APK and IPA

There is a distinction between temporary signatures and formal signatures for building mobile apps. Temporary signatures are provided directly by Donut officials, and formal signature certificates require R&D personnel to register and upload them according to the target platform. Note that the signature file has requirements for the directory and must be placed in the project. The keychain of IOS must be exactly the same as the name in the configuration.

2.10 Internal test distribution and submission for review

Select the official version in the developer tools and click "Build" - "Upload Resource Package" to upload the development version of the resource package to the Donut resource package management platform. Then follow the R&D process to decide on the test version and the online version.

2.11 Complete the privacy agreements, legal terms, authorization pop-ups and other requirements of each platform and release the APP

It should be noted that the requirements of major electronic markets are different. In order to be listed, it is necessary to meet the various specifications of each platform, otherwise the review will not pass. In particular, when it comes to legal terms, the legal department needs to be involved, which usually takes a very long time, so you must be prepared.

2.12 What pitfalls did you encounter?

• Problems caused by some certificates
  During the infrastructure construction, the mini program and Donut cross-terminal infrastructure were completed, including environment construction, system configuration, development, testing and release process, technical framework construction, architecture design model, development pipeline, etc. For example, the certificate location is wrong, the certificate information does not match, the domain and link information of the certificate application are inconsistent, and some strange errors may be reported during the build, and the build cannot be passed. The R&D information prompts in this area are very unclear, but it will block the R&D process. Official optimization has been suggested;
  
• When building products, although the functions increase and the business logic becomes more and more complex, the package size will grow normally. However, if there is a need to customize the resource package management, the package size upload limit will be encountered, so it is necessary to split the package. For example, our nephle supports a maximum package of 30M, and the problem of block upload needs to be solved. In addition, if the ability of automatic download and installation on iOS is to be realized, the template address and the package address need to be placed in the same directory, otherwise the pit will be deep and a lot of energy and time will be wasted. In addition, for real machine debugging and building, the direct data cable is very important, and the multi-functional data cable with conversion is likely to cause many unexpected building problems;
  
• Function development and performance optimization: chart function development, calendar function development and performance optimization. The official calendar component of TDesign has performance issues. The official format hook has prominent performance issues when traversing multiple years of dates. T-calendar does not support virtual lists, so the performance is not ideal. The Hash algorithm is used to optimize it by nearly 400 times, improving the performance of the calendar function. In addition, TDesign and Donut are different teams. When raising an issue, you must find the right team, otherwise it may not be accepted.
  
• When will the mini program registration, domain name registration, WeChat authentication, user notification, terms of service, privacy agreement, software trademark be launched? What are the pitfalls?
  Legal review and various certifications require a lot of corporate entity information. Prepare and submit as early as possible and follow the documents completely, otherwise it will be sent back for rewriting. In addition, the review cycle is uncontrollable and should be started as early as possible. Privacy pop-ups and authorization pop-ups must use templates or native development. Other methods cannot be used because the APP cannot load and run code before authorization. Please read the relevant chapters carefully;
  
• Token Management
  
  There is one token for testing and one for production, with different configurations. Android and IOS platforms manage one token each. In addition, mobileprovision must include Doman, and the information in Donut, development tools, and APP must be consistent.
  

III. Achievements and Experience

3.1 Technological innovation and efficiency improvement, code reuse rate 99%

• Code reuse rate: 99% code reuse rate was achieved. The code for specific platforms is non-reusable code, and the automatic statistics function was implemented by ourselves.
• Successfully developed a cross-platform high-performance APP: Successfully developed a high-performance cross-terminal mobile application based on Flutter, whose business code is based on the mini-program and whose underlying framework is the same as WeChat, ensuring consistency and high performance on iOS, Android and WeChat mini-programs, and exploring new cross-terminal technical solutions for the company; built an automated build and continuous integration (CI/CD) pipeline for iOS and Android applications, improving development and release efficiency;
• Adopting the new Skyline rendering engine, the first screen time is 66% faster than WebView. More importantly, Skyline has no limit on the number of Doms, which is very important for developing large projects.
• One code for multiple terminals, real machine effect across multiple terminals;
  

3.2 Create product matrix and user experience

In order to improve the application scope and market competitiveness of Ctrip's market insight platform, we have created a comprehensive product usage matrix, achieving full coverage of mobile terminals, mini programs, existing web terminals, WeChat public accounts and API services. Through this multi-terminal coverage, we can better meet users' usage needs in different scenarios and improve the market competitiveness of our products.

In order to improve the user experience, we have opened up multiple devices and multiple types of login states, supporting users to log in seamlessly through different devices and channels. In addition to the 5 login methods provided by Donut, we also support a total of 10 login methods such as password login, giving customers the greatest convenience and choice.

In the market insight platform, we have implemented high-performance mobile technology practices across multiple terminals based on Donut, ensuring the excellent performance of the product in various mobile scenarios.

Through these technological innovations and optimizations, we have not only expanded the application scope and market competitiveness of our products, but also significantly improved the user experience, providing users with a more convenient and efficient user experience.