The author of this article is Feizhu @Luhe, who is responsible for the architecture and large traffic business team of Feizhu Android. He has rich experience in client engineering system, performance optimization, stability management, audio and video, mobile security and other directions.

The current campus recruitment of the 2022 class of Flying Pig Technology Department has begun, welcome to Go to Nuggets for detailed understanding.

Based on the breakthrough and exploration of Flutter technology in Feizhu in the past six months, this paper focuses on the construction of cross-end standard container, precipitation of component library, performance optimization experience, and new ideas of Flutter modification facing existing business.

I. The evolution of Feizhu client architecture

The development course

Client architecture 1.0 In 2013, with the launch of Alibaba All in Mobile, Alitravel also had an independent App. At the beginning, the business was relatively simple. The PC page was simply transformed into H5 running on the App side, which mainly focused on information display. The Native business undertook air ticket transaction, and the construction and release of the whole App was not systematic. All the distribution channel packages are compiled by pulling source code on a single Jenkis server, and are directly sent to the application market after testing and verification. There is no systematic development and construction platform, and a perfect grayscale mechanism is also lacking. At that time, Android mobile phone shanzhai was rampant, and mainstream manufacturers were struggling with various customized ROM, compatibility and adaptation problems. Therefore, we mainly focused on solving the stability problem and consolidating basic functions to support the stable online business. At this stage, Android and iOS are developed independently, and only the page jump protocol and event bus protocol remain consistent.

Client architecture 2.0 With the rapid growth of Alipay and Mobile into aircraft carrier-class applications and the improvement of wireless infrastructure, Feizhu also took a ride, supporting the rapid business iteration. We have connected the wireless RESEARCH and development collaboration platform on the end research and development framework, which effectively ensures the parallel development of multiple people. The business iteration can be delivered weekly at the earliest. At the same time, a sound grayscale publishing system has been basically established, with the Crash rate reduced from 5 per thousand to 2 per thousand. Other basic functions (network library/photo library /Push channel) have gradually returned from self-built schemes to relying on the basic capabilities of the medium platform, and the r&d efficiency has been greatly improved. However, limited by the update efficiency of application channels, the problem of slow coverage of new version upgrade has existed for a long time on Android, and the problem of low distribution efficiency has to be put on the agenda. Therefore, we began to invest in the transformation of related technologies:

  • Looking at Native itself, various dynamic technologies emerge one after another. Feizhu has also actively participated in the construction of dynamic update technology. Looking back, in non-aircraft carrier applications, dynamic release ability is mainly to fix bugs, and it is rare to see real business promotion. In order to further enhance the business’s demand for Native dynamics, Feizhu also co-built DX dynamic template container with Hand Tao. Through unified dynamic template DSL, a complete platform for building and template management warehouse has been established, which has been widely used in business, but is limited to simple business logic.
  • At the front end, H5 began to undertake a large number of businesses because of its high development efficiency and complete dynamic capability. We set up the Cross-stack virtual team early on to optimize H5 performance with offline packages, preloading, prerendering, and new SSR techniques. The front end students of Flying Pig also actively participated in Weex business landing. At that time, the core main link of international air tickets was also undertaken by Weex, realizing close to native experience.

Challenges and new opportunities

With the iteration of business requirements, App becomes more and more bloated. Technological transformation not only improves r&d efficiency and performance experience, but also increases the complexity of maintenance. The logic of travel business domain is very complex, and for some large requirements, repeated focus is often required in demand review, but there are still online problems caused by misunderstanding between the development and understanding of both ends in actual delivery. In our impression, there have been several online faults caused by missed testing of air ticket transaction links. The increased complexity of the technical side is also prone to errors. Once H5 offline package was not properly protected on The Android terminal, leading to a large number of online customer complaints. After more than 24 hours of investigation, the problem was finally located. It is also difficult to evaluate the impact surface of many base line modifications, bringing new challenges to stability. From the current technical solutions, because the specific implementation of the two ends depends on the original capabilities, the difference in business performance caused by the difference of the system platform layer, to a large extent, needs to be solved by the lower-level technical solutions.

Self render with Flutter

Since rendering technology is not a new concept, from long ago QT to now Flutter, its advantage is that it has very good cross-end capability and can solve the long tail problem. Compared with the native rendering scheme, WebView has many fragmentation problems on Android, which brings great difficulty to front-end adaptation. We use the built-in U4 with a package size of 12MB to solve the adaptation problem of WebView on Android. In terms of Native business, as mentioned before, due to the difference in communication and understanding, the delivery difference is not sustainable.Flutter has more than 2 million developers worldwide and 500,000 monthly users. Flutter is the second fastest growing open source project in the world, according to GitHub. Google Play has published more than 110,000 APPLICATIONS for Flutter. Most of the major factories in China use Flutter. Many BU in the group also actively participate in the ecological construction. Compared with QT, the same self-rendering technology, it has great advantages in the development experience and ecological construction, and therefore has gained many developers. Compared with other technological solutions, Flutter performs well except for policy reasons that it has abandoned dynamism.

Evolution direction of client architecture Flutter

In 2019, Feizhu began to test Flutter in the merchant version of EBK transformation project, which has benefited from both r&d efficiency and user experience. With the improvement of Flutter hybrid technology stack, we decided to conduct special modification of Flutter at the C-end of Flying Pig in June 2020, hoping to promote the upgrade of Technology architecture of Flying Pig, complete the evolution of client technology system to big front-end technology system, and establish a unified mobile terminal research and development mode. Feel the maximum potency of the Flutter. Specific to several core projects, including cross-end standard containers, RESEARCH and development engineering systems, componentized construction, automation testing field to seek breakthroughs, and precipitation of best practices. By introducing the Flutter technology, the upper business development can seamlessly connect Android and iOS. The Flutter container in the middle is very thin. The platform difference docking is mainly realized through the Flutter SDK to solve the consistency problem of Native experience and improve maintainability. As stated in the official description, Flutter is a UI Tool Kit, originally positioned to serve new App development. In practice, many functions of Flutter cannot meet the existing business development requirements. The group’s infrastructure construction mainly focuses on improving the development of Flutter hybrid technology stack, high availability monitoring and warning, research and development support platform, as well as the core performance optimization construction. Feizhu mainly focuses on the landing of the business level and making good use of the new technology capabilities of Flutter.

Two, flying pig Flutter technology precipitation

After six months of precipitation, we have made great breakthroughs in relevant key fields. We hope to have in-depth exchanges with you and share different practical experience of Flutter.

1. Web on Flutter

background

UC WebView is built into Android, which basically solves the problem of WebView fragmentation and ADAPTS to sudden reduction of pressure. However, in the page development of the 2020 Double 11 venue, there are still some low-level UI display defects, mainly in the font display (the problems exposed above have been solved by UC WebView 4.0 recently). Although these problems are not serious, they relatively affect the user experience and drag down our pursuit of quality. Weex 1.0, on the other hand, relies on native components, making rendering consistency at both ends very difficult to solve, and RN, which implements similar principles, faces similar challenges. With the rise of Flutter technology, front-end students are exploring the possibility of Web on Flutter. Compared with Weex, it is Web on Native. With the underlying rendering technology replaced with Flutter, there are new opportunities for performance where consistent performance can be better addressed.

Technology selection and implementation

  • Solution 1: JS encapsulates an interface close to Widget API to realize the dynamic capability of Flutter. This solution is out of the front-end ecosystem.
  • Solution 2: Connecting the Web to the Widget provides high ROI. After the mapping, the performance of Flutter is basically close to that of Flutter native, and the performance of Flutter has a high imagination.
  • Solution 3: The Web connects with RenderObject, and the layout related logic needs to be written by ourselves. The performance is not as high as expected. There is a certain cost for modifying the video and map components, and a certain cost for upgrading the Flutter version.
  • Solution 4: rewrite the Framework in C++, abandon Dart Rumtime, and the development cost is very high.

Flugy is developed by Feizhu and supports the front-end cross-end standard subset. At present, it is also under construction with other teams at the technical level. From the architecture diagram, Flugy is a Widget Plugin that can connect with the Flutter ecosystem. The main code is developed with Dart and connected with the Flutter Widget (no custom engine is required). From the front-end perspective, Flugy is a simplified WebView. The H5 can run without modification. We recently learned that Autonavi has developed a version of Flutter map, which is also very convenient to access Flugy as an extension capability.CreateElement; AppendChildren; removeChildren; replaceChildren; insertBefore;

Flugy standard container key breakthrough

Based on the previous architectural design, the core thing the container has to do is to connect the Web and Flutter. Although the core development of Flutter comes from Chrome maintainers, it is more native in design philosophy. Front-end development only needs to set the desired result through attribute assignment, and does not need to use specific components to achieve it. WebView digests all this logic, while Native development needs to pay attention to more details, component encapsulation and organization relations, which is also the reason why the performance of Native pages is higher, but the development efficiency is not as good as front-end.

Back to the standard container project, Flugy container is needed to achieve the logic of the layout and style of the page handled by WebView. The difference with WebView is that we are docking with a subset of W3C and have no historical baggage. Several typical attribute mapping challenges are listed here. Examples include Overflow: display and Position.

  • The implementation of the Position property:
    • Typically, native development starts with a large structure for the entire page and then breaks down into sub-modules. On Web on Flutter, JS creates the DOM during runtime and streams rendering instructions to the container side. This is a real-time parsing process. Widget objects are built during the parsing process. However, the positioning properties of the front end are very flexible and can deviate from the normal flow, which requires repeated modification of previously built Widget objects, which is a technical breakthrough.
    • A layer of abstraction is made for the element state to simplify the problem. First, when parsing and adding element A, when encountering the element with position as sticky/fixed/absolute, A copy of it A’ will be created at the same time when creating element A (the copy will be marked as escape element, That is, escape is true), and the A element remains in its parent container (no rendering), continuing the normal layout flow to ensure that the other sibling elements are correctly positioned. Its copy A’ will use its internal communication mechanism to find A higher parent container that can accept it, and then render in the target parent container according to the rules of the Web.
    • Thanks to the design of the Flutter stateless Widget and the effective internal communication mechanism of Flugy, every step of Flutter operation is controlled to a minimum range, and only local updates are performed instead of triggering updates of the whole tree, ensuring performance.
  • Many other properties of Flutter are implemented in a controllable complexity. Alignment standard is a delicate work, and it is easy to fail to meet the standard requirements due to inadequate understanding. The front end students are leading the single test of standard containers, and using XRay to align each standard container with H5 rendering performance.

The results show

  Flugy pure rendering performance Flugy complete business display
describe Direct loading (cache DOM/CSS instructions in JS Bundle execution process locally) cached instructions, image loading online request, page display straight out Loading the JS Bundle cached in the local, you can’t see the white screen, you can directly display the blue background image, update the data after loading the network, Tab switching and sliding are very smooth
The results show Video click to view >>> Video click to view >>>

2. Single project construction optimization

3. Component library construction

Multi-screen adaptation components

We do it ourselves1dpHow many pixels should take up on the device’s screen, rather than using a preset value. Set the calculated ratio to the project environment, so that the same visual effect can be achieved at a very low cost according to the actual resolution, during development will also save a lot of conversion unit trouble. We also recently supported the idea that the font size of Flutter should not be affected by system Settings. When UI consistency is fully supported, UI automation testing can also benefit from maintaining a single set of test code to run on multiple devices, reducing the cost of adaptation.

Open source COMMON UI components

We open source 11 UI components (The link address), are components that are more relevant to the business scenario, and several components that are popular in the community are listed above. Recently, the team has focused on developing Flugy, and will strengthen the maintenance and update of the component library later.

4. XRay automated test framework

The original intention of our automated testing framework was to solve the testability challenge caused by the diversity of end rendering technologies. Because the original testing framework is based on the original scheme, it can not meet the requirements of future testing. So we want to design automated testing solutions for the future. We take inspiration from manual test operations, locate elements based on image processing algorithms, manipulate elements through drive capabilities, and then verify the results through image processing algorithms. The whole link is zero intrusion, so it has very strong adaptability. It currently supports Native, WebView, Flutter, applets, dynamic templates and other technologies very well. It also supports Hongmun and FusionOS. In order to improve the efficiency of test code development, we developed plug-ins based on IntelliJ, which can be mastered by those who are familiar with Python. In 2020, recording and playback functions will be provided to facilitate the outsourcing of case writing.This is the flow chart of the whole test case editing and case execution. The most core part is element positioning, which uses the image structure recognition algorithm developed by us and the light reading OCR capability of Ali Dharma Academy. Android uses ADB for element driving technology. IOS uses Dwarf, a proprietary solution.Recognize_list is very simple to recognize_list with the hotel list and home page test execution, recognize_list is recognize_list with our own image algorithm, and the test code editor is very simple to recognize_list and then manipulate the specific items. In fact, in the XRay execution process, a structure similar to Dom Tree is generated based on the hotel list. In the operation process, it is not simple coordinate mapping, but corresponding to specific element modules, which improves the maintainability and the success rate of execution.In addition to the construction of XRay framework, equipment scheduling is also involved in the actual business usage scenarios. We do a simple transformation based on the mobile phone wall scheduling system to support automatic test equipment scheduling, and support deployment according to the system, brand and model dimensions. It is widely used in continuous delivery verification to ensure wireless quality. Currently, it is also working with the wireless test team to make intelligent Monkey (automatic inspection that has covered 80+ pages). Can I Use: in order to better support the container and front-end students research and development, to facilitate clear understanding of the standard, in the case of container layer ground support, front end provides CanIUse retrieval platform, checking their standards in support of each side of the container through the real machine automatically run a single test script do comparison test, the support of the container.

Optimization of Flutter performance

1. Impact of rounded corners on performance

 

2. Reduce repainting reasonably

3. Open the SurfaceView

  Note: The opening of SurfaceView significantly improves the performance of low-end mobile phones, but has little advantage on high-end mobile phones.

Fourth, business landing

  • At the beginning of 2020, Flypig Android launched Flutter for simple business related to airline tickets and hotels. Our first version of Flutter was 1.12, and its stability and performance met expectations. For this kind of simple pure presentation page, Flutter is very suitable. For example, the new demand for the flight details page can be developed by only one person.
  • After a simple business trial, the stability and performance of Flutter met expectations, and the sense of trust in Flutter was also established. Later, trials were conducted on complex businesses, and many basic functions were used, including the docking of video playback functions, laying a solid foundation for the comprehensive construction of Flutter in the future.

Results: In terms of performance, the loading time of low-end PC is better than that of iOS, frame rate is close to native, CPU load and memory consumption are close to native, and the overall stability is very good.

  • At the same time, we are also conducting a Web on Flutter service pilot. H5 code can run on Flutter basically without modification. We have a major performance improvement for the late March release, which will also be available on iOS.

V. Challenges and future planning

Recent update: Hummer Flutter 1.22 has been upgraded to version 9.7.2.105. On the POI details page, the average framerate has been increased from 53 to 56. Flutter 2.0 was released on March 4, with many highlights, including improved support for multiple engine instances and more friendly development for hybrid stack applications.