天天看點

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

作者|AliFlutter 系列全體講師

出品|阿裡巴巴新零售淘系技術部

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

本系列直播我們榮幸的邀請到 八 位來自阿裡技術專家,為開發者們分享 Flutter 在集團内的應用于建設,是不是收獲滿滿呢?

橙子君也為大家整理了,精華内容、視訊回放,以及PPT内容,要不要這麼貼心,不閑聊了,大家往下看吧!關于AliFlutter 在集團上的應用,大家可以參考文章

《必看|阿裡集團内如何進行Flutter體系化建設?》

一、AliFlutter用戶端研發體系概覽

★ 講師簡介:

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

負責了Flutter在閑魚中的混合開發體系建設與業務落地,做了一系列相關技術方案。在Flutter原理與應用、多端一體化程式設計方面有豐富的實踐經驗。

目前專注于以Flutter為核心的多端多平台研發模式的探索與實踐。

★ 精華内容:

本主題從Flutter的原理出發,介紹了為什麼我們要在Alibaba采用Flutter來研發業務。這裡面包括高性能下的使用者體驗,開發效率高和跨端一緻性帶來的研發效率提升,多端多平台的良好支援帶來的異構場景下豐富的拓展空間,以及豐富表達力下富互動遊戲化等場景的創新體驗。

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

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

就AliFlutter來看,我們在基礎設施上主要支援了自定義倉庫,讓内部開發者可以有效共享和複用各自的工作,支援了自定義引擎服務,打通了從引擎定制到多系統建構,上傳到使用的全鍊路支援,對于使用者而言基本無感;我們在持續內建平台上支援了标準Flutter應用建構和子產品形式的産物建構,減少了開發者的使用成本;我們也在引擎大小優化,包大小優化,記憶體優化,啟動時間優化等方面做了不少的深入性的工作,解決了業務方落地的問題。在生态架構層面,我們開發了混合棧管理、狀态管理、動态化UI、AOP架構等内容,豐富了Flutter生态,創造了諸多業務價值。不僅如此,我們還在Flutter Canvas等場景下去拓展Flutter的可能性與價值,取得了不錯的效果。

面向未來,我們也正在跨端能力、互動能力、研發效率、傳遞效率等次元去改進Flutter在多樣化場景下的表現,讓Flutter不僅僅是一個SDK,更是一個大有可為的研發模式。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

PPT:

點選下載下傳

視訊:

點選觀看

二、閑魚研發架構應用和探索

★ 作者簡介:

梁治峰,花名玄川,閑魚買家鍊路用戶端負責人,主導閑魚flutter化的落地和研發架構演進。

本議題主要分享了閑魚在flutter中研發架構應用和探索,從分别從三個方向介紹Flutter一體化研發模式、Flutter動态化能力、Flutter互動能力。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

Flutter-DX核心是解決Flutter UI動态表達的問題,通過集團DinamicX的DSL的下發,實作Flutter端的動态化模闆渲染。并通過一年多的疊代逐漸解決了渲染性能與渲染一緻性問題,較好的賦能了Flutter業務的元件動态化能力。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

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

三、AliFlutter圖檔解決方案與優化

★ 作者簡介:

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

本議題介紹了AliFlutter提供的适合混合應用的外接圖檔庫方案。首先,對Flutter官方原生方案進行的分析,并提出了AliFlutter方案的切入點。在與官方完全相容的體系内,AliFlutter方案提供了圖檔的CDN參數能力,本地檔案、記憶體圖檔的緩存,以及諸多的優化措施。相比原生方案,在電商的多圖場景,可以提供更優的記憶體和CPU占用。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

同時,針對Flutter的List元件,AliFlutter方案提出并實作了一種優化手段。将原本以Cell為機關進行回收,細化為以每張圖檔為機關進行回收。在電商卡片,圖文詳情等複雜場景,可以根據圖檔是否離屏來進行紋理記憶體資源的回收。大幅降低了一些場景下記憶體的飙高現象,提升了應用的穩定性。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

Flutter與Native混合開發将是接下來很長時間的主流開發方式。一套穩定、高效、與官方體系無縫融合的外接圖檔緩存方案是必不可少的。但每個應用有自己的場景和使用者特點,應用開發者還是應該根據應用的特點和需求選擇方案。

四、UC Flutter技術實踐分享

★ 講師簡介:

劉森森,花名森尼,14年加入UC,在阿裡度過了五年陳。長期在UC資訊流團隊負責資訊流業務的技術工作,近一年投入到創新産品的研發中,負責flutter技術在創新産品的應用與實踐。

UC在19年開始探索Flutter技術,并在同年年底進行規模化的落地。除了已經釋出的app外,一些正在做的創新産品也在使用flutter技術。

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

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

規模化落地flutter核心要解決的三類問題分别是工程建構體系的搭建,性能優化和動态性支援。UC在工程建構體系中圍繞着高效率的目标,從三個架構視角來進行拆分,提供了高效且可複用的工程解決方案。性能優化中搭建了flutter高可用體系,優化引擎性能,并使用高性能外接紋理方案優化視訊和圖檔的場景。動态方案也有一些亮點,能給到大家不同的看問題的視角。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

UC高可用是在閑魚高可用元件的基礎上擴充了性能名額,支援了原生navigator。并且結合了UC的拳頭級産品itrace監控平台(嶽鷹,對外連結

https://yueying.effirst.com/index)

,提供了更加實時,更加便捷的高可用監控方案。這套flutter高可用方案我們也有對外開放計劃,敬請期待。

五、淘寶特價版 Flutter 實踐

★ 講師簡介:

李彬,花名潇俠,特價版開發團隊 iOS 進階開發工程師,主導特價版前後端一體化建設,應用于特價版首頁等導購場景,提升研發效率。

淘寶特價版為了解決app自身的研發效率,使用者體驗問題,引入Flutter架構,并結合FaaS進行雲端一體化融合。一個開發者可以在架構内順暢的完成前端+後端的開發,相對于傳統Native開發傳遞流程,節省一半以上的開發成本。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

架構層面,我們引入了MVVM的開發架構,進行前後端一體的融合。MVVM是前後端融合的一個整體,架構内盡可能屏蔽業務不需要關心的細節,開發的同學隻需要作為一個業務owner,關心自身的業務邏輯。這種新的開發方式可以給各位一些Flutter應用上的拓展,了解利用Flutter+FaaS進行快速疊代的方式。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

六、基于 Flutter 的 Canvas 探索和應用

萬紅波,花名遠湖,淘系技術部-跨平台技術部,無線開發專家,主要從事浏覽器核心以及渲染引擎方向的研究。在手淘 Android 端,首次引入 flutter 引擎,設計和實作了基于 Flutter 引擎的 canvas 子產品,服務小程式互動場景。

本議題主要分享了目前在小程式互動場景下遇到的業務痛點并且給出了我們基于Flutter引擎的解法。基于Flutter引擎,我們對外提供标準的Web Canvas API和渲染管線,讓業務代碼在小程式worker線程中直接渲染,縮短了渲染鍊路,提高了渲染性能。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

同時我們還提煉了專有Canvas渲染模式,運作時不啟動dart虛拟機,減少了引擎啟動時間和記憶體占用,并且保證了原生的Flutter業務和小程式互動業務在引擎層面可以互相相容,降低了後期的維護成本。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

Flutter引擎作為一個在移動端可以穩定提供高品質高性能的輕量級跨平台圖形渲染引擎,未來可以把其作為一個堅實的底座,結合不同的業務場景來做不同的定制和探索,達到差異化效果,未來大有可為。

七、ICBU Flutter探索之路

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

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

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

針對目前世面上出現的多種多樣的移動跨端開發架構,我們進行了詳細的總結,并在技術原理上進行了對比,最終推導出了Flutter的優勢。同時又把廣大開發者的疑慮 - Apple對Flutter的态度進行了推導。最終得出了Flutter理想狀況下是可以取代Native開發的結論。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱
幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

混合棧是Flutter混合開發必不可少的一環,我在這裡講解了混合棧的難點以及我們解決問題的方案,并對比了Flutter官方、FlutterBoost和我們方案的差異以及優缺點。希望能給各位開發者帶來一些新的思路和啟發。

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

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

Flutter作為目前最火的跨平台研發方案,它到底好在哪裡?餓了麼從18年下半年開始接觸Flutter,并在多個App大量落地Flutter業務。本次分享先介紹了餓了麼為了”保質提效,賦能業務”,選擇Flutter作為跨平台研發方案的緣由。包含了Flutter與native、rn/weex、H5研發方案各個次元的對比,以及對Flutter研發效率、頁面使用者體驗、應用前景的論證。相信能給大家帶來更多嘗試使用Flutter、以及把Flutter實際用于業務開發的信心和決心。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱
幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

同時,議題也分享了Flutter在餓了麼應用與落地情況,包含了上線的一些Flutter業務頁面的實際操作體驗;也包含了工程混合棧方案的實踐、分析和演進,工程研發/內建的兩種模式的業務團隊背景和實踐,期望能給大家帶來一些參考。最後分享了下Flutter業務最終線上上的品質情況(Crash/FPS),以及整個團隊的研發效率提升結果。

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

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

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱

今日閑聊:下期你更期待什麼内容,歡迎評論區刷起來~

關注「淘系技術」微信公衆号,一個有溫度有内容的技術社群~

幹貨|AliFlutter專屬月,八場直播精華内容來啦一、AliFlutter用戶端研發體系概覽二、閑魚研發架構應用和探索三、AliFlutter圖檔解決方案與優化四、UC Flutter技術實踐分享五、淘寶特價版 Flutter 實踐六、基于 Flutter 的 Canvas 探索和應用七、ICBU Flutter探索之路八、Flutter 在餓了麼的應用與沉澱