你好，我是陳航，目前在美團外賣擔任商家業務大前端團隊技術負責人。在接下來三個月的時間里，我將和你一起學習 Flutter。 當下是移動互聯網的時代，也是大前端技術緊密整合的時代。而移動系統與終端設備的碎片化，讓我們一直頭痛于在不同平臺上開發和維護同一個產品的成本問題：使用原生方式來開發 App，不僅要求分別針對 iOS 和 Android 平臺，使用不同的語言實現同樣的產品功能，還要對不同的終端設備和不同的操作系統進行功能適配，并承擔由此帶來的測試維護升級工作。 這對中小型團隊而言無疑是非常大的負擔，也無形中拖慢了追求“小步快跑”，以快速應對市場變化的互聯網產品交付節奏。 為解決這一問題，各類打著“一套代碼，多端運行”口號的跨平臺開發方案，如雨后春筍般涌現，**React Native 就是其中的典型代表**。 React Native 希望開發者能夠在性能、展示、交互能力和迭代交付效率之間做到平衡。它在 Web 容器方案的基礎上，優化了加載、解析和渲染這三大過程，以相對簡單的方式支持了構建移動端頁面必要的 Web 標準，保證了便捷的前端開發體驗；并且在保留基本渲染能力的基礎上，用原生自帶的 UI 組件實現代替了核心的渲染引擎，從而保證了良好的渲染性能。 但是，由于 React Native 的技術方案所限，使用原生控件承載界面渲染，在犧牲了部分 Web 標準靈活性的同時，固然解決了不少性能問題，但也引入了新的問題：除開通過 JavaScript 虛擬機進行原生接口的調用，而帶來的通信低效不談，由于框架本身不負責渲染，而是由原生代理，因此我們還需要面對大量平臺相關的邏輯。 而隨著系統版本和 API 的變化，我們還需要處理不同平臺的原生控件渲染能力上的差異，修復各類怪異的 Bug，甚至還需要在原生系統上打各類補丁。 這都使 React Native 的跨平臺特性被大打折扣：要用好 React Native，除了掌握這個框架外，開發者還必須同時熟悉 iOS 和 Android 系統。這，無疑給開發者提出了更多挑戰，也是很多開發者們對 React Native 又愛又恨的原因。在這其中，也有一些團隊決定放棄 React Native 回歸原生開發，Airbnb 就是一個例子。 備注：2018 年，Airbnb 團隊在 Medium 上發布的一系列文章（[React Native at Airbnb](https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c)、[React Native at Airbnb: The Technology](https://medium.com/airbnb-engineering/react-native-at-airbnb-the-technology-dafd0b43838)、[Building a Cross-Platform Mobile Team](https://medium.com/airbnb-engineering/building-a-cross-platform-mobile-team-3e1837b40a88)、[Sunsetting React Native](https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a)、[What’s Next for Mobile at Airbnb](https://medium.com/airbnb-engineering/whats-next-for-mobile-at-airbnb-5e71618576ab)）詳細描述了這個過程。 **而我們本次課程的主角 Flutter，則完全不同于 React Native。** 它開辟了全新的思路，提供了一整套從底層渲染邏輯到上層開發語言的完整解決方案：視圖渲染完全閉環在其框架內部，不依賴于底層操作系統提供的任何組件，從根本上保證了視圖渲染在 Android 和 iOS 上的高度一致性；Flutter 的開發語言 Dart，是 Google 專門為（大）前端開發量身打造的專屬語言，借助于先進的工具鏈和編譯器，成為了少數同時支持 JIT 和 AOT 的語言之一，開發期調試效率高，發布期運行速度快、執行性能好，在代碼執行效率上可以媲美原生 App。而這與 React Native 所用的只能解釋執行的 JavaScript，又拉開了性能差距。 正是因為這些革命性的特點，Flutter 在正式版發布半年多的時間里，在 GitHub 上的 Star 就已經超過了 68,000，與已經發布 4 年多的、擁有 78,000 Star 的同行業領頭羊 React Native 的差距非常小。同時，阿里閑魚、今日頭條等知名商用案例的加持，更使得 Flutter 的熱度不斷攀升。 **現在看來，在 Google 的強力帶動下，Flutter 極有可能成為跨平臺開發領域的終極解決方案。**在過去的大半年時間里，我曾面試了 20 多位初、中、高級候選人，包括前端、Android、iOS 的開發者。當問到最近想學習什么新技術時，超過 80% 的候選人告訴我，他會學習或正在學習 Flutter。 不過坦白講，相比其他跨平臺技術，Flutter 的學習成本相對較高。我聽過很多（大）前端開發者反饋：Flutter 從語言到開發框架都是全新的，技術棧的積累也要從頭開始，學不動了。 **學習成本高，這也是目前大多數開發者猶豫是否要跟進這個框架的最重要原因。對此，我感同身受。** 但其實，大前端各個方向的工作有很多相似、相通之處。面對業務側日益增多的需求，作為大前端團隊的負責人，我曾在不同時期帶領團隊分別探索并大規模落地了以 React Native 和 Flutter 為代表的跨平臺方案，也是美團最早落地 Flutter 線上大規模應用的發起者和推動者之一。 在探索并大規模落地 Flutter 的過程中，我閱讀過大量關于 Flutter 的教程和技術博客，但我發現很多文章的學習門檻都比較高，而且過于重視應用層 API 各個參數的介紹或實現細節，導致很多從其他平臺轉來的開發者無從下手，只能依葫蘆畫瓢，卻不知道為什么要“畫瓢”，無法與自身的經驗串聯進而形成知識體系。這，無疑又增加了學習門檻，加長了學習周期。 那么，**Flutter 到底該怎么學？真的要從頭開始么？** 雖然 Flutter 是全新的跨平臺技術，但其背后的框架原理和底層設計思想，無論是底層渲染機制與事件處理方式，還是組件化解耦思路，亦或是工程化整體方法等，與原生 Android/iOS 開發并沒有本質區別，甚至還從 React Native 那里吸收了不少優秀的設計理念。就連 Flutter 所采用的 Dart 語言，關于信息表達和處理的方式，也有諸多其他優秀編程語言的影子。 因此，從本質上看，Flutter 并沒有開創新的概念。這也就意味著，如果我們在學習 Flutter 時，能夠深入進去搞懂它的原理、設計思路和通用理念，并與過往的開發經驗相結合，建立起屬于自己的知識體系抽象層次，而不是僅停留在應用層 API 的使用上，就擺脫了經驗與平臺的強綁定。 這樣的話，即使未來老框架不斷更新，或者出現新的解決方案，我們仍舊可以立于不敗之地。 那么，Flutter 框架底層有哪些關鍵技術？它們是如何高效運轉，以支撐起可以媲美原生應用的跨平臺方案的？Flutter 應用開發的最佳實踐是怎樣的？企業需要什么樣的終端技術人才？終端技術未來有哪些發展方向？ 這些問題，正是我要通過這個課程為你解答的。在這個課程里，我不僅會幫助你快速上手，能夠使用 Flutter 開發一款企業級 App，更希望幫助你將其與過往的開發經驗串聯起來，以建立起自己的知識體系；同時，希望你能透過現象明白 Flutter 框架的用法，并看到其背后的原理和設計理念。 為了幫助你領悟到 Flutter 的核心思想和關鍵技術，而不是陷入組件的 API 細節難以自拔，我會在不影響學習、理解的情況下，省去一些不影響核心功能的代碼和參數講解，著重為你剖析框架的核心知識點和背后原理，并與你分享一些常見問題的解決思路。 整體來說，專欄主要包括以下五大部分內容： * **Flutter 開發起步模塊**。我會從跨平臺方案發展歷史出發，與你介紹 Flutter 的誕生背景、基本原理，并帶你體驗一下 Flutter 代碼是如何在原生系統上運行的。 * **Dart 基礎模塊**。我會從 Dart 與其他編程語言的設計思想對比出發，與你講述 Dart 設計的關鍵思路以及獨有特性，并通過一個綜合案例帶你去實踐一下。 * **Flutter 基礎模塊**。我將通過 Flutter 與原生系統對應概念對比，與你講述 Flutter 獨有的概念和框架設計思路。學完這個模塊，你就可以開發出一個簡單的 App 了。 * **Flutter 進階模塊**。我會與你講述 Flutter 開發中的一些疑難問題、高級特性及其背后原理，幫助你在遇到問題時化被動為主動。 * **Flutter 綜合應用模塊**。我將和你聊聊在企業級應用迭代的生命周期中，如何從效率和質量這兩個維度出發，構建自己的 Flutter 開發體系。 最后，我希望通過這個課程，能夠幫助你快速上手 Flutter 開發應用，掌握其精髓，并引導你建立起屬于自己的終端知識體系。 現在，Flutter 正處于快速發展中，社區也非常活躍。站在未來看未來，盡管 Flutter 全平臺制霸的目標已經非常清晰，但為期三個月的專欄分享未必能窮盡 Flutter 未來可能的技術發展方向。接下來，我會持續關注 Flutter 包括移動端之外的最新變化，持續更新這個專欄，第一時間與你分享 Flutter 的那些事兒。 好了，今天的內容就到這里了。如果可以的話，還請你在留言區中做個自我介紹，和我聊聊你目前的工作、學習情況，以及你在學習或者使用 Flutter 時遇到的問題，這樣我們可以彼此了解，也方便我在后面針對性地給你講解。 加油，讓我們突破自己的瓶頸，保持學習、保持冷靜、保持成長。