【淘系技術】AliFlutter 八場直播精華內容+PPT整理

驚喜四月，「淘系技術」重磅推出 AliFlutter 系列直播，整整八場，線上直播觀看人高達 2w+。

本系列直播咱們榮幸的邀請到 八 位來自阿里技術專家，爲開發者們分享 Flutter 在集團內的應用於建設，是否是收穫滿滿呢？

橙子君也爲你們整理了，精華內容、視頻回放，以及PPT內容，要不要這麼貼心，不閒聊了，你們往下看吧！關於AliFlutter 在集團上的應用，你們能夠參考文章《阿里集團內如何進行Flutter體系化建設？》

1、AliFlutter客戶端研發體系概覽

★  講師簡介:

王康，花名正物，淘寶終端技術部無線技術專家，Flutter Member(kangwang1988)，AspectD做者。

• 負責了Flutter在閒魚中的混合開發體系建設與業務落地，作了一系列相關技術方案。在Flutter原理與應用、多端一體化編程方面有豐富的實踐經驗。
• 目前專一於以Flutter爲核心的多端多平臺研發模式的探索與實踐。

★  精華內容：

本主題從Flutter的原理出發，介紹了爲何咱們要在Alibaba採用Flutter來研發業務。這裏麪包括高性能下的用戶體驗，開發效率高和跨端一致性帶來的研發效率提高，多端多平臺的良好支持帶來的異構場景下豐富的拓展空間，以及豐富表達力下富交互遊戲化等場景的創新體驗。

目前業界Flutter方面的探索主要包括體系化、深度、框架、更多探索等方面:

就AliFlutter來看，咱們在基礎設施上主要支持了自定義倉庫，讓內部開發者能夠有效共享和複用各自的工做，支持了自定義引擎服務，打通了從引擎定製到多系統構建，上傳到使用的全鏈路支持，對於使用者而言基本無感；咱們在持續集成平臺上支持了標準Flutter應用構建和模塊形式的產物構建，減小了開發者的使用成本；咱們也在引擎大小優化，包大小優化，內存優化，啓動時間優化等方面作了很多的深刻性的工做，解決了業務方落地的問題。在生態框架層面，咱們開發了混合棧管理、狀態管理、動態化UI、AOP框架等內容，豐富了Flutter生態，創造了諸多業務價值。不只如此，咱們還在Flutter Canvas等場景下去拓展Flutter的可能性與價值，取得了不錯的效果。

面向將來，咱們也正在跨端能力、交互能力、研發效率、交付效率等維度去改進Flutter在多樣化場景下的表現，讓Flutter不只僅是一個SDK，更是一個大有可爲的研發模式。

PPT：點擊此處下載

視頻：點擊此處觀看

2、閒魚研發框架應用和探索

★ 做者簡介：

梁治峯，花名玄川，閒魚買家鏈路客戶端負責人，主導閒魚flutter化的落地和研發框架演進。

★  精華內容：

本議題主要分享了閒魚在flutter中研發框架應用和探索，從分別從三個方向介紹Flutter一體化研發模式、Flutter動態化能力、Flutter互動能力。

Flutter-DX核心是解決Flutter UI動態表達的問題，經過集團DinamicX的DSL的下發，實現Flutter端的動態化模板渲染。並經過一年多的迭代逐步解決了渲染性能與渲染一致性問題，較好的賦能了Flutter業務的組件動態化能力。

Candy是符合ECS標準的與Flutter高度融合的原生開發高性能互動開發引擎，打破UI和遊戲引擎的邊界，讓兩個體系在 widgets 概念下完美融合起來，經過遊戲引擎的能力賦能UI實現更多之前UI體系難以低成本實現的動效效果，同時也讓Flutter豐富的UI融合迴游戲引擎。

PPT：點擊此處下載

視頻：點擊此處觀看

3、AliFlutter圖片解決方案與優化

★  做者簡介：

王乾元，花名神漠，13年加入阿里，前後負責過天貓、支付寶、手機淘寶App的iOS架構工做。目前在AliFlutter團隊負責基礎組件、iOS架構，以及引擎、工具鏈等方面的研究。

★  精華內容：

本議題介紹了AliFlutter提供的適合混合應用的外接圖片庫方案。首先，對Flutter官方原生方案進行的分析，並提出了AliFlutter方案的切入點。在與官方徹底兼容的體系內，AliFlutter方案提供了圖片的CDN參數能力，本地文件、內存圖片的緩存，以及諸多的優化措施。相比原生方案，在電商的多圖場景，能夠提供更優的內存和CPU佔用。

同時，針對Flutter的List組件，AliFlutter方案提出並實現了一種優化手段。將本來以Cell爲單位進行回收，細化爲以每張圖片爲單位進行回收。在電商卡片，圖文詳情等複雜場景，能夠根據圖片是否離屏來進行紋理內存資源的回收。大幅下降了一些場景下內存的飆高現象，提高了應用的穩定性。

Flutter與Native混合開發將是接下來很長時間的主流開發方式。一套穩定、高效、與官方體系無縫融合的外接圖片緩存方案是必不可少的。但每一個應用有本身的場景和用戶特色，應用開發者仍是應該根據應用的特色和需求選擇方案。

PPT：點擊此處下載

視頻：點擊此處觀看

4、UC Flutter技術實踐分享

★ 講師簡介：

劉森森，花名森尼，14年加入UC，在阿里度過了五年陳。長期在UC信息流團隊負責信息流業務的技術工做，近一年投入到創新產品的研發中，負責flutter技術在創新產品的應用與實踐。

★  精華內容：

UC在19年開始探索Flutter技術，並在同年年末進行規模化的落地。除了已經發布的app外，一些正在作的創新產品也在使用flutter技術。

本次分享會詳細介紹UC在規模化落地flutter過程當中解決的問題，以及是如何思考的。相信這些問題絕大部分的開發者也會遇到，指望能夠給予一些啓發。

規模化落地flutter核心要解決的三類問題分別是工程構建體系的搭建，性能優化和動態性支持。UC在工程構建體系中圍繞着高效率的目標，從三個架構視角來進行拆分，提供了高效且可複用的工程解決方案。性能優化中搭建了flutter高可用體系，優化引擎性能，並使用高性能外接紋理方案優化視頻和圖片的場景。動態方案也有一些亮點，能給到你們不一樣的看問題的視角。

UC高可用是在閒魚高可用組件的基礎上擴展了性能指標，支持了原生navigator。而且結合了UC的拳頭級產品itrace監控平臺（嶽鷹，對外連接yueying.effirst.com/index)，提供了更加實時，更加便捷的高可用監控方案。這套flutter高可用方案咱們也有對外開放計劃，敬請期待。

PPT：點擊此處下載

視頻：點擊此處觀看

5、淘寶特價版 Flutter 實踐

★  講師簡介：

李彬，花名瀟俠，特價版開發團隊 iOS 高級開發工程師，主導特價版先後端一體化建設，應用於特價版首頁等導購場景，提高研發效率。

★  精華內容：

淘寶特價版爲了解決app自身的研發效率，用戶體驗問題，引入Flutter框架，並結合FaaS進行雲端一體化融合。一個開發者能夠在框架內順暢的完成前端+後端的開發，相對於傳統Native開發交付流程，節省一半以上的開發成本。

框架層面，咱們引入了MVVM的開發框架，進行先後端一體的融合。MVVM是先後端融合的一個總體，框架內儘量屏蔽業務不須要關心的細節，開發的同窗只須要做爲一個業務owner，關心自身的業務邏輯。這種新的開發方式能夠給各位一些Flutter應用上的拓展，瞭解利用Flutter+FaaS進行快速迭代的方式。

PPT：點擊此處下載

視頻：點擊此處觀看

6、基於 Flutter 的 Canvas 探索和應用

★  講師簡介：

萬紅波，花名遠湖，淘系技術部-跨平臺技術部，無線開發專家，主要從事瀏覽器內核以及渲染引擎方向的研究。在手淘 Android 端，首次引入 flutter 引擎，設計和實現了基於 Flutter 引擎的 canvas 模塊，服務小程序互動場景。

★  精華內容：

本議題主要分享了目前在小程序互動場景下遇到的業務痛點而且給出了咱們基於Flutter引擎的解法。基於Flutter引擎，咱們對外提供標準的Web Canvas API和渲染管線，讓業務代碼在小程序worker線程中直接渲染，縮短了渲染鏈路，提升了渲染性能。

同時咱們還提煉了專有Canvas渲染模式，運行時不啓動dart虛擬機，減小了引擎啓動時間和內存佔用，而且保證了原生的Flutter業務和小程序互動業務在引擎層面能夠相互兼容，下降了後期的維護成本。

Flutter引擎做爲一個在移動端能夠穩定提供高質量高性能的輕量級跨平臺圖形渲染引擎，將來能夠把其做爲一個堅實的底座，結合不一樣的業務場景來作不一樣的定製和探索，達到差別化效果，將來大有可爲。

PPT：點擊此處下載

視頻：點擊此處觀看

7、ICBU Flutter探索之路

★  講師簡介：

路少德，花名白及，ICBU Flutter架構師，將Flutter接入ICBU，設計實現ICBU的Flutter架構和基礎組件，實現和輸出ICBU的混合棧、多語言等能力，並推進ICBU無線技術部持續朝Flutter化演進。

★  精華內容：

本議題主要分享了ICBU在Flutter實踐中的實踐、思考和沉澱。總體分爲兩部分，第一部分經過業務背景和技術原理推導出接入Flutter的必要性和待解決的問題。 第二部分以接入工做中的混合工程和混合棧爲重點進行技術上的闡述。

針對目前世面上出現的多種多樣的移動跨端開發框架，咱們進行了詳細的總結，並在技術原理上進行了對比，最終推導出了Flutter的優點。同時又把廣大開發者的疑慮 - Apple對Flutter的態度進行了推導。最終得出了Flutter理想情況下是能夠取代Native開發的結論。

混合棧是Flutter混合開發必不可少的一環，我在這裏講解了混合棧的難點以及咱們解決問題的方案，並對比了Flutter官方、FlutterBoost和咱們方案的差別以及優缺點。但願能給各位開發者帶來一些新的思路和啓發。

PPT：點擊此處下載

視頻：點擊此處觀看

8、Flutter 在餓了麼的應用與沉澱

★   講師簡介：

李永光，花名雍光，蜂鳥大前端資深iOS工程師。4年深耕移動端，餓了麼最先的一批Flutter玩家，重點參與了Flutter在蜂鳥團隊的業務開發落地、工程架構演進。

★  精華內容：

Flutter做爲當前最火的跨平臺研發方案，它到底好在哪裏？餓了麼從18年下半年開始接觸Flutter，並在多個App大量落地Flutter業務。本次分享先介紹了餓了麼爲了」保質提效，賦能業務」，選擇Flutter做爲跨平臺研發方案的原因。包含了Flutter與native、rn/weex、H5研發方案各個維度的對比，以及對Flutter研發效率、頁面用戶體驗、應用前景的論證。相信能給你們帶來更多嘗試使用Flutter、以及把Flutter實際用於業務開發的信心和決心。

同時，議題也分享了Flutter在餓了麼應用與落地狀況，包含了上線的一些Flutter業務頁面的實際操做體驗；也包含了工程混合棧方案的實踐、分析和演進，工程研發/集成的兩種模式的業務團隊背景和實踐，指望能給你們帶來一些參考。最後分享了下Flutter業務最終在線上的質量狀況(Crash/FPS)，以及整個團隊的研發效率提高結果。

議題也介紹了餓了麼在Flutter應用過程當中的基礎建設和沉澱，包含了餓了麼在Aliflutter共建中貢獻的一些項目的基本流程圖，供你們參考；也介紹了爲了解決Channel使用上的痛點(雙邊硬編碼/單次調用/建立成本高)，實踐和產出的一個優雅的解決方案dna(消除native硬編碼/dart上下文調用native方法/無需建立Channel和Plugin)，指望在dart調用native能力時，給你們提供一種更加快捷、簡單、強大的選擇。

PPT：點擊此處下載

視頻：點擊此處觀看

今日閒聊：下期你更期待什麼內容，歡迎評論區刷起來~

看到最後，給橙子🍊點個贊鴨~

（橙子微信：TaoTech001）