What technologies does Alibaba have in its Flutter system construction?

[[321430]]

2019 is undoubtedly a year of rapid development for Flutter technology. Every mobile developer is crazy about the features and concepts of Flutter, such as "fast development, expressive and flexible UI, and native performance". From super apps to standalone applications, from pure Flutter to hybrid stacks, developers are exploring and applying Flutter technology in different scenarios and are also facing various challenges.

Why Flutter

More and more businesses and teams within the group have begun to try the Flutter technology stack. From Xianyu leading the trend, to Taobao Special Edition, Hema, Youku, Fliggy and other BU businesses entering the market one after another, Flutter's business applications have gradually formed a trend within the group. So, what is the reason why more and more developers within the group choose to embrace the Flutter technology stack? What advantages of Flutter attract the group's native developers to develop and deliver businesses through Flutter?

From a technical point of view, I think the three core features of Flutter are most attractive to developers:

• Extremely high development and delivery efficiency, good development experience
• Excellent cross-terminal and multi-platform capabilities
• Strong UI expressiveness

Development efficiency

Based on the attributes of the group's e-commerce business, business response efficiency and the R&D efficiency behind it have always been the most important indicators. Under the premise of ensuring the experience, improving R&D efficiency as much as possible means higher productivity. Traditional Native business R&D requires separate investment on both iOS/Android terminals, with high R&D costs, large differences between terminals, and reliance on terminal-side releases. This is why the activity technology stack of the group's e-commerce business has always been relatively dependent on the front-end system. From H5 to Weex to mini programs, it is largely about pursuing R&D and delivery efficiency and flexibility.

Today, Flutter has solved the cross-end consistency problem very well. A set of code runs on both iOS and Android without any difference. The development experience is basically close to the front-end and supports Hot Reload on device. At the end of last year, Flutter launched the Hot UI capability in Android Studio that enables real-time preview and supports interaction through plug-ins, as well as the Layout Explorer visual layout, making Flutter's development efficiency basically the same as the front-end efficiency.

Across multiple terminals and platforms

At the current stage of e-commerce business development, it is no longer limited to mobile scenarios. More and more business needs have put forward higher requirements for cross-end and cross-platform. In the long run, DingTalk/Qianniu desktop application scenarios, and even business scenarios such as Tmall Genie and offline stores, require a multi-end solution with better performance consistency and lower adaptation cost than Web. At present, cross-end technical solutions mainly rely on browsers and front-end systems, but the sandbox properties of the browser itself, the low degree of integration with the system, and the poor performance on low-end devices have reduced R&D efficiency and user experience, and raised the delivery threshold of the business. It can be said that the cross-end and multi-platform solutions within the group are essentially missing.

Flutter is designed to support multi-platform development. Its bottom layer is based on the Skia cross-platform graphics engine, and it has built a complete set of platform-independent rendering and event processing systems. It has also customized the widget-based declarative + responsive programming paradigm in line with the Native development model. It has low dependence on system capabilities and has excellent cross-platform restoration. Supporting multiple platforms is also one of Flutter's strategic goals. In addition to iOS and Android, the official platforms supported are Mac, Windows and Web. Linux is also under development. Its technical characteristics also make it very cheap to port Flutter to the Linux based IoT platform. At the same time, Flutter is also the official application development framework of Fuschia, Google's next-generation operating system in the future. It can be said that Flutter already has all the conditions to become the next-generation cross-multi-terminal and multi-platform development model. It is a very feasible choice to establish a multi-terminal and multi-platform development system for the group around Flutter.

UI expressiveness

E-commerce business focuses on experience and interaction, especially for traffic refinement operation scenarios, where rich interactive gamification has become an important means of traffic activation. In terms of UI expressiveness, the front-end system has always had an advantage. Through the powerful animation capabilities of CSS3, developers can easily implement complex animation effects and interactive experiences. Based on Native UI, various animation special effects third-party libraries are required, and the development experience on both ends is inconsistent, the implementation is complex, and the delivery efficiency is low. Flutter solves this problem very well. From tween animations, animations based on physical properties, to relatively complex Hero animations between pages, parallax staggered animations and other special effects, Flutter can be implemented efficiently and at low cost across platforms. Here is an interactive demo based on Flutter that GSkinner announced at the Flutter Interact Conference at the end of last year for everyone to intuitively feel:

We can see that Flutter's powerful UI expressiveness can help developers develop extremely cool UIs quickly, efficiently and at a low cost. It is very suitable for various scenarios in the e-commerce field that focus on UI visual interaction, and helps businesses build expressive pages.

Current status of Flutter system construction

At present, multiple business units in the group have begun to try to apply the Flutter technology stack, covering multiple business scenarios from e-commerce details business, shopping guide channels, to feeds flow, gamification interaction and internationalization. The pain points of Flutter technology in the group's application are that the middle-end infrastructure of the R&D infrastructure is not perfect, the R&D support capabilities and data operation and maintenance capabilities have not been standardized, and the group's Flutter developer ecosystem has not been fully connected, and has not yet formed a joint force. These issues will be the focus of our future construction of the Flutter technology system at the group level.

On the other hand, from the perspective of industry trends, Flutter technology has become a technology construction direction that more and more industry partners have focused on. Companies such as ByteDance and Meituan have built their own Flutter engineering systems and served their respective business scenarios; Tencent has also tried applications based on Flutter on multiple apps and made useful explorations in the scenarios where Flutter rendering capabilities serve mini-programs. The investment and determination of industry partners in Flutter technology, on the one hand, make us more confident in the application prospects and community of Flutter technology, and on the other hand, make us feel the necessity and urgency of uniting all parties in the group to build a Flutter ecosystem.

Taobao Mobile’s attempts and reflections

Finally, let me briefly talk about our exploration and thinking on Flutter from 2018 to now. Taobao Mobile began to explore the application of Flutter rendering engine in mini-program scenarios in October 2018; in the second half of 2019, it began to build Flutter's basic capabilities and served the Taobao Special Edition business, and accumulated key technologies such as engine, image library, memory optimization and loading performance; at the same time, through the engine transformation of Flutter, Flutter 2D Canvas capabilities were encapsulated to support mini-program Canvas components and mini-game engines, serve 2D/2.5D gamification businesses, and land in business scenarios. In this process, we also accumulated solutions to memory problems and image problems, as well as comparisons and reflections on Flutter technology and Web technology, and achieved certain technical and business value.

Through these attempts, we have deepened our control and understanding of Flutter technology. In our view, the emergence of Flutter can be seen as the clarion call for the revival of the Native system. While maintaining the performance advantages of Native, Flutter brings excellent cross-end consistency, R&D efficiency close to the front end, and powerful UI expressiveness, bringing new possibilities for the group's business to use the Native technology stack.

From the perspective of business applications, the greatest value that Flutter currently brings is the improvement of R&D efficiency. Under the premise of complete infrastructure and native expansion capabilities, the efficiency of developing pure Dart business based on Flutter has increased by nearly 2 times compared with the efficiency of previous development on each end, and the demand response capability per unit time has also increased by nearly 2 times accordingly. It has been well verified in the development of Xianyu and special edition business. From the perspective of adaptation scenarios, Flutter is currently more suitable for carrying rich graphic content, such as details, feeds flow, user homepage and other conventional business development, as well as 2D/2.5D game scenes and rich dynamic business. Flutter can simultaneously meet the business scenarios that previously required iOS, Android and front-end technology stacks to be responsible for separately through a single-end technology stack, and can even use Dart to be responsible for part of the server-side business logic development through the end-cloud integrated development model, which can help business teams expand business boundaries while realizing a closed loop of front-end and back-end R&D capabilities.

The current limitations of Flutter are its dynamic capabilities and initial investment costs. The initial investment costs mainly refer to the costs of technology learning and team development model upgrades, which involve the choice of technology routes. We and each business team need to think and judge together, so we will not discuss it here; dynamic capabilities are the relative shortcomings of Flutter. At present, we can realize template-based component-level dynamic capabilities through Flutter template technology, but based on performance, auditing, and invasiveness to the native Flutter system, etc., it is not possible to directly realize UI + logic dynamic capabilities. Although there are no audit restrictions on the Flutter Web solution, it is limited by the differences between the browser DOM API and the widgets system. There are still serious performance bottlenecks and rendering differences. It can only be used as a backup solution for downgrading, and it cannot be used as the main implementation solution for dynamicization for the time being. The exploration of dynamicization in the future will also be a long-term game process. If we can solve the problem of Flutter's dynamicization later, then Flutter has a chance to become one of the core R&D models of the group's business.

In summary, we believe that the time is ripe to enter Flutter and work together to build the Flutter Group's mobile ecosystem, which is promising.

AliFlutter - Alibaba Group's Flutter system construction

In this context, the mobile technology team of the economy also focused on Flutter in the end-side architecture governance this year. The mobile technology team proposed the AliFlutter project from a strategic perspective, with a very clear goal:

• From the economic level, we will integrate the Flutter system construction, build Flutter's public technical infrastructure, formulate Flutter container, middleware and API standards, build Flutter R&D support and data operation and maintenance capabilities, and reuse key technologies;
• Cooperate with various BUs to build an economic Flutter technology community, accumulate and share the group's Flutter technology and business components, capabilities and solutions, serve the group's Flutter business, and jointly build the group's Flutter technology ecosystem;
• Build Flutter's external influence at the economic level, unite all BUs to face the outside world in a unified manner, and establish Alibaba's commanding position in Flutter technology in the industry.

It is our responsibility to "build the foundation, foster the community, and carry the banner" for the Flutter technology system of the economy.

The overall architecture of AliFlutter in the future is as follows:

The first step in building AliFlutter is to build the group's Flutter infrastructure, provide public containers and components, R&D support services and standardized R&D processes, provide a basic Flutter public R&D service capability for the group's Flutter business, and build a foundation and platform for technology co-construction and sharing.

In the second step, we need to serve Flutter business applications well, explore the intersection of business application models and Flutter technical features, and hone the technology in the process to form solutions and technical accumulation tailored to business characteristics, and truly activate the Flutter community co-construction atmosphere and ecology within the group.

The third step is to solve several core key issues of Flutter applications in the future: cross-end and interaction capabilities, business R&D efficiency and business delivery efficiency. By empowering the business through technology, Flutter will truly become the core R&D model of the group's mobile business.

Next, let’s talk in detail about the work done by AliFlutter at each stage and its future-oriented thinking.

Infrastructure construction

Since the launch of the AliFlutter project in October 2019, we have basically built a set of Flutter's public infrastructure, including artifacts and pub libraries, Flutter standard containers and API standards, and realized the automation of Flutter's build packaging, and defined standard engine customization workflows and business development workflows. At present, the infrastructure has the ability to support the group's Flutter business development and support on-demand customization of each BU.

Artifacts Repository

The product server is mainly used to cooperate with engine customization and accelerate the backend service of obtaining Engine intermediate products through Flutter commands, so as to unify the working environment of Flutter developers. Developers can point the address of the Flutter tool chain to obtain artifacts to this service by setting FLUTTER_STORAGE_BASE_URL. At the same time, customized acquisition of artifacts and intranet acceleration services can be realized through namespace.

Namespace is designed to distinguish engine products of different BUs. At the same time, a public namespace is provided to store public products to ensure customization and on-demand configuration of public capabilities. If the product address to be obtained does not exist on the backend storage, it will trigger an acquisition from the Flutter official image and cache it on the server.

Each BU can customize the engine as needed and upload it to its own namespace in the specified path format, so as to obtain the customized version of the engine intermediate product from the namespace.

pub warehouse

Similar to npm in the Node.js world, Flutter uses pub to manage third-party components and dependencies. Considering the requirements of ease of use and security, we also built a Flutter pub library in the intranet environment to manage public second-party components within the group.

The goal of this library is to become the group's pub publishing platform and manage all second-party and third-party pub packages within the group. Users can set PUB_HOSTED_URL to point to an internal address to obtain configuration and publish second-party pubs through the Flutter tool chain. Users can also access the pub library and query published pub components through the Web portal.

Containers, middleware, and APIs

For business access, the core issue to be solved at this stage is to provide a unified Flutter runtime container, as well as a series of group-standardized mobile middleware Flutter encapsulation and API capabilities, and provide group-standard plug-in extension methods for business parties to independently develop business functions.

Since most of the group's applications are based on hybrid stacks, we use FlutterBoost as the basis of the Flutter container hybrid stack, and provide unified hybrid stack routing and navigation capabilities in conjunction with the group's standard routing and navigation middleware. Businesses can quickly implement hybrid navigation capabilities of Flutter pages and Native pages through standard routing registration.

By connecting to the high-availability platform, the container provides standard monitoring capabilities such as initialization performance tracking and crash data reporting, laying a foundation for technical performance analysis and troubleshooting of Flutter services.

The group has accumulated a complete set of standard middleware systems on the mobile side, including a series of basic capabilities such as network libraries, image libraries, push messages, configuration distribution, data collection and monitoring, etc. Seamless use of mobile middleware capabilities in the Flutter system is a rigid demand for the business; at the same time, a series of standard APIs formed in the process of building the mini-program system have also largely realized the underlying capability abstraction of a complete mini-program operating environment, which is a very good supplement to the standardized access system capabilities of the Flutter system and the realization of platform-independent cross-end capabilities. We have worked with the Taobao middleware team and the mini-program team to encapsulate and standardize the basic middleware and mini-program API implementation on the Flutter side, and will also provide system support for Flutter middleware and API capabilities in the future.

Standardizing Flutter builds

Since the Flutter development system is relatively new and the construction pipeline is somewhat special compared to the traditional mobile construction process, the product construction configuration is complex, time-consuming and error-prone, which has brought great obstacles to the construction and release of Flutter business. Therefore, we also worked with the R&D support department to implement the Flutter scripted construction process in the form of a plug-in, supporting dual-end automatic whole package packaging and Flutter Module packaging.

Currently, the AliFlutter build process uses AliFlutter's Flutter warehouse and the group's internal pub warehouse by default. The engine products are also uniformly obtained from the artifacts warehouse according to the configuration, which better supports the automated build requirements of Flutter business.

Business Applications

After consolidating the foundation of Flutter Group co-construction, in the second step, we AliFlutter also did a lot of work in business applications. On the one hand, we continued to serve Taobao and group businesses through the engineering capabilities of native Flutter; on the other hand, we served the interactive business in mini-program scenarios and gamification scenarios through the Flutter Canvas project.

Taobao and Group Business Support

At present, Taobao Special Edition has completed the Flutter transformation of the details business and launched it online. The use of Flutter has reduced the manpower investment by half while the demand rhythm remains unchanged, which has played a significant role in alleviating the pressure of business research and development; at the same time, the overall performance and stability of the application are basically the same as Native. The subsequent special edition will continue to expand the scope of business transformation based on Flutter and precipitate business domain solutions based on Flutter.

Currently, Hema, ICBU, and Youku have also upgraded container access and adapted their business based on AliFlutter. Hema has implemented the Hema Town business based on Xianyu's Flutter game engine, ICBU has used Flutter on the main link-related pages, and Youku has implemented scenarios such as the member order page based on Flutter. At the same time, we are also exploring Flutter desktop solutions with DingTalk and Google.

Flutter Canvas

With the increasing number of interactive scenarios in e-commerce marketing and the continuous improvement of performance requirements, how to provide a high-performance and stable Canvas basic capability to serve rich interactive scenarios has become a key issue.

In the mini-program scenario, Canvas plays an important role as the main capability for carrying interactive games. However, due to the isolation design of app context and page context in the mini-program architecture, there is a communication bottleneck from app worker to page renderer, which cannot fully utilize the performance of web canvas. If there is a native version of canvas implementation, it can directly connect to app worker at the native layer, reduce communication costs, and fully utilize the performance of Canvas.

Flutter is based on Skia, and its performance and compatibility with complex heterogeneous mobile devices have been tested for a long time. Flutter's browser-based design implements a platform-independent rendering pipeline, and greatly simplifies the browser implementation, providing good reliability and performance. If this rendering pipeline can be used directly to provide Canvas capabilities to business containers, and provide standard APIs consistent with Web Canvas directly to mini-program and mini-game containers through binding, on the one hand, Flutter's underlying capabilities can be reused to provide rendering support for non-Dart environments, and on the other hand, Flutter's simplified and efficient rendering pipeline can be used to provide better rendering performance.

Currently, Flutter Canvas has been launched on Taobao Mobile and has been piloted in the sports banking business of the Mini Program. It has initially acquired the ability to carry the Canvas business of the Mini Program. Its performance on low-end Android devices has advantages and can serve as a useful supplement to the Web Canvas solution.

In the future, Flutter Canvas will take advantage of the cross-platform and high-performance features of the Flutter rendering pipeline, as well as Flutter's adaptation support for Vulkan and Metal, to achieve better adaptability and performance on mobile terminals; at the same time, it will continue to implement the 3D API to support future interactive business applications.

Future Construction

After taking root in the business, the third step is to keep close to the future construction goals of the Flutter system in Alibaba Group and continue to answer several key questions in the future construction path of Flutter. So first of all, what should be the construction goal of the Flutter system in Alibaba Group? Personally, I think: Flutter should become one of the core business R&D models of Alibaba Group across multiple terminals and platforms in the future.

So, how far are we from this goal? In my opinion, if we want to make Flutter the core R&D model of the business, we must solve the four core problems of cross-end capabilities, interaction capabilities, business R&D efficiency, and business delivery efficiency.

• From the perspective of cross-terminal capabilities, although Flutter has excellent cross-terminal capabilities and high restoration, when it comes to platform capabilities, it still needs to be implemented through extensions on each terminal, and has not yet formed standardized container and API encapsulation capabilities such as the mini-program system. So how can we better solve the containerization problem of Flutter so that the business does not perceive platform differences?
• From the perspective of interactive capabilities, how can Flutter make good use of its own interactive capabilities to provide a rich interactive experience comparable to the front-end while lowering the threshold for developing rich interactive features for Native, and truly attract Native developers to use Flutter technology to develop businesses?
• From the perspective of business R&D efficiency, although Flutter's Hot Reload/Hot UI mechanism has made the efficiency of developing Native pages catch up with the front-end, there is still much room for improvement in engineering decoupling. At present, it is not possible to efficiently support parallel development of multiple business teams. On the other hand, how to combine with the popular Serverless capabilities to realize the end-cloud integrated R&D model and realize a closed R&D loop for the business also requires practical testing.
• From the perspective of business delivery efficiency, Flutter is still a native solution, relying on terminal-side releases, with low delivery efficiency, and cannot well meet the needs of e-commerce system flexibility and effectiveness. So how to solve the problem of Flutter's dynamic nature and help businesses achieve rapid iteration?

Only by solving these problems can Flutter truly become the core R&D model of the group's mobile business and bring a leap forward in the group's business R&D. Let me talk about our thinking and exploration in these directions.

Improving cross-end capabilities: Flutter containerization

From an engineering perspective, although Flutter has basically achieved the minimum dependence on the host platform through Skia cross-platform graphics rendering and self-built event system, Flutter has not yet achieved a unified abstraction from the perspective of the application framework for platform-side capabilities, and there is no need for it to do so. This requires us to selectively encapsulate based on the demands and characteristics of the business. The mini-program API is a very good example. Currently, the Alibaba mini-program system provides more than 200 APIs, which encapsulate the mobile UI, multimedia, file cache, network, device capabilities, data security, and business-related capabilities, allowing business developers to call system capabilities on the mini-program side for APIs without having to worry about platform implementation.

Therefore, the next plan for the AliFlutter container is to provide a set of standardized API capabilities from the perspective of the engineering system to standardize and abstract the basic capabilities of the mobile terminal, so that the business can focus on the business as little as possible or even not care about platform differences; at the same time, with the help of standardized API capabilities, cross-terminal and multi-platform deployment can be achieved.

From the perspective of mobile terminal architecture, cross-platform solutions in different periods have a common demand for API capabilities. From H5 to Weex, and then to the later mini-programs, as well as container environments such as Flutter, multiple rounds of API duplication have been carried out, resulting in the lack of standardized definitions of API interfaces and the lack of unified management and control at the implementation layer. If the interface can be unified in the native implementation of the API, and then each container provides an interface for business use, it can better achieve closure, and realize unified scheduling, control and measurement of system resources across containers at the unified implementation layer.

Improving interactive capabilities: UI + game engine

As mentioned earlier, Flutter’s greatest value currently lies in the improvement of R&D efficiency, which is the starting point for attracting business teams to apply Flutter technology. However, relying solely on R&D efficiency is far from enough. After solving the current R&D pain points and improving R&D efficiency through various engineering means, how to convince the business to continue using the Flutter system for business development? What is the long-term value of Flutter? Personally, I think the starting point should be to break the boundary between UI and game engine through the generalization of game interaction capabilities, and use gamification to create a more expressive interactive experience, and create new business gameplay and value.

As we all know, traditional UI and game engine are two independent systems. In H5 applications, UI is often done through DOM or upper-level application framework, and game capabilities are realized through H5 game engine built on canvas. If there is a need for UI in game applications, the solution is generally to build a simple UI system and event system by yourself, and overlay UI in the game by self-drawing. The same is true for independent game engines. From a technical point of view, Flutter is more like a game engine built on the Skia graphics library. It builds up the UI system through fine-grained widget design; also thanks to such fine-grained design, we can also directly combine a complete game engine through widget capabilities, provide Game, Scene and Sprite animation widgets, and expand the corresponding elements and render objects, and share a set of event processing mechanisms, layering and rendering synthesis mechanisms with the UI system. Doing so is equivalent to breaking the boundary between the original H5 DOM UI and Canvas games, allowing the two systems to be perfectly integrated under the concept of widgets, and empowering the UI through the capabilities of the game engine to achieve more dynamic effects that were difficult to achieve at low cost in the previous UI system (such as a small Hema eating an order component in one bite, etc.). We believe that exploring this direction will further unleash the technical potential of Flutter, bring more business playability and creativity, liberate the imagination of products and designs, and create more value for the business.

Improving R&D efficiency: engineering decoupling and end-cloud integration

• Flutter project decoupling

The R&D efficiency of the front-end system largely comes from the decoupling between pages brought by the unified routing system based on URIs, and the cohesion brought by the standardization of Web APIs within the pages. However, the current Flutter R&D model still requires multiple business teams to work under the same project, and there is source code dependency between them. If Flutter technology is applied on a large scale across business teams in the future, it will inevitably slow down the R&D efficiency of the business.

From the perspective of engineering decoupling, the current AliFlutter container has basically achieved the decoupling of page development through hybrid stacks and standard routing capabilities. Future containerization construction will provide mini-program equivalent API capability encapsulation, and the business will be unaware of the platform, giving us the opportunity to decouple business development and achieve a development experience and efficiency close to mini-program development.

The ideal solution is that the business can create an independent Dart project from the business dimension, which only contains business-related pages and logic codes. Through Flutter's Hot UI development page, the project can be previewed locally and the API and system calls can be debugged through the Flutter Web-based capabilities provided by the IDE to complete the R&D work. A preview QR code can also be generated and scanned using a host application pre-installed with the AliFlutter SDK environment. The R&D and construction links are separated, and the cloud actively pulls the business warehouse code to participate in the whole package construction. In this way, a front-end R&D experience similar to the development of mini programs can be achieved, while decoupling and parallel release of R&D between businesses can be achieved, improving the delivery efficiency of the business.

• End-to-end cloud integration

Nowadays, the Serverless concept is increasingly valued and applied in business R&D. The Group has been exploring the new generation of end-cloud integrated R&D model in full swing over the past year. Combining lightweight container environment, multi-language support and unified API server programming, end-side students can easily use client languages ​​such as Java, JS, Swift and even Dart to develop server-side business capabilities, realize service orchestration, server-side FaaS business logic and API automatic generation, and achieve the unification of front-end and back-end engineering systems and the closed-loop effect of business R&D.

At present, Xianyu is at the forefront of the exploration of Dart FaaS cloud integration. Through the group's container specifications, the Dart function container is implemented, and the server is combined to abstract the BaaS layer (storage, message queues, etc.) for the domain services required by some businesses, and the front-end BFF (Backend for Frontend) capability layer is encapsulated, so that mobile developers can easily use Dart to encapsulate FaaS business logic and carry out mobile and server FaaS development at the same time, greatly improving business R&D efficiency. By moving the original end-side request interface, assembling data and converting it to ViewModel logic to the server, after field mapping and page layout, the mobile terminal can directly obtain the ViewModel and refresh the page. Through the BinderAction two-way interactive status data, the communication details are effectively shielded, improving development efficiency.

In addition to improving R&D and collaboration efficiency, cloud integration has also reshaped production relations, transforming end-side businesses from developers who only focus on end-side experience and logic to ones who are responsible for the overall business results; it also allows the server to focus more on the accumulation of domain services. Flutter's good cross-end features can shield end differentiation, and with Flutter's containerization transformation, it further simplifies the full-link R&D model of the business. In the future, how to precipitate a set of general end-side and server-side communication scheduling frameworks that can serve the group's business R&D under the FaaS model, so that the group's Flutter developers and businesses can share the benefits of Serverless technology and cloud integration efficiency improvement, is a new problem that we need to explore and define together.

Improving delivery efficiency: Flutter dynamics

Achieving dynamicization is an important way to improve delivery efficiency. For the strong operation and timeliness of e-commerce, dynamicization is almost a necessary demand, but from a technical point of view, it is also a very sensitive demand and a long-term game process under the control of system manufacturers and platforms. In my opinion, the core problem that dynamic technology needs to solve is to find a reasonable balance between technical performance, business iteration efficiency and flexibility under the premise of ensuring the certainty of business release. Let's talk about our two ideas and attempts on Flutter dynamicization: Flutter template solution and Web on Flutter.

• Flutter template solution

The dynamic template solution is a relatively mature template solution based on Native technology within the group. It focuses on UI template rendering, has no execution logic and runtime environment, and is currently widely used in some core business scenarios of the e-commerce department. At the same time, the solution provides a supporting component platform, supports the entire process of online template editing, previewing, testing and publishing, and forms a complete business development ecological closed loop in combination with the publishing platform.

Under the Flutter system, the Xianyu team has implemented a set of Dart version SDKs on the Flutter side based on the standard template protocol. By issuing templates, the lightweight dynamic component orchestration capability of the Flutter side has been realized. Through more than a year of iterations, the rendering performance and rendering consistency issues have been gradually solved, which has better enabled the dynamic component capabilities of the Flutter business.

So, will there be a better combination of Flutter and dynamic templating solutions in the future? The answer is yes. From the perspective of DSL, the current template writing method is basically derived from Android XML, which is not friendly to component developers, especially non-Android developers, and has a certain learning cost; while the structure and properties of Flutter can be expressed through widgets, which can be extremely flexible and platform-neutral to build UI and bind data with declarative code, making it easy for developers to write components and debug and test them independently through the Flutter framework; when running on the mobile terminal, it can be translated into native components or Flutter components as needed and according to the scene. In the future, we will continue to explore in this direction.

• Web on Flutter

Compared with the template component rendering solution that is close to the Native development model, Web on Flutter hopes to achieve dynamic capabilities that are close to the front-end technology stack through H5-like DSL + JS and Flutter's rendering capabilities.

At present, the small program solutions based on Web rendering have performance problems such as high startup time and large gap between rendering performance and native UI. These problems are largely due to the design history of browser engines (complex rendering pipeline, CSS multi-pass layout and legacy implementation, etc.), as well as low efficiency of JS to Native communication (bridge). Flutter's design ideas are derived from browsers. On the one hand, it directly absorbs the evolution achievements of front-end frameworks in recent years, natively supports declarative-responsive programming paradigms, and improves the R&D efficiency of mobile terminals; on the other hand, Flutter closely follows the native development model and defines the necessary elements of UI structure, layout and rendering. On the premise of meeting the native UI development model, it simplifies the capability definition and layout algorithm (concepts such as single-pass layout and repaint boundary), greatly simplifies the complexity of the rendering pipeline, and directly brings Flutter a performance experience close to native. At the same time, Flutter's widgets are cleverly designed. Basic elements such as structure, layout, and attributes are expressed using widgets, and complex components can be constructed through the combination of basic widgets. This fine-grained + combination capability design gives Flutter extremely strong expressiveness and the possibility of connecting to various R&D models.

Therefore, it is a reasonable exploration direction to apply Flutter to the mini-program ecosystem to combine mini-program DSL through widgets, support a limited set of mini-program CSS, replace the browser engine with the rendering layer, and connect to the JS engine to support JS execution capabilities. Compared with the browser that has spoiled developers, this solution is bound to be limited in CSS capability support and cannot meet the implementation of all CSS3 standards. It is more about combining CSS capabilities without destroying the single-pass layout by closely following the existing capabilities of Flutter widgets and necessary widget extensions; but from the perspective of Flutter native development, as long as Flutter's existing native capabilities can meet business needs, then the limited CSS implementation can also provide capabilities equivalent to Flutter to solve business problems. At the same time, limited CSS can be exchanged for high performance comparable to Flutter, which brings a qualitative change in performance compared to Web-based implementations.

At the end of 2018, we implemented the prototype of this idea through an internal project. We used C++ to rewrite the low- and middle-level capabilities in the Dart framework such as widgets, rendering, painting and event management of Flutter, and implemented the responsive framework of CSSOM + DSL -> Widgets in widgets with C++. We directly provide render implementation from the C++ layer, handing over the traditional template expansion, tree-diff calculation and rendering work undertaken by JS to the C++ layer. We realized the diff capabilities of Widgets tree to RenderObjects tree provided by Flutter, which significantly improved performance. Judging from the simple demo implemented, the web rendering performance of small programs has been greatly improved.

The problem with this solution lies in its long-term maintenance after the split of the Google code base. Breaking many obstacles, how to connect Flutter and the web ecosystem? This article provides a comprehensive comparison of several ideas that the group has tried in this direction. In the future, we will continue to make in-depth and continuous exploration in this direction.

Summary and Outlook

The system construction of Flutter is just starting out in the Taobao system, and there is still a lot of work to be done. We have done many constructive things in infrastructure, engineering, and the definition and convergence of business domain R&D models through Flutter. We are moving little by little towards building Flutter as a unified basic R&D framework for mobile applications and helping our business return to the mobile R&D model.

Before the mobile technology team launched the AliFlutter project, Xianyu Technology Department had made a lot of exploration and investment in the construction of Flutter technology. On the one hand, it empowered business efficiency and upgraded through Flutter technology, and achieved good business results; on the other hand, it accumulated Flutter's technology and business solutions, and through open source feeding back to the community, it has established significant technical influence and leadership in the Flutter technology community at home and abroad, and a group of Flutter technology experts have emerged.

Next, AliFlutter's key task is to build the Flutter field at the group level, bring together with pioneering applications such as Xianyu and Fortune, as well as Flutter practitioners such as Hema, DingTalk, Fliggy, Youku, Ele.me, and CBU, and build the Flutter ecosystem at the group level, so that technology and experience can be accumulated and shared together, and make the Flutter technology system bigger and stronger within Alibaba's application ecosystem, truly become the core R&D model of the group's business, and allow every participant to benefit from it.

We have always firmly believed in the advanced nature and application prospects of Flutter technology. In the future, we will continue to base ourselves on the Taobao service group business, work hand in hand with group developers, and move forward firmly in the Flutter technology direction.