The team behind Alibaba’s second-hand trading platform Xianyu explores why its SDK of choice beats other competitors
This article is part of Alibaba’s Utilizing Flutter series.
Behind the scenes of Alibaba’s second-hand trading platform Xianyu(闲鱼), a new-generation client architecture is at work supporting its unique business scenarios. Many following its technical development have wondered why this architecture uses the Flutter SDK over other cross-end solutions, generally focusing on the question of performance. In fact, while Flutter pages do show a performance advantage over Native pages in low-end models, the platform’s developers did not even consider performance optimization until after Flutter was already deployed.
For the Xianyu team, Flutter’s ease of implementation suited the goal of bringing product detail pages online as quickly as possible, with the implementation of functions as a priority. To this end, developers used Flutter not as a replacement for Native but as part of an enhanced cross-end solution.
Drawing on insights from a leading Xianyu developer, this article pits the Flutter-based solution against React Native in a competitive comparison of their advantages to illustrate why it makes such a powerful support structure for apps like Xianyu’s.
Setting the Stage for Competition
Flutter, Google’s open source SDK for high-quality native iOS and Android mobile interfaces, works with existing code to produce apps in record time. For testing, the Xianyu team compared it against a large-scale re-architecture of React Native (RN) designed for flexibility and better integration with native infrastructures in hybrid JavaScript/native apps.
Rather than generate its own apps for testing, the team reached out on Github to cross-end development expert Car Guo, who had previously developed two practical apps in Flutter and RN. As Github client apps designed to assist day-to-day management and maintenance of personal Github accounts, these offered a highly representative basis for comparison.
In terms of scenarios, the team applied four challenges for the two apps to compete in, as follow:
1. Successfully complete default login.
2. On the dynamic page, click the search button and search for the keyword “Java”; browse three pages at normal speed, then return to page three after loading a fourth page.
3. Click the “Trend” page tab and browse “Feeds” until reaching the bottom of the page. Click “Item” at the very end of the page. After entering “Item”, browse details and three pages of information, then return to the page for the My tab.
4. View Feeds in “My” to the end. Click the search button in the upper right corner, and search the keyword “C”. After browsing three pages, wait for the fourth page to load.
For testing, the team used iOS and Android devices. For the former, testing on cell phones (iOS end) depended on CPU and memory for monitoring, using the Core Animation of instruments to get the FPS; for the latter, CPU, memory, and FPS were obtained via adb-based Shell script.
The testing models for iOS were iPhone 5c 9.0.1 and iPhone 6S 10.3.2, a low-end and a mid-range model, respectively; the testing models for Android were the Xiaomi 2S 5.0.2 and Samsung S8 7.0, a low-end and high-end model, respectively.
Data Analysis: iOS
The following figures detail testing results for the iPhone 5c and iPhone 6S trials, respectively.
iPhone 5c 9.0.1
iPhone 6S 10.3.2
Findings
Tests indicate that Flutter’s performance on low-end and mid-range iOS models is better than RN’s. In terms of CPU usage, Flutter’s performance is slightly lower than RN’s on low-end models, but better on mid-range models.
Memory performance formed a key comparison, indicated by the red arrows in the above figures. Whereas Flutter’s starting memory on low-end models is approximately the same as RN’s, in mid-range models it exceeds RN’s by about 30M. (Analysis shows it is Dart VM memory.) This is a result of Flutter’s different memory strategies for low-end and mid-range models. In models with less available memory, Dart VM has less initial memory and allocates memory at runtime, which helps explain why low-end models show a greater loss in CPU consumption. In mid-range models, more VM memory is pre-allocated for processing, reducing CPU intervention and delivering a smoother experience.
In short, the Flutter team appears to have taken a more meticulous approach to design for different models in order to deliver a better user experience.
Data Analysis: Android
The following figures detail testing results for the Xiaomi 2S and Samsung S8 trials, respectively.
Xiaomi 2S 5.0.2
Samsung S8 7.0
Findings
In terms of CPU usage, Flutter outperformed RN on both the high-end and low-end models, with an especially clear advantage in the low-end Xiaomi 2S. For Android models, smoothness indicators were added to the original FPS parameter, and Flutter’s smoothness performance significantly exceeded RN’s.
Memory formed an especially notable criteria in Android models, with Flutter’s starting memory on the Xiaomi 2S exceeding RN’s by 40M. However, RN’s memory usage soared during tests, while Flutter’s remained relatively stable. This is due to the RN code’s need for memory tuning. For a given set of code, Flutter’s memory usage is quite similar across Android and iOS, while RN’s is only tuned on one of these two systems. Flutter thus outcompeted RN in the memory category.
Curiously, on the Samsung S8 model Flutter and RN have the same initial memory. The Xianyu team speculates that RN also pre-allocates some amount of memory on high-end Android models, but further research is needed to confirm this.
Crowning a Winner
Based on the above criteria, Flutter emerges as a clear winner in its contest with React Native in terms of both experience and test data. Because developer Car Guo has not invested in significant performance tuning for the testing apps, these offered a fairly objective basis for evaluations that indicate Flutter can offer a better user experience in cross-end development.
Following testing, questions remain as to why Flutter is able to offer such superior smoothness compared with other frameworks, how it optimizes rendering, and how the Dart VM Runtime works. In future articles, we will look in depth at how the Xianyu team is seeking and discovering the answers to these questions.
(The original article is written by Wang Huayin王华胤)
Alibaba Tech
First hand and in-depth information about Alibaba’s latest technology → Facebook: “Alibaba Tech”. Twitter: “AlibabaTech”.