從ReactNative到Flutter：跨平臺技術的黃金時代與七年之癢
零、黎明的前夜
2007年，蘋果公司推出了第一代 iPhone，其搭載的 iPhone OS1.0 即是日後 iOS 系統 的前身。次年，谷歌也推出了其醞釀已久的智慧手機作業系統 Android 1.0。也就是在這一 年的 8 月，PhoneGap 誕生了。PhoneGap 誕生的原因是一名程式設計師認為 Object-C 的語法過於生硬晦澀，而 Web 技 術已經在 PC 端取得了巨大成功，JavaScrpit 也擁有更多的開發者和社群資源，於是 PhoneGap 就這樣應運而生。
雖然 PhoneGap 的初衷只是“為跨越 Web 技術和 iPhone 之間 的鴻溝牽線搭橋”，但是正如 Web 瀏覽器實現了 PC 端的跨平臺一樣，可以說 PhoneGap 為日後的跨平臺技術開創了先河。在接下來的十多年裡，隨著移動網際網路的高速普及，移動端跨平臺技術也迎來了自己的黃金時代。
接下來，就跟隨筆者的文字，一起回憶這段波瀾壯闊的歷史。
一、跨平臺技術的黃金時代
2015~2018：ReactNative橫空出世
圖：2015年，Tom Occhino為大家介紹ReactNative
2015年的1月，位於加利福尼亞州的門洛帕克(Menlo Park)春風和煦，Fackbook在此召開了React.js Conf。這個大會本該是前端開發者的盛宴，但這一年徹底火出圈了，因為ReactNative（下稱RN），這個從2013年開始在Facebook內部孵化的專案終於宣佈對外開源。RN的出現用橫空出世來形容是毫不過分的，至少有兩個顯而易見的趨勢在當時呼之欲出：
-
客戶端的跨平臺思路終於走出了Hybrid(Web和Naitve混合)的漫漫長夜，能夠同時滿足 一次開發多端執行 和 高幀率渲染 的終極解決方案似乎就在眼前。
-
前端觸角終於伸向了Web容器之外的領域，Atwood定律（“任何可以使用JavaScript來編寫的應用，終將由JavaScript編寫”.）似乎又一次得到了驗證。
跨平臺的黃金時代從這一年開始了，然而，七年之癢也從這一年開始了。
2018年，RN的危機開始爆發，最為標誌性的事件莫過於Airbnb、Udacity等知名公司相繼棄用RN。其核心原因集中在兩點：
-
對於一個並非完全用RN開發的應用，需要存在大量的JavaScript和Java、OC橋接的程式碼
-
Andriod、iOS的Native渲染本身就存在差異，RN的開發者需要關注並考慮這種差異
此外，JavaScript的執行效率在低端機也存在明顯的瓶頸，等等。RN的開發團隊也深知其種種侷限性，於是在同一年宣佈對RN實施大規模重構。
值得一提的是，在那個RN橫空出世的2015年的平行時空裡，一位名叫 Eric Seidel 的 Google 工程師在同年的 Dart 開發者峰會上演示了一個基於代號為 Sky 的框架開發的 App，這在當時 並未引起多少人的注意。
2018~2021：Flutter繼往開來
不知是歷史的巧合還是有意而為之，在3年後的2018年，曾經獨領風騷RN開始了回爐重造，而曾經的 Sky 專案早已改頭換面，並在年底釋出了1.0的穩定版本，名為 Flutter。
圖：2015年，Eric Seidel為大家介紹Sky
是的，巨人Google從Facebook手中拿走了黃金時代的接力棒，並直接將跨平臺技術帶到了第三個階段：自渲染。
前面提到，RN使用Native的原生元件，其渲染的效果和效能自然無法徹底擺脫平臺的束縛，而Flutter則採用了徹底的自渲染模式，Flutter Engine更像是一個精簡過的、專門為移動端介面而生的微型瀏覽器核心，在徹底擺脫了平臺束縛的同時保證了足夠的效率。
另一方，由於JavaScript在移動端的表現不盡如人意，Flutter就直接使用了Dart作為自己的開發語言，除了具備各種現代語言特性，Dart能夠同時支援JIT（除錯階段熱過載）和AOT（釋出階段極致執行效能）的特性完美契合了一個客戶端UI框架的訴求。
無論是UI的渲染方式還是邏輯的執行方式，Flutter都做了大膽的創新，在RN逐步顯現侷限性的2018年，Flutter繼往開來，幾年來生態欣欣向榮，已經發布了2.8的穩定版本，Github的Star數也一路飆升。
圖：RN、Flutter等跨平臺框架的star數
二、跨平臺技術的七年之癢
無論是RN還是Flutter，在技術領域，他們的推陳出新、自我迭代，都是有目共睹。然而，技術終究要服務於業務，經過10多年的發展，移動網際網路已經進入存量時代，跨平臺技術理想的試驗場是從0開始的新App，然而國內的各個垂直領域已經被瓜分殆盡，最近幾年已經沒有一款DAU過億的App出現，跨平臺技術就像困在籠中的野獸，縱有千般美好的藍圖，也要解決各種現實的問題：如何與存量的Native邏輯完美融合。比如:
-
混合路由問題：Flutter頁面如何與Native頁面互通
-
檢視複用問題：Flutter頁面如何複用WebView、地圖這種難以改造成Flutter元件的平臺元件
-
基礎設施問題：Flutter的幀率如何統計、Crash如何監控、記憶體如何監控
-
配套生態問題：Flutter的列表是否滿足國內各種產品的奇思妙想，等等
-
動態下發問題：Flutter頁面如何動態下發而不受限於發版
以上問題，非以一人之力可以解決，國內的各個大廠也在逐點發力。但是，為了更好的理解這些問題，乃至成為解決這些問題的一員，對於Flutter底層原始碼的瞭解可謂不可或缺。可惜的是，由於Flutter的出現不過幾年，網路上相關的文章也多以問題驅動為主，對於底層進行的剖析文章往往零碎而難成體系。如今，非同步圖書出版的《Flutter核心原始碼剖析》則正好彌補了這一領域的空白。
從Flutter開發者耳熟能詳的三棵樹（實際還有一棵Layer Tree）的渲染，到Flutter Engine的底層邏輯、貫穿每一幀的渲染管道，該書都做了剖析。如果想在Flutter的世界裡更進一步，強烈推薦跟隨該書的脈絡，一窺Flutter世界的底層邏輯。
