Flutter 這兩年的熱度不斷提升，行業内投入建設 Flutter 的公司也越來越多，有很明顯的上升趨勢。
作為一個技術架構，Flutter 該有的功能都有了，但要把它應用到業務中去，還得解決工程問題、複用已有的技術積累、融入業務的工作流等，還要針對特定的業務場景做增強和擴充。是以，我們的核心目标是把 Flutter 從一個單點的技術架構，打造成完整的企業級解決方案。
消息通知
九月淘系技術重磅推出「淘系Flutter體系化建設原理&實戰系列直播」6場直播，為您帶來一線實戰經驗，文末報名！
Flutter社群發展情況
在官方四月底的統計資料中，自釋出以來的 16 個月内，已有 200 萬開發者使用 Flutter，三月份的時候也有 10% 的增長，Google Play Store 中釋出的 Flutter 應用約有 5 萬個，僅在2020年4月就有近 1 萬個應用上傳。開發者所在的團隊，初創公司最多，占了 35%，26%是企業開發者，19%是獨立開發者，還有7%的設計機構。
Flutter 使用者數量排名前五的地區是印度、中國、美國、歐盟和巴西。很神奇，國内開發者對 Flutter 的熱情比出生地美國還要高。從各種公開資訊來看，頭條、微信、QQ、美團、抖音、快手都對 Flutter 保持的密切的關注，而且已經不是小規模嘗試了，有些公司已經鋪開準備大規模建設了。
簡單來講，Flutter 的發展勢頭越來越猛，國内大公司都在建設，Flutter 更受新興業務的青睐。
阿裡淘系的業務背景
淘系業務面臨較大的競争壓力，整個移動網際網路的競争也越來越激烈，為了吸引并留住使用者，對産品的性能、使用體驗和疊代效率都有更高的要求，像直播/短視訊/沉浸式互動/AR//3D 等新互動形式可以明顯的提高業務競争力，這些技術基本上都是原生能力，是以需要一個和原生技術結合度好，而且又能避免寫重複代碼的技術方案。Flutter 比較符合這個定位。
除了淘寶 App 本身，還有一系列淘系應用，如閑魚、淘寶特價版、直播App、躺平等新興應用不斷出現，整個阿裡已經有 30+ App 在使用或者在嘗試 Flutter 了，為了減少重複建設，需要沉澱出通用的技術能力，站在現存的技術積累之上，打造出完整的技術體系。
阿裡在 Flutter 的技術積累
手淘從 Flutter 剛誕生以來就對它保持關注，2018 年開始就持續做技術探索，去年啟動了 AliFlutter 的項目，希望可以拉通阿裡内部 Flutter 相關的技術積累，有了一些初步的成果。
▐ 基礎設施建設
首先标準化了 Flutter 的工程建構。有統一的代碼倉庫來管理 Flutter 的源碼，有專門的更新發版節奏，確定可以跟進官方的疊代。用戶端打包的環境配置比較複雜，還要和阿裡自身的開發環境做融合，這些功能已經形成了平台和工具，也開放了部分功能讓大家可以定制和擴充自己的引擎。
另外還提供了阿裡内部的 pub 庫實作包管理，類似前端的 npm，讓 Flutter、Dart 的通用功能庫有地方可以承接。
而且還與手淘的基礎設施做了緊密結合。對接了内部的摩天輪（MTL）打包平台、性能穩定性監控的高可用平台，手淘基礎的圖檔庫、網絡庫、日志、埋點和一部分基礎中間件。Flutter 的開發、測試、打包、內建、釋出、運維監控等功能，都融入了用戶端開發本身的工作流中。
完善 Flutter 的基礎設施是後續所有工作的基礎，讓 Flutter 開發不再處于刀耕火種的工作環境。
▐ 核心增強與擴充
把 Flutter 落地到業務的過程，也不是一帆風順的。性能倒不是瓶頸，但是包體積太大、記憶體占用高是經常遇到的問題，是以去年有一部分精力花在 Flutter Engine 本身的優化上，分析二進制産物的包結構，壓縮 Flutter Engine 和 Dart AOT 編譯産物的大小。分析 DartVM 的記憶體管理機制和 snapshot 功能，不斷優化記憶體。而且有針對性的對圖檔庫的記憶體、Engine 的啟動流程做了優化。
在圖形化方面，Flutter Engine 提供了一套相容性和性能都比較好的圖形接口，而且跨平台一緻。是以基于 Flutter Engine 封裝了 2D Canvas API 透出到 JS 環境，性能和穩定性相比之前的技術都有大幅提升。而且對接到了淘寶小程式的容器環境，支撐互動類的業務。
▐ 資訊互通
在阿裡内部建立了 AliFlutter 資訊互通的虛拟組織，淘寶、閑魚、特價版、飛豬、盒馬、UC、釘釘、CBU/ICBU、優酷、本地生活、搜尋、天貓精靈等 BU 都有接口人在參與，定期開會同步資訊，避免出現重複建設。
另外在社群我們和 Google 官方團隊也保持着聯系，定期開語音會議。這個合作關系建立之後，在社群也可以混個臉熟，我們提的 issue 和 PR 說不定會被優先處理~
▐ 技術探索和實踐
我們團隊積累了 15+ 高品質的技術文章分享在内部的技術論壇，在原理分析、性能優化、應用和實踐這三個大類裡，分析 DartVM 的原理以及背後的 GC 和 Snapshot 機制，研究 Flutter 的渲染管線，思考 Web 生态和 Flutter 對接的方案，優化 Flutter Engine 的啟動時間和包大小，解決實際業務中圖檔庫接入、長清單記憶體占用高等問題。
阿裡Flutter體系化建設 閑魚Flutter一體化演進之路 Flutter Widget 和 CSS布局原理PK Flutter 和 Web 生态對接 Flutter渲染引擎深入分析 在Flutter體系中對接手淘圖檔庫 細化 Flutter List 記憶體回收，解決大 Cell 問題 Flutter瀑布流及通用清單解決方案目前待解決的問題
下圖左側是 Flutter 官方做過一次問卷調查，評選出了開發者實際開發過程中最關心的問題。
前六項任務摘錄出來如下：
這是面向所有社群開發者的問卷，我們在實際業務中遇到的問題也類似，總結下來主要是對開發效率、調試測試、解決方案、功能複用的訴求比較強烈。說明 Flutter 作為一個新興的研發模式，在工程、工具方面做得還不夠成熟，生态還不夠繁榮，尤其是貼合業務場景的解決方案比較少。
這些問題是我們下一步的工作重點，從實際的業務痛點出發，不斷完善 Flutter 的核心能力和平台支撐，在保障産品品質和體驗的同時，提升業務的傳遞效率。
總結與未來規劃：Unicorn 獨角獸
用「獨角獸」項目孵化更多「獨角獸」。快速疊代，野蠻增長！
▐ 解題思路
前面介紹了，這個項目的核心目标是：
在業務視角，完善 Flutter 的研發模式和平台支撐，在保障産品品質和體驗的同時，提升業務的傳遞效率。
在技術視角，建設産品化的 Flutter 技術體系，将一個單點的技術架構，打造成完整的企業級解決方案。
為了實作上面的目标，我們從四個層面做建設，最下面是對 Flutter 本身核心的增強，然後再向上提供一站式的研發平台提升業務的疊代效率，同時也提供産品化的服務保障整個項目可持續疊代，最上面是業務支撐，解決在業務落地過程中實際遇到的問題。
這個項目并沒有推翻任何積累，沒有造新輪子，而是用更加體系化的方式，梳理在做的關于 Flutter 的事情，做一個整體規劃，并且和集團内所有做 Flutter 技術的團隊保持資訊同步，以開放的心态做技術，技術成果互通互享。
▐ 整體規劃
順着上面的思路，把各項内容展開來看，是這個樣子的：
整個項目是在之前的技術積累上進一步做建設，首要原則是降低對 Flutter 本身技術的侵入性，確定架構可持續疊代。因為 Flutter 還是一個快速疊代的技術，一旦開始分化，再跟進官方的進展就很難了，前期接入的業務就會成為曆史包袱，要極力避免這種情況。
電商系的業務場景很複雜，不同場景的技術訴求也不一樣，是以架構上要做到可靈活擴充，讓垂直類的能力可以快速接進來，實作差異化。另外為了降低業務的使用成本，要保證功能的開箱即用，優化開發體驗。
關于演進路線，Flutter 本身的技術特點也比較适合曆史包袱比較少的新興業務，是以優先考慮的是新型 App 和垂直類的業務，然後再推廣到正常業務中。從技術角度是自底向上做建設，首先保障底盤的穩定性，而不是上來就搭花架子。對接好基礎設施之後，下一步是為業務提效，然後再做擴充和對接，最後沉澱出靠譜的技術方案回饋社群。
▐ 基礎能力增強
基礎能力的建設和可以分為三層：
應用層：這部分主要解決在業務實踐過程中遇到的問題，提供解決方案。閑魚是 Flutter 的技術先驅，在應用層有很多積累，比如 Boost(混合棧) 和 Candy(遊戲化開發)，除此之外我們還有正在做 DX Flutter 容器(模闆化/動态化渲染)，卡片級嵌入(multi-window) 等技術方案。
引擎層：這部分逐漸走向技術的深水區，分别在啟動鍊路、AOT 編譯、DartVM、渲染管線、圖形化/光栅化等領域做優化和增強，在業務無感的情況下，提升核心的性能和穩定性。
對接層：這部分工作大部分已經完成，繼續查漏補缺，不斷完善使用體驗。
▐ 一站式研發平台
回顧前面列的 Flutter 還存在的問題，大部分在于工程鍊路和生态不夠成熟，這是業務使用 Flutter 時遇到的最大阻力。這部分帶有業務屬性的工作 Google 官方不會為你做，必須要企業自己來做。是以除了完善 Flutter 基礎能力之外，面向業務場景，還要有全鍊路的平台和工具支撐，才能真正提升業務的疊代效率。
基于手淘首頁在用的模闆化的架構實作部分 UI 的動态化，加上 Flutter 的跨平台渲染能力，再結合 GAIA 端雲一體化的研發模式，形成一個完整的研發閉環，從開發者視角整理工作流，用一個平台提供所有能力。目标是降低 Flutter 在業務中的使用成本，讓開發者可以在 60 分鐘内完成 App 首次接入，30 分鐘内就可以開始寫第一行代碼。
▐ 業務支撐
整個項目首先支撐的是淘系 1+X 的 App，貼身解決業務遇到的實際問題。另一方面也會做一些産品化的事情，把可複用的技術方案沉澱下來，有地方承接和展示，而且會貢獻代碼和方案到社群，提升大家在公司内外的技術影響力。
▐ 産品化
整個技術産品的邏輯是 Cycle + Core，即「研發閉環」+「跨平台核心」。
跨平台核心是對 Flutter 本身的 Framework 和 Engine 持續做增強，保持和官方版本的同步，盡量将通用的代碼合回官方倉庫。研發閉環是根據目前的業務環境、結合已有的技術積累、提供平台支撐，把功能做得完備，而且好用。
核，深入研究引擎技術；環，不斷提高疊代效率。
▐ 技術細節
前面是概述，其中幾項具體的技術我可以簡單介紹一下。
工程和效率
在真正的業務實踐裡，很少把一整個 App 都用 Flutter，基本上都是把 Flutter 當成一個子產品引入，在開發和調試 時還依賴自身的各種庫，如網絡、圖檔、安全認證等。而 Flutter 的工具鍊是要基于殼工程來打包和調試的，很多情況下，在殼工程裡沒法實作完整的業務邏輯。
是以我們在 Flutter 工具鍊基礎上提供了掃碼開發的能力，直接使用完整的 App，如淘寶特價版，掃碼連接配接本地環境，修改代碼後可以實時在真機上預覽實際效果。
除了對本地開發環境的增強，我們也在考慮和雲平台的關聯，借助 FaaS 的支援，實作在一個工程裡、一套技術棧開發完整的應用邏輯。
模闆化開發
Flutter 的動态化能力一直是比較弱的，然而電商系的應用對動态化有強訴求，在淘寶 App 首頁和核心交易鍊路裡使用到了一個模闆化的渲染架構 DinamicX，可以動态下發模闆來驅動頁面渲染，使用到的元件以及綁定的業務邏輯是原生語言開發的，如 Java 和 Objective-C，不支援 JS 等依賴腳本引擎的語言，這樣性能更好，稽核風險更低。
我們正在把這一套成熟的模闆化的渲染協定遷移到 Flutter 上來，既不破壞 Flutter 頁面本身的性能體驗，也在一定程度上提供了動态化的能力。
**多 FlutterView 嵌入
**
在 Flutter 頁面的某個區塊使用原生元件可以用 PlatformView，還有一種情況是，在原生渲染的頁面裡，某一個區塊是用 Flutter 實作的。也就是說，不拿 Flutter 寫一個完整的頁面，而是寫一個（或多個）元件嵌入到原生頁面中，這項能力在真實的業務場景中也是有訴求的。
Flutter 倉庫的 issue 裡也有人提出了 multi-window API 的需求，我們也在評估各種實作方案，關鍵問題是要不要在多個視窗間複用同一個 Engine 執行個體，以及如何管理多個 Scene 等。這方面我們也在開源社群裡讨論技術方案，及時跟進這項功能的實作。
業務實踐
閑魚是使用 Flutter 技術的先驅，積累了比較豐富的實踐經驗，淘寶特價版也在大範圍的使用 Flutter，期待業務開發者們給大家介紹更豐富的細節吧。
如果上面這些資料看得還是不夠過瘾，不用着急，我們接下來會安排多場直播，給大家詳細介紹其中的細節。
直播的主題還是圍繞着我們的産品邏輯，介紹各個子產品所做的工作，更多的是實踐類的經驗，希望對大家有幫助~
手淘用戶端-小程式與跨平台技術團隊
歡迎大家加入手淘用戶端-小程式與跨平台技術團隊！
我們是廣泛支撐淘系業務的基礎團隊，團隊正在維護的有手淘 H5 容器、Weex、淘寶小程式容器、淘寶首頁都在用的動态化模闆容器、還有正在做的 Flutter ！淘系的基礎架構、中間件、平台支撐是隔壁的兄弟團隊，這裡有豐富的業務場景和技術生态，機會與挑戰并存，歡迎優秀的小夥伴加入，一起為新零售業務打造穩定的底盤！履歷投遞：[email protected]
關注「淘系技術」微信公衆号，一個有溫度有内容的技術社群~