React Native 簡史

誕生

React Native 誕生於 2013 年的 Facebook 內部黑客馬拉松（hackathon）：

In the essence of Facebook’s hacker culture, React Native started as a hackathon project in the summer of 2013.

（摘自 In the beginning: React Native’s roots）

從 React 說起

隨著 React 的大規模應用，Facebook 越發感受到 React 以及 Web 技術的優勢，希望 Native 開發也能像 Web 一樣 Move fast：

快速迭代（Rapid iteration cycle）：Web 一天兩版，產品迭代週期更短
快速回饋（Immediate testing feedback）：Web 發佈立即觸達用戶，A/B test 等實驗結果立等可取，產品演進更快
快速開發（Rapid development velocity）：刷新瀏覽器即可生效，不必等待重新編譯 App

為了達成這個目的，Facebook 嘗試了 3 種方案：

WebView：由 Native 提供 WebView 容器，業務用 Web 技術來開發。優勢在於能把 Web 開發體驗一鍋端走，但受限於 Web 技術，體驗無法與 Native 相提並論，最終因性能和擴展性沒有達到預期而作罷
Porting React to native：把 React 移植到 Native 實現，一個瘋狂的想法。在 2015 年完成了 iOS 版（ComponentKit），並在 2017 年推出了 Android 版（Litho）。以此讓 Native 開發也能具備 React 的種種優勢，如 UI 可預測性、Flexbox 佈局等。但無法滿足提升開發效率的初衷，一點變動仍要重新編譯，另一方面，這一套與 Web React 並不互通，無法利用 Web 生態中建立在 React 之上的利器（如 Relay）
Scripting native：透過 JavaScript 呼叫 Native API。既能擁有 Web 開發的快速迭代能力，還不侷限於 Web 技術，同時也沒有脫離 JavaScript 生態，似乎是個完美的方案

而 React Native，就是第三種方案的最終成果

2015

React.js Conf Round-up 2015：首次介紹 React Native，演講影片見 React.js Conf 2015 Keynote - Introducing React Native、React.js Conf 2015 Keynote 2 - A Deep Dive into React Native
F8 2015: New Open Source Tools for Mobile Developers：發佈 React Native 並開源，演講影片見 F8 2015 - React Native & Relay: Bringing Modern Web Techniques to Mobile
React Native: Bringing modern web techniques to mobile：發佈第一篇官方介紹，此時僅支援 iOS
React Native for Android: How we built the first cross-platform React Native app：宣布 React Native 支援 Android 了

2015 年 1 月的 React.js Conf 上，這個內部項目首次公布，並在 5 月的 F8 Conference 上正式開源

最初只支援 iOS，同年 9 月支援了 Android

2016

Introducing Hot Reloading：支援 Hot Reloading
Dive into React Native performance：性能全面提升
React Native on the Universal Windows Platform：進入 Windows 生態
Samsung Committed to Bringing React Native to Tizen：進入三星物聯網生態（Tizen 系統）
Right-to-Left Layout Support For React Native Apps：支援 RTL 佈局
0.36: Headless JS, the Keyboard API, & more：發佈 0.36，支援後台任務、鍵盤操作等
Introducing Button, Faster Installs with Yarn, and a Public Roadmap：發佈 0.37，新增 <Button /> 元件及 Yarn 支援
Easier Upgrades Thanks to Git：簡化版本升級操作

Microsoft UWP 和 Samsung Tizen 的支援，意味著 React Native 從行動端走向了 PC（Win 10）、遊戲機（Xbox One）、手環（Gear Fit 2）、智慧電視（SUHD）甚至全像眼鏡（HoloLens）

此外，開發體驗、性能、 API 能力等都在快速迭代中不斷提升

2017

A Monthly Release Cadence: Releasing December and January RC：計劃按月發版
Using Native Driver for Animated：動畫性能及易用性進一步提升
Better List Views in React Native：對 List View 提供更友好的支援
Introducing Create React Native App：推出官方腳手架 Create React Native App
React Native Monthly #1：與 Airbnb、Microsoft 等 8 個團隊定期召開月會，持續了半年
React Native Performance in Marketplace：介紹 Facebook 在其 React Native 主應用（Marketplace）上的性能實踐

建立了月度迭代計劃，以及定期召開包括社群團隊在內的月會。性能仍然是一個重要方向，動畫、 List View 等重要更新都涉及性能優化

另外，還開始了 編譯時的性能優化探索，如 Prepack，期望大幅削減 React Native core 的初始化耗時：

We plan to bring the cost of the React Native bridge close to zero via projects like Prepack and more build time processing.

2018

Implementing Twitter’s App Loading Animation in React Native：用於 Twitter Loading 動畫
Using AWS with React Native：配合 Amazon 雲計算生態
Building For React Native：支援 InputAccessoryView
Using TypeScript with React Native：社群提供 TypeScript 支援
State of React Native 2018：React Native 在 Facebook 內外廣泛使用，核心團隊開始架構升級
Releasing 0.56：發佈 0.56，升級 Babel、Android SDK、Xcode、Flow 等依賴版本
Introducing new iOS WebViews：iOS 切換至 WKWebView
Open Source Roadmap：計劃精簡核心模組，並開源 Facebook 內部的一些基建
The State of the React Native Community in 2018：建立開源社群管理規範

為了更好地支援 Native & React Native 混合 App，核心團隊啟動了 架構升級計劃（Fabric），包括重構執行緒模型、支援 React 非同步渲染能力、簡化 React Native core 等大改。同時，Facebook 也計劃開源包括 JSI 在內的一些基礎設施，具體見 Open Sourcing Internals and Updated Tooling

另一方面，開源社群的管理也走向正規化，包括版本管理、 RFC 、交流討論等

2019

Releasing React Native 0.59：發佈 0.59，支援 React Hooks，升級 Android JSC ，核心模組精簡計劃持續進行
Mobile Innovation with React Native, ComponentKit, and Litho：分享 Facebook 的行動技術棧（React Native + ComponentKit 和 Litho）
Meet Hermes, a new JavaScript Engine optimized for React Native：迎來 JS 引擎級性能提升，見 Hermes: An open source JavaScript engine optimized for mobile apps, starting with React Native

在開源社群的參與下，架構升級計劃進展迅速，部分非核心模組從 React Native Core 拆出去獨立維護，並且效果不錯：

These modules are getting more support than they ever did within React Native, showing that this is a great step for the community.

同時，性能優化從未停歇，甚至換用 Hermes 作為 Android 平台的 JS 引擎（之前 Android 也用 JavaScriptCore），以求進一步的性能提升：

Hermes is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, simply enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size.

誕生