Author: Alibaba Tao department technology
Link: https://www.zhihu.com/question/374113031/answer/1252582543
preface
Last year, 2019 was undoubtedly a banner year for Flutter technology.
Every mobile developer has been fascinated by the features and ideas that Flutter brings with it: “rapid development, expressive and flexible UI, native performance”, from superapps to standalone apps, from pure Flutter to hybrid stacks, Developers have been exploring and applying Flutter technology in a variety of scenarios and are facing a variety of challenges.
More and more businesses and teams in Alibaba Group have started to try Flutter technology stack. From xianyu leading the trend alone, now BU businesses such as Taobao Special Edition, Hema, Youku and Feizu have entered the business, and the business application of Flutter has gradually formed a trend in the group.
So what is the reason why more and more developers within the group are embracing the Flutter technology stack? What advantages of Flutter attract group Native developers to develop and deliver business with Flutter?
We would like to share the systematic construction of Flutter in Alibaba Group for reference and exchange.
From a technical point of view, Si Mu of Alibaba’s new retail technology department believes that there are three core features of Flutter that are most attractive to developers:
- High efficiency of development and delivery, good development experience
- Excellent ability to span multiple terminals and platforms
- Strong UI presentation
Let’s start with development efficiency. From the perspective of the group’s e-commerce business attributes, business response efficiency and research and development efficiency behind it are always the most important indicators. Improving r&d efficiency as much as possible on the premise of ensuring the experience means higher productivity. Traditional Native business development of iOS and Android requires investment separately, with high research and development costs, large difference between the two ends and dependence on end-side release. This is also why the group’s e-commerce business activity technology stack has been more dependent on front-end system, from H5 to Weex to small programs. A lot of it is about r&d and delivery efficiency and flexibility. Flutter now solves the problem of cross-endpoint consistency, allowing one set of code to run on both iOS and Android without any difference. The development experience of Flutter is basically close to the front end, supporting Hot Reload for on Device. At the end of last year, Flutter also introduced the Hot UI capability of real-time preview and interaction through plug-ins in Android Studio. And the Layout Explorer visual Layout, enabling Flutter development efficiency and front-end efficiency to be almost equal.
At the current stage of e-commerce business development, it is no longer limited to mobile terminal scenarios, and more and more business requirements put forward higher requirements for cross-platform. In the application scenarios of Dingding/Qianniu desktop, and even business scenarios such as Tmall Genie and offline stores, a multi-terminal solution with better performance consistency and lower cost than Web is required in the long run. At present, cross-terminal technology solutions mainly rely on browsers and front-end systems, but the sandbox properties of browsers themselves, the low degree of integration with the system, and the poor performance on low-end devices all reduce the r&d efficiency and user experience, and raise the business delivery threshold.
It can be said that the cross-multi-terminal multi-platform scheme within the group is essentially missing. Flutter is designed to support multi-platform development naturally. Its underlying structure is based on the Skia cross-platform graphics engine, which builds a platform-independent rendering system and event processing system. The Declaration + responsive programming paradigm based on Widgets is customized according to the Native development model. Low dependence on system capability and excellent cross-platform restore degree; Supporting multiple platforms is also a strategic goal of Flutter.
In addition to iOS and Android, the official platforms that Flutter supports are Mac, Windows and Web. Linux is also under development. Its technical features also make it cost-effective to port Flutter to Linux based IoT platforms. Flutter is also the official application development framework for Fuschia, Google’s next operating system. It can be said that Flutter has all the conditions to become the next generation of cross-platform and multi-terminal R&D model. It is a very feasible choice to build the group’s multi-terminal and multi-platform R&D system around Flutter.
One last word on UI presentation. E-commerce business attaches great importance to experience and interaction, especially for traffic refinement operation scenes, the gamification of rich interaction has become an important means of traffic activation. In terms of UI expressiveness, the front-end system has always had advantages. With CSS3’s powerful animation capability, developers can easily achieve complex animation effects and interactive experience. However, based on Native UI, developers need to rely on various three-party libraries of animation effects, resulting in inconsistent two-end development experience, complex implementation and low delivery efficiency.
Flutter solves this problem well. From Tween animations and physics-based animations to complex page-to-page Hero animations and Parallax parallax effects, Flutter can be implemented efficiently and cheaply across platforms.
Current situation of Flutter systematization construction
At present, several businesses BU in the Group have tried to apply Flutter technology stack, covering multiple business scenarios including e-commerce detailed business, shopping guide channel, Feeds stream, gamification interaction and internationalization. At present, the pain point of Flutter technology application in the Group lies in that the middle stage of R&D infrastructure is not perfect, r&d support capacity and data operation and maintenance capacity have not been standardized, and the group’s Flutter developer ecology has not been fully developed, and no joint force has been formed temporarily. These issues will be the focus of our future construction of Flutter technology system at the group level.
On the other hand, from the perspective of the industry trend, Flutter technology has become the key technology construction direction invested by more and more industry partners. Bytedance, Meituan and other companies have built their own Flutter engineering systems and served their own business scenarios. Tencent also tried to apply Flutter on several apps, and made useful explorations in the scenario of Flutter rendering capability serving applets. The investment and determination of industry partners in Flutter technology, on the one hand, gives us more confidence in the application prospects of Flutter technology and the community, on the other hand, it also makes us feel the necessity and urgency of all parties in the group to jointly build the Flutter ecology.
Try and think about hand shopping
Finally, a brief talk about our exploration and thinking on Flutter since 18 years ago. From October 2018, We began to explore Flutter rendering engine application in small application scenarios; In the second half of 19th year, the basic capacity of Flutter was built, and taobao special edition business was served, and key technologies such as engine, image library, memory optimization and loading performance were accumulated. Meanwhile, by reforming the engine of Flutter, encapsulate the 2D Canvas capability of Flutter, support small program Canvas component and small game engine, serve 2D/2.5D gamification business, and land in business scene.
In this process, we also settled solutions to memory problems and image problems, compared and thought about Flutter technology and Web technology, and achieved certain technical and business values. Through these attempts, we have deepened our control and understanding of Flutter technology. In our opinion, the sudden birth of Flutter can be regarded as the horn of the revival of the Native system. While maintaining the advantages of Native performance, Flutter brings excellent cross-end consistency, r&d efficiency close to the front end, and strong UI expressiveness, which brings new possibilities for group businesses to use Native technology stack.
From the perspective of business application: The biggest value that Flutter currently brings is the improvement of r&d efficiency. On the premise of complete infrastructure and native expansion capabilities, the human efficiency of developing pure Dart business based on Flutter is nearly two times higher than the previous development, and the demand response capacity per unit time is also nearly two times higher. At present, it has been well verified in the business development of idle fish and special price version.
From the perspective of adaptation scenarios, Flutter is currently suitable to host rich graphic content, such as details, feed streams, user homepage and other normal business development, as well as 2D/2.5D game scenarios and rich dynamic effects. Flutter can simultaneously meet the business scenarios that previously required iOS, Android and front-end technology stacks to take charge of. Dart can even be used to take charge of some server-side business logic development through the development mode of end-to-end cloud integration, which can help business teams expand business boundaries. Realize the closed-loop of front and rear r&d capability. Flutter’s current limitations lie in its dynamic capabilities and upfront costs.
The pre-investment cost mainly refers to the cost of technical learning and team r&d mode upgrading, which involves the choice of technical route, which we and each business team need to think about and judge together, and will not be discussed here. The dynamic capability of Flutter is relatively weak. Currently, template-based component-level dynamic capability can be realized through the Flutter templating technology. However, due to various factors such as performance, audit and invasion of the original Flutter system, UI + logical dynamic capability cannot be directly realized. Although there are no censorship restrictions, the Flutter Web solution still has serious performance bottlenecks and rendering differences due to the differences between browser DOM API and widgets system. The Flutter Web solution can only be used as a backup solution for degradation, and cannot be used as the main implementation solution for dynamic implementation for the time being.
The exploration of dynamic direction in the future will also be a long-term game process. If we can solve the problem of Flutter dynamics in the future, Flutter has every chance to become one of the core r&d models of the group’s business. To sum up, we believe that the time is ripe to enter into Flutter and work together to build the mobile ecology of Flutter Group, which is promising.
AliFlutter – Economy Mobile Group Flutter co-built project
In this context, the Economy Mobile Technology Group this year also focused on Flutter as an end-to-end architecture governance direction. The Mobile Technology team came up with the AliFlutter project from a strategic perspective with very clear goals:
- Build a public technical infrastructure for Flutter at the economic level, formulate standards for Flutter containers, middleware and APIS, build Flutter r&d support and data operation and maintenance capabilities, and reuse key technologies.
- Build the economic Flutter technology community with all BU, share the group’s Flutter technology and business components, capabilities and solutions, serve the Group’s Flutter business, and build the group’s Flutter technology ecosystem;
- Build the external influence of Flutter at the level of economy, unite with all BU to build the commanding height of Flutter technology of Ali in the industry.
We are duty-bound to “build the foundation, nurture the community and carry the banner” for the Flutter technology system of the economy. The overall architecture of the future AliFlutter is as follows:
The first step of AliFlutter construction is to build the group’s Flutter infrastructure, provide public containers and components, r&d support services and standardized R&D process, 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.
Second, we should serve well the business application of Flutter, explore the combination of business application mode and Flutter technology characteristics, polish technology in the process, form solutions and technology precipitation for business characteristics, and truly revitalize the atmosphere and ecology of Flutter community within the group.
The third step is to look to the future and solve several core issues of Flutter application: cross-terminal and interaction capability, business R&D efficiency and business delivery efficiency. By enabling the business with technology, Flutter can truly become the core R&D mode of the group’s mobile business. Next, we will talk in detail about AliFlutter’s work and future-oriented thinking at each stage.
Infrastructure construction
Since the launch of the AliFlutter project in October, 19, we have basically built a set of public Flutter infrastructure, including Artifacts and PUB libraries, standard Flutter containers and API standards, and implemented the automatic construction and packaging of Flutter. Standard engine customization and business development workflows are defined. At present, the infrastructure has the capability to support the group’s Flutter business research and development, and support the customization of BU on demand.
Artifacts in the warehouse
The spawn server is designed to coordinate with Engine customization, speeding up back-end services that capture Engine intermediates through the Flutter command to unify the Flutter developer’s working environment. The developer can set FLUTTER_STORAGE_BASE_URL to direct the address of the Flutter toolchain to the service. The namespace allows you to customize the ability to obtain artifacts and the Intranet acceleration service. The Namespace is designed to distinguish engine products of different BU, and a public Namespace is provided to store common products, ensuring customization and on-demand configuration of common capabilities. If the product address does not exist on the backend storage, a fetch from the official image of the Flutter will be triggered and cached to the server. Each BU can customize the engine as required and upload the customized engine to its namespace in a specified path. In this way, the customized engine intermediates can be obtained from the namespace.
The pub warehouse
Similar to NPM in the Node.js world, Flutter uses PUB to manage three-party components and dependencies. In consideration of ease-of-use, security and other requirements, we also built the Flutter Pub library in the Intranet environment to manage the common two-party components within the group. The library aims to become the pub publishing platform of the Group, managing all the second and third party PUB packages within the group. Users can set the PUB_HOSTED_URL to point to the internal address to obtain the configuration and publish pub of both parties through the Flutter toolchain. 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 problem to be solved at the present stage is to provide a unified Flutter runtime container, a series of Flutter packaging and API capabilities of the group’s standardized mobile middleware, and provide the group’s standard plug-in extension mode for business parties to independently develop business functions.
Since the group applications are mainly based on mixed stack, we take FlutterBoost as the base of the mixed stack of Flutter container, and provide unified mixed stack routing navigation capability with the group standard routing and navigation middleware. Services can quickly achieve the hybrid navigation capability of Flutter pages and Native pages through standard route registration.
By connecting to the ha platform, the container provides standard monitoring capabilities such as initial performance burying point and Crash data reporting, which provides a foundation for Flutter service technical performance analysis and troubleshooting. The mobile terminal of the Group has accumulated a complete set of standard middleware system, including a series of basic capabilities such as network library, picture library, push message, configuration delivery, data acquisition and monitoring, etc. The ability to seamlessly use mobile middleware within the Flutter system is a critical requirement for businesses.
At the same time, a series of standard apis formed during the construction of small program system also largely realize the low-level capability abstraction of a complete small program running environment, which is a very good supplement to the standardized access system capability of Flutter system and the realization of platform-independent cross-end capability.
Together with Taobao middleware team and small program team, we have encapsulated and standardized the basic middleware and small program API implementation on the Flutter side, and will also provide systematic support for the Flutter middleware and API capabilities in the future.
Standardized Flutter construction
Because the Flutter research and development system is relatively new, and the construction Pipeline has certain particularity compared with the traditional mobile construction process, the product construction and configuration is complex, time-consuming and error-prone, which brings great obstacles to the construction and release of Flutter business. Therefore, we also cooperated with the students in the r&d support department to realize the script construction process of Flutter in the form of plug-ins, supporting the dual-end automatic whole package packaging and Flutter Module packaging. Currently, the construction process of AliFlutter uses the AliFlutter repository and the pub repository within the group by default. The engine products are also obtained from the artifacts repository according to the configuration, which better meets the requirements of automatic construction to support the Flutter business.
Business applications
After laying a solid foundation for the co-construction of Flutter Group, the second step is that We have also done a lot of work on the business application of AliFlutter. On the one hand, the original Flutter engineering capability continues to serve the Amoy system and the group business; On the other hand, Flutter Canvas project serves the interactive business in the small application scenario and gamification scenario
Amoy department and group business support
At present, Taobao Special edition has completed the transformation of Flutter of detailed business and launched it. By adopting Flutter, the human investment of business can be reduced by half without changing the pace of demand, which has played an obvious role in relieving the pressure of business research and development. Meanwhile, 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 accumulate business domain solutions based on Flutter.
At present, Hema, ICBU and Youku have also carried out container access upgrade and business adaptation based on AliFlutter. Hema has realized the business of Hema Town by relying on The Flutter game engine of Xianyu, and ICBU has used Flutter in the main link related pages. Youku implemented scenarios such as membership order pages based on Flutter.
We are also working with Dingding and Google on a desktop solution for Flutter.
Flutter Canvas
With the increasing number of interactive scenes in e-commerce activity marketing and the continuous improvement of performance requirements, how to provide a high-performance and stable Canvas base capability to serve rich interactive scenes has become a key topic. Canvas plays an important role as the main ability to host interactive games in the applet scenario. However, limited by the isolated design of app Context and Page context under the apet architecture, there is a communication bottleneck from app worker to Page renderer, which cannot give full play to the performance of Web canvas. If there is a native canvas implementation, the app worker can be directly connected to the native layer, reducing the communication cost and giving full play to the performance of canvas.
The underlying Flutter is based on Skia, and its performance has long been tested for compatibility with complex heterogeneous mobile devices. The browser-based design of Flutter implements a platform-independent rendering pipeline and greatly simplifies browser implementation, providing excellent reliability and performance. If we can use this rendering pipeline directly to provide Canvas capabilities to business containers, and provide applets and small game containers with a standard API consistent with Web Canvas via binding, on the one hand, we can reuse the underlying capabilities of Flutter. Rendering support for non-DART environments. On the other hand, Flutter simplifies efficient rendering pipeline implementation to provide better rendering performance.
At present, Flutter Canvas has been launched on Mobile Taobao, and has carried out grayscale pilot in small program sports banking business, which is preliminarily capable of carrying small program Canvas business. Its performance is superior to that of low-end Android phones and can be used as a beneficial supplement to The Web Canvas scheme.
In the future, On the one hand, Flutter Canvas will achieve better adaptability and performance on mobile terminals by virtue of the cross-platform and high performance characteristics of Flutter rendering pipeline and Flutter adaptation support for Vulkan and Metal. At the same time, we will continue to implement 3D apis to support future interactive business applications.
Construction of the future
After taking root in the business, the third step is to keep close to the future construction goals of Flutter system in Alibaba Group and continuously answer several key questions about Flutter’s future construction path. First of all, what should be the construction goal of Flutter system in Alibaba Group? In my opinion, Flutter should become one of the core business research and development modes of Alibaba Group across multiple terminals and platforms in the future. So how close are we to achieving that goal? In my opinion, if Flutter is to become the core business research and development mode, it must solve four core issues: cross-side capability, interaction capability, business research and development efficiency, and business delivery efficiency.
- From the perspective of cross-terminal capability: Although Flutter has excellent cross-terminal capability and high degree of reducibility, it still needs to be realized by cross-terminal extension when it comes to platform capability. Standardized container and API encapsulation capability such as small program system has not been formed yet. How to better solve the containerization problem of Flutter so that businesses are not aware of platform differences?
- From the perspective of interaction capability: How can Flutter make full use of its advantages in interaction capability, provide rich interactive experience comparable to the front-end, and at the same time lower the threshold for the development of rich interactive features of Native, and truly attract Native developers to develop businesses using Flutter technology?
- From the perspective of business R&D efficiency: Although the Hot Reload/Hot UI mechanism of Flutter has made the efficiency of developing Native pages catch up with the front end, there is still a lot of room for improvement in engineering decoupling, and currently it cannot efficiently support the parallel development of multiple business teams. On the other hand, how to combine with the current popular Serverless capability to realize the end-cloud integrated R&D mode and make the business realize the closed-loop r&d needs to be tested by practice.
- From the perspective of business delivery efficiency: Currently, Flutter is still a Native solution, relying on end-side release, which has low delivery efficiency and cannot well bear the requirements of flexibility and effectiveness of e-commerce system. So how to solve the dynamic of Flutter to help business achieve rapid iteration?
Only by solving these problems can Flutter truly become the core R&D mode of the group’s mobile business and bring a leap forward to the group’s business research and development. Let’s talk about our thinking and exploration in these directions.
Improve cross-end capacity: containerize Flutter
From an engineering point of view, Flutter achieves minimal dependence on the host platform through Skia’s cross-platform graphics rendering and self-built event architecture. However, there is no need for a unified abstraction of Flutter’s platform-side capabilities from an application framework perspective. This requires us to carry out selective packaging according to the demands and characteristics of the business. Small application API is done a very good demonstration, ali applet system provide the API 200 +, a good move for the UI, multimedia, file cache, network, equipment capability, data security, and the ability to relate to the business of packaging, make business developers side in the small program calls for an API system ability, Don’t worry about platform implementation. Therefore, the next planning of AliFlutter container is to provide a set of standardized API capabilities from the perspective of engineering system, so as to standardize and abstract the terminal basic capabilities of mobile terminals, so that businesses can focus on business as little as possible without caring about platform differences. At the same time, the ability to use standardized apis to achieve deployment across multiple platforms.
From the perspective of mobile terminal architecture, cross-platform solutions in various periods have common demands for API capabilities. From H5 to Weex, and then to small programs, as well as container environment including Flutter, multiple rounds of REPEATED API construction have been carried out, resulting in the lack of standardized DEFINITION of API interface. And the lack of unified management and control of the implementation layer. If interface unification can be achieved in the native implementation of API, and then interfaces can be provided for business use by each container, it can achieve better implementation closure, and achieve unified scheduling, control and measurement of system resources across containers in the unified implementation layer.
Improved interaction: UI + game engine
As mentioned above, the greatest value of Flutter is the improvement of r&d efficiency, which is the starting point for attracting business teams to apply Flutter technology. However, it is far from enough to rely only on R&D to improve efficiency. After the current R&D pain points are solved through various engineering means and r&d efficiency is improved, how can businesses be persuaded to continue to use Flutter system for business development? What is the long-term value of Flutter? Personally, I think the goal should be to break the boundary between UI and game engine through the generalization of game interaction ability, create more expressive interactive experience in a gamified way, and create new business gameplay and value. We all know that the traditional UI and game engine are independent of each other. In H5 applications, UI is often made through DOM or the upper application framework, and game capabilities are realized through the H5 game engine built on the canvas.
If there is a need for a UI in a game application, the solution is usually to build a simple UI system and event system, and overlay the UI on the game by drawing it yourself. The same is true for an indie game engine. Flutter is technically more like a game engine built on top of Skia’s graphics library. It builds up its UI system through fine-grained widgets design. Thanks to this fine-grained design, it is also possible to assemble a complete Game engine directly from the widgets capability, providing Game, Scene and Sprite widgets and extending elements and Render objects. It also shares a set of event processing mechanism, layering and rendering composition mechanism with THE UI system.
By doing so, we break the boundary between THE DOM UI and Canvas game in H5, allowing the two systems to merge under the concept of Widgets, empowering the UI with the power of the game engine to achieve more dynamic effects (like a box horse eating an order component in one bite, etc.) that the previous UI systems could not achieve cheaply. We believe that exploration in this direction will further unlock the technological potential of Flutter, bring more business playability and creativity, liberate the imagination of products and design, and create more value for the business.
Improve R&D efficiency: engineering decoupling and end-cloud integration
Engineering decoupling of Flutter
The development efficiency of the front-end system largely comes from the decoupling between pages brought by the urI-based unified routing system and the cohesion brought by the standardization of Web API within pages. However, the current Flutter research and development mode still requires multiple business teams to work under the same project, and there is source code dependence between them. If the large-scale application of Flutter technology across business teams in the future, it will surely slow down the r&d efficiency of the business. From the perspective of engineering decoupling, the AliFlutter container can basically decouple the page research and development through the hybrid stack and standard routing capability. In the future, the container construction can provide API capability encapsulation of small program equivalence, and the business is not aware of the platform, which can give us the opportunity to decouple the business research and development. Achieve r&d experience and efficiency close to small program development.
The ideal scenario is: Businesses can create a separate Dart project from the business dimension, containing only business-related pages and logical code. The development phase can be completed by using the Hot UI development page of Flutter, and by using the CAPABILITIES of the IDE based on the Flutter Web to preview the project locally and debug apis and system calls. You can also generate a preview QR code by scanning the host app that has the AliFlutter SDK environment preinstalled. The link between R&D and construction is separated, and the cloud actively pulls the business warehouse code to participate in the whole package construction. In this way, front-end R&D experience similar to small program r&d can be achieved, and r&d decoupling and parallel publishing between services can be realized to improve service delivery efficiency.
End-to-end cloud Integration
Nowadays, Serverless concept has been paid more and more attention and applied by business RESEARCH and development. The Group has also been in full swing in the exploration of a new generation of end-to-end cloud integration research and development mode for more than a year. Combined with lightweight container environment, multi-language support capability and unified API server-side programming, server-side students can easily use client languages such as Java, JS, Swift and even Dart to develop server-side business capabilities and realize service orchestration, automatic generation of server-side FaaS business logic and API. Achieve the front and rear end engineering system normalization, business research and development closed-loop effect.
Currently, Xianyu takes the lead in Dart FaaS cloud integration exploration. Dart Function container is implemented through the container specification of the Group, and BaaS layer (storage, message queue, etc.) is abstracted together with the server for domain services required by some businesses. The Backend for Frontend (BFF) capability layer is encapsulated so that mobile developers can easily use Dart to encapsulate FaaS logic and develop FaaS on both mobile and server ends, greatly improving service development efficiency. By moving the original end-to-end request interface, assembling data and converting the logic into ViewModel to the server, through field mapping and page layout, mobile terminal can directly obtain ViewModel and refresh the page, through BinderAction two-way interactive status data, effectively shielding communication details. Improved development efficiency.
Cloud integration not only improves the efficiency of R&D and collaboration, but also reshapes the production relationship, so that the end-to-end business can be responsible for the overall results of the business instead of only focusing on the development role of end-to-end experience and logic. It also allows the server to focus more on the precipitation of domain services. The good cross-terminal characteristics of Flutter can shield terminal differentiation and facilitate the transformation of Flutter container, further simplifying the full-link r&d mode of business. In the future, how to accumulate a set of universal end-to-end and server-side communication scheduling framework that can serve the group’s business research and development under the FaaS mode, so that the group Flutter developers and businesses can share the benefits of Serverless technology and cloud integration improvement, is a new problem that we need to explore and define together.
Improve delivery efficiency: Flutter dynamics
Enabling dynamics is an important way to improve delivery efficiency. Dynamic is almost a necessary demand for the strong timeliness of e-commerce operation, but it is also a very sensitive demand from a technical point of view, and it is a long-term game process under the control of system manufacturer platform. 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 on the premise of ensuring the certainty of business release.
Here are two ideas and attempts to make Flutter dynamic: the template of Flutter scheme and Web on Flutter. Dynamic templating solution of Flutter is a relatively mature templating solution based on Native technology in the group, which focuses on UI template rendering without execution logic and runtime environment. Currently, it is widely used in some core business scenarios of e-commerce department. At the same time, the solution provides a supporting component platform, supporting online template editing, preview, test and release of the whole process, combined with the release platform to form a complete set of business development ecological closed-loop. Under the Flutter system, the Xianyu team has implemented a Dart VERSION SDK on the Flutter side according to the standard template protocol, and realized lightweight dynamic component choreography on the Flutter side through template delivery. Through more than one year of iteration, the rendering performance and consistency problems were gradually solved, enabling the dynamic capability of Flutter business components.
So, is there a better combination of Flutter and dynamic templatination in the future? The answer is yes. From the perspective of DSL, the current template writing method is basically from Android XML, which is not friendly to component developers, especially non-Android developers, and has a certain learning cost. The structure and properties of Flutter can be expressed through Widgets. It is 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. This can be translated into native or Flutter components on demand on a scene by scene basis when run on mobile. We will continue to explore this direction in the future.
Web on Flutter
Compared with the template component rendering scheme that is close to Native development mode, Web on Flutter hopes to realize the dynamic capability of the front-end technology stack by virtue of the RENDERING capability of Flutter through H5-like DSL + JS. At present, the small program scheme based on Web rendering has some performance problems, such as high startup time, large gap between the rendering performance and native UI, which are largely derived from the design history burden of browser engine (complex rendering pipeline, CSS multi-pass layout and legacy implementation). And low JS to Native communication efficiency (Bridge).
Flutter is designed from a browser. On the one hand, it absorbs the recent evolution of front-end frameworks, supports declarative and responsive programming paradigm, and improves the efficiency of mobile development. Flutter, on the other hand, adheres closely to the native development model and narrowly defines the elements necessary for UI structure, layout, and rendering. The capability definition and layout algorithm (concepts such as single-pass layout and Repaint Boundary) are simplified on the premise of satisfying the native UI development mode, which greatly simplifies the complexity of the rendering pipeline and directly brings a near-native performance experience to Flutter.
At the same time, the design of Flutter is clever. Basic elements, such as structural layout attributes, are expressed using widgets, and complex components can be formed by the combination of basic widgets. This fine granularity + combinative ability design makes Flutter have a strong expression. And have the possibility of docking various research and development modes. Therefore, the application of Flutter to the miniapp ecosystem is a logical direction to explore by combining THE DSL of Widgets, supporting the limited set of miniapp CSS, implementing the render layer to replace the browser engine, and docking the JS engine to support THE JS execution capability.
This solution is bound to be limited in its CSS capabilities compared to the developer spoilt browser. It does not meet all of the CSS3 standard implementations, and more through the existing capabilities of Flutter widgets and the necessary widgets extensions, Combine CSS capabilities without breaking single-pass layout. However, from the perspective of Flutter native development, as long as the existing Flutter native capabilities meet the business needs, the limited CSS implementation can also provide an equivalent capability to Flutter to solve business problems. At the same time, the limited CSS can be traded for comparable performance with Flutter and a qualitative change in performance compared to a Web-based implementation.
We prototypeed this idea through an internal project at the end of 2018. We used C++ to rewrite the Dart framework capabilities of Flutter, including widgets, rendering, painting and event management. In addition, the responsive framework of CSSOM + DSL -> Widgets is implemented in C++ on the widget. The render implementation is provided directly from the C++ layer, and the template expansion, tree-diff calculation and rendering work undertaken by JS are handed over to the C++ layer. Performance is significantly improved by implementing the Diff capability from The Widgets Tree to the RenderObjects Tree provided by Flutter.
From the simple demo of the implementation, the web rendering performance of the small program has been greatly improved. The problem with this solution is the long-term maintainability of the split with Google’s codebase. The article “How to connect Flutter and Web Ecology” made a comprehensive comparison of several ideas tried in this direction within the group, and we will continue to conduct in-depth and continuous exploration in this direction in the future.
Summary and Prospect
There is still a lot of work to be done. Many of the constructive things we are doing in the infrastructure, engineering, and business domain development model through Flutter definition and convergence are moving towards building Flutter as a unified mobile application infrastructure. Help the business return to the mobile r&d model of the big goal step by step. Before the mobile technology team started the AliFlutter project, xianyu Technology Department had already made a lot of exploration and investment in the construction of Flutter technology.
On the one hand, good business performance was achieved through the enabling business of Flutter technology; On the other hand, the technology and business solutions of Flutter have been accumulated, and the community has been feedback through open source, which has established significant technical influence and leadership in the Flutter technology community at home and abroad, and a number of Flutter technology experts have emerged. The next key task of AliFlutter is to build up the site of Flutter at the group level together with the pioneers of Flutter, such as Xianyu and Fortune, and the practitioners of Flutter, such as Hema, Dingding, Feizhu, Youku, Ele. me and CBU, so as to pull up the group Flutter ecology. Technology and experience can be accumulated and shared together to make Flutter technology system bigger and stronger in Alibaba’s application ecosystem, truly become the core R&D mode of the group’s business, and bring benefits to all participants.
We have always believed in the advancements and application prospects of Flutter technology. In the future, we will continue to base ourselves on the business of Taoshi Service Group and work together with the developers of The Group to firmly move forward in the technological direction of Flutter.
Tip: There are a lot of information about Flutter that I prepared, and it is not appropriate to share them because they are all external links. There is also a corresponding learning video for the above article. If you need it, you can go to my headline page to learn about it.
So need friends click to learn more can receive! I’ll share it with you for free.
For other needs, you can also check it on Github
The Flutter system learns its route
Flutter Learning Ebook
Flutter selected interview questions
Flutter hybrid development
