In April, “Tao System Technology” launched AliFlutter livestreams, which attracted more than 2W viewers for eight livestreams.
In this live series, we are honored to invite eight technical experts from Alibaba to share with developers the application of Flutter in the construction of the group. Isn’t it fruitful?
Orange has also sorted out the highlights, video playback, and PPT content for you. If you want to be so thoughtful, no small talk, please read on! For the application of AliFlutter in the group, you can refer to the article “How to Systematize Flutter construction in Alibaba Group”.
I. Overview of AliFlutter client DEVELOPMENT system
Introduction to the lecturer:
Wang kang, hua Ming zhengwu, wireless technology expert of taobao terminal technology department, author of Flutter Member(kangwang1988), AspectD.
- Responsible for the construction of Flutter mixed development system and business landing in Xianyu, and made a series of relevant technical solutions. He has rich practical experience in Flutter principle and application as well as multi-terminal integrated programming.
- Currently, we focus on the exploration and practice of multi-terminal and multi-platform r&d mode with Flutter as the core.
uEssence content:
Based on the principle of Flutter, this topic introduces why we use Flutter to develop business in Alibaba. This includes the user experience under high performance, the improvement of r&d efficiency brought by high development efficiency and cross-terminal consistency, the rich expansion space under heterogeneous scenarios brought by good support of multi-terminal and multi-platform, and the innovative experience of interactive gamification and other scenarios under rich expression power.
The current research on Flutter mainly includes systematization, depth, framework and more exploration.
From the perspective of AliFlutter, our infrastructure mainly supports custom repositories, enabling internal developers to effectively share and reuse their own work. We also support custom engine services, enabling full-link support from engine customization to multi-system construction and upload to use, which is basically meaningless to users. We support standard Flutter application build and modular product build on the continuous integration platform, reducing developer costs. We have also done a lot of in-depth work in engine size optimization, package size optimization, memory optimization, startup time optimization and other aspects to solve the problem of business landing. At the eco-framework level, we developed hybrid stack management, state management, dynamic UI, AOP framework and other contents, which enriched the Flutter ecosystem and created a lot of business value. Not only that, we also expanded the possibility and value of Flutter in the scene of Flutter Canvas and achieved good results.
For the future, we are trying to improve Flutter’s performance in a variety of scenarios, including cross-side capabilities, interaction capabilities, r&d efficiency and delivery efficiency, so that Flutter is not just an SDK, but a promising development model.
PPT: Click here to download
Video:Click here to watch
Second, xianyu RESEARCH and development framework application and exploration
★ About the author:
Liang Zhifeng, alias Xuan Chuan, responsible person of Free Fish Buyer link client, leading the landing of Free fish Flutter and the evolution of research and development framework.
★ Essence content:
This topic mainly shares the application and exploration of Xianyu’s FLUTTER research and development framework, and introduces the flutter integrated research and development mode, flutter dynamic ability and flutter interaction ability from three directions respectively.
Candy is a native and high-performance interactive development engine that complies with ECS standards and is highly integrated with Flutter. It breaks the boundary between UI and game engine, perfectly integrates the two systems under the concept of Widgets, and enables THE UI to achieve more dynamic effects that are difficult to be achieved by previous UI systems at low cost through the ability of game engine. It also allows Flutter’s rich UI to be integrated back into the game engine.
PPT:Click here to download
Video:Click here to watch
3. AliFlutter image Solutions and optimization
★ About the author:
Wang Qianyuan, alias Shenmo, joined Ali in 2013 and was responsible for iOS architecture work of Tmall, Alipay and Mobile Taobao App successively. Currently, the AliFlutter team is responsible for basic components, iOS architecture, engines, toolchains, etc.
★ Essence content:
This topic introduces the external image library solution provided by AliFlutter suitable for mixed applications. First of all, the official original scheme of Flutter is analyzed, and the entry point of AliFlutter scheme is proposed. The AliFlutter solution provides image CDN parameter capabilities, local file and in-memory image caching, and many optimizations within a fully compliant system. Compared with the native solution, it can provide better memory and CPU usage in the multi-graph scenario of e-commerce.
At the same time, the AliFlutter scheme proposed and implemented an optimization method for the List components of Flutter. The original unit of Cell recycling is refined to each image as a unit of recycling. In complex scenes such as e-commerce cards and graphic details, texture memory resources can be recovered according to whether the picture is off-screen. Greatly reduces the memory surge in some scenarios and improves the stability of applications.
The hybrid development of Flutter and Native will be the mainstream development mode for a long time to come. A stable, efficient, and seamless integration with the official system of external image caching scheme is essential. However, each application has its own scenario and user characteristics, and application developers should choose a solution based on the characteristics and needs of the application.
PPT:Click here to download
Video:Click here to watch
4. UC Flutter technology practice sharing
Introduction to the lecturer:
Liu Sensen, also known as Senny, joined UC in 2014 and spent five years in Ali. I have been in charge of the technical work of information flow business in UC Information Flow team for a long time. I have been devoted to the research and development of innovative products for nearly one year, and responsible for the application and practice of FLUTTER technology in innovative products.
★ Essence content:
UC began to explore Flutter technology in nineteen nineteen and launched Flutter on a large scale by the end of the same year. In addition to the apps that have been released, several innovative products are being made using Flutter technology.
This sharing will introduce in detail the problems solved by UC in the process of flutter landing on a large scale and how to think about it. I believe that the vast majority of developers will also encounter these problems, hope to give some inspiration.
The three core problems to be solved by the large-scale landing of FLUTTER are the construction of engineering construction system, performance optimization and dynamic support. With the goal of high efficiency in engineering construction system, UC is divided from three architectural perspectives to provide efficient and reusable engineering solutions. In performance optimization, the FLUTTER high availability system was built to optimize engine performance and video and image scenes with high performance external texture scheme. Dynamic solutions also have some advantages that give you a different perspective on the problem.
UC high availability extends the performance metrics of the Idle Fish high availability component to support native Navigator. And combined with UC fist grade product itrace monitoring platform (YueYing, external links yueying.effirst.com/index), provides a more real-time, more convenient high availability monitoring solution. We also have plans to open this Flutter high-availability solution to the outside world. Stay tuned.
PPT:Click here to download
Video:Click here to watch
5. Taobao special Version of Flutter practice
Introduction to the lecturer:
Li Bin, xiaoxia, senior iOS development engineer of special edition development team, led the integration construction of front and back ends of special edition, which was applied in shopping guide scenes such as the home page of special edition to improve the research and development efficiency.
★ Essence content:
In order to solve app’s own research and development efficiency and user experience problems, Taobao Special Edition introduces Flutter framework and integrates with FaaS for cloud integration. A developer can smoothly complete front-end and back-end development within the framework, saving more than half of the development cost compared with the traditional Native development delivery process.
At the framework level, we introduced the development framework of MVVM to integrate the front and back ends. MVVM is an integration of the front and back ends. In the framework, the details that business does not need to care about are shielded as far as possible. The students who develop MVVM only need to care about their business logic as a business owner. This new development approach gives you an extension of the application of Flutter and a way to quickly iterate with Flutter+FaaS.
PPT:Click here to download
Video:Click here to watch
Exploration and application of Canvas based on Flutter
Introduction to the lecturer:
Wan Hongbo, Huaming Yuanhu, Taoshi Technology Department – cross-platform technology department, wireless development experts, mainly engaged in the research of browser kernel and rendering engine. Mobile Android terminal, introduces the Flutter engine for the first time, designs and implements the Canvas module based on the Flutter engine, serves the small program interaction scene.
★ Essence content:
This topic mainly shares the current business pain points encountered in the mini program interaction scenario and presents our solution based on the Flutter engine. Based on the Flutter engine, we provide a standard Web Canvas API and rendering pipeline externally, allowing business code to be rendered directly in the worker thread of the applet, shortening the rendering link and improving the rendering performance.
We also refined the proprietary Canvas rendering mode, which does not start the DART virtual machine at runtime. This reduces engine startup time and memory footprint, and ensures that native Flutter services and apet services are compatible at the engine level, reducing maintenance costs.
The Flutter engine is a lightweight cross-platform graphics rendering engine capable of providing high quality and high performance on the mobile end. It can be used as a solid base for different customization and exploration in different business scenarios to achieve differentiated effects in the future.
PPT:Click here to download
Video:Click here to watch
ICBU Flutter exploration road
Introduction to the lecturer:
Lu Shaode, bai Ji, ICBU’s Flutter architect, connected Flutter to ICBU, designed and implemented the Flutter architecture and basic components of ICBU, realized and output ICBU’s hybrid stack, multi-language and other capabilities, and promoted the continuous evolution of ICBU wireless technology department toward Flutter.
★ Essence content:
This topic mainly shares the practice, thinking and precipitation of ICBU in Flutter practice. The whole is divided into two parts. The first part deduces the necessity of Flutter access and the problems to be solved through the business background and technical principles. The second part focuses on the technical description of the hybrid engineering and the hybrid stack.
In view of the various mobile cross-end development frameworks currently emerging in the world, we made a detailed summary, compared the technical principles, and finally deduced the advantages of Flutter. At the same time, it also deduces the general developer’s misgivings about Apple’s attitude towards Flutter. Finally, it is concluded that Flutter can replace Native development under ideal condition.
The hybrid stack is an essential part of Flutter hybrid development. Here I explain the difficulties of the hybrid stack and our solutions, and compare the differences, advantages and disadvantages of Flutter official, FlutterBoost and our solutions. Hope to bring some new ideas and inspiration to all developers.
PPT:Click here to download
Video:Click here to watch
Application and precipitation of Flutter in Ele. me
Lecturer Profile:
★ Essence content:
What is so great about Flutter, the most popular cross-platform development solution at the moment? Ele. me started to contact Flutter in the second half of 2018, and launched a large number of Flutter businesses in multiple apps. In order to “ensure quality, improve efficiency and empower business”, Ele. me chose Flutter as its cross-platform development solution. It includes the comparison between Flutter and native, RN/WEEX, and H5 r&d schemes, as well as the demonstration of Flutter r&d efficiency, page user experience, and application prospect. We believe that this will give people more confidence and determination to try to use Flutter and actually use Flutter for business development.
At the same time, the topic also shared the application and implementation of Flutter in Ele. me, including some practical operation experience of Flutter business page. It also includes the practice, analysis and evolution of engineering hybrid stack solution, and the business team background and practice of the two modes of engineering R&D/integration, hoping to bring some reference to everyone. Finally, we share the online quality of Flutter business (Crash/FPS) and the result of improving the r&d efficiency of the whole team.
The topic also introduces the infrastructure construction and precipitation of Ele. me in the application of Flutter, including the basic flow charts of some projects contributed by Ele. me in the co-construction of Aliflutter for your reference. It also introduces the implementation and production of an elegant solution DNA (eliminating native hardcoding /dart context calling native methods/without creating channels and plugins) to address the pain points of Channel usage (bilateral hardcoding/single call/high cost of creation). Dart is expected to provide a faster, easier, and more powerful alternative to invoking native capabilities.
PPT:Click here to download
Video:Click here to watch
What are you looking forward to next time
See the end, to orange 🍊 point a praise duck ~
(Orange wechat: TaoTech001)
