React Native在Instagram的使用經驗

banq發表於2017-02-07
React Native
React Native自從2015年開源以來已經走過了很長的路。不到兩年後，它不僅在Facebook和Facebook廣告系統中使用，而且還在許多其他公司從財富500強公司到熱門新創公司中使用 (這裡)。

開發者的效率是Instagram移動工程的一個價值標準 。 在2016年初，我們開始探索使用React Native，它使得產品團隊能夠透過程式碼共享和更高的迭代速度更快地釋出功能 ，使用Live Reload和Hot Reloading等工具，消除了以往的編譯安裝週期。


挑戰
將React Native整合到現有本機應用程式中可能會產生挑戰和額外的工作，而當您從頭開始開發一個應用程式時則不會遇到。 基於這點考慮，我們決定開始探索這些挑戰，首先移植最簡單的檢視： 推送通知檢視。這個檢視最初被實現為一個WebView，所以我們認為它不會太難實現。最重要的是，這個檢視不需要我們建立很多導航基礎設施 - UI很簡單，內容由伺服器決定。

Android方法計數
碰到的第一個問題是新增React Native作為依賴項，而不是拉入整個庫 。 這樣做就不僅會增加二進位制大小，但是會對方法數量方面產生巨大影響，使得我們的Android應用都帶有效能影響的multi-dex（Dalvik Executable (DEX)檔案的總方法數限制在65536以內,超過這個數目就要使用使用MultiDex，Instagram仍然是single-dex！ ）。我們最終只選擇性地提取我們當時需要的檢視管理器 ，並編寫我們自己的實現，依賴於我們不想引入的庫。最後，React Native最終只新增了〜3500個方法。 用React Native編寫的特性幾乎不需要再定義安卓的任何Java方法，因此我們相信這種投資將是值得的。

指標
作為推送通知實驗的一部分，我們稽核了React Native對多個指標的影響，包括崩潰和記憶體不足。 我們發現這些指標在初始實驗和當使用者離開React Native功能時都保持中間值（因此下次進入時我們不必重新建立它）。

啟動效能
React Native有一個啟動開銷，主要是由於必須將JavaScript包注入JavaScriptCore（在iOS和Android上由React Native使用的VM），並例項化本機模組和檢視管理器。 雖然React Native團隊在提高效能方面取得了很大進步 ，但對於在Instagram的整合，我們希望衡量這種差距，以判別權衡是否對我們有意義。 為此，我們將現有的本機編輯概要（ Edit Profile）檔案檢視移植到React Native。 就這樣，我們構建了產品基礎架構，這些都開始被產品團隊並行使用（例如導航，翻譯，核心元件）。

我們最終都利用了我們的React Native團隊已經構建的設計和基礎庫，它們是隨機訪問模組捆綁 、內聯需求、本機並行獲取以及其它已經整合到框架中的大量內容。

產品
如上一節所述，Core Client團隊將“推送通知設定”和“編輯個人資料”檢視都移植到React Native。 我們還移植了“檢視照片”，以便在使用React Native為列表載入時提升顯示效能：

除了這些示例，其它幾個產品團隊已經發布了React Native中的功能。

釋出推廣
Instagram有一個輕量級介面，用於稱為Post Promote用來宣傳推薦帖子 。此產品最初實現為WebView，因為該技術允許團隊比原生程式碼更快地迭代。 WebViews的問題是，UX不感覺它是原生應用，啟動是非常緩慢。 promote小組將此功能移植到React Native，並在啟動時間和使用者體驗方面取得了極大的改進。 值得一提的是，儘管這是一個非常複雜的創作流程， 它只新增了6種方法到Android DEX。

儲存
每個月有超過6億人來到Instagram，在與他們的社群聯絡的同時，發現了大量的基於興趣的靈感。 然而，他們並不總是準備好在發現的時刻對這個靈感採取行動，並且通常希望以後當他們準備好時重新訪問這個內容。 為了滿足這種需求，Save團隊實現了對儲存帖子的支援，並在他們想要獲得時，透過他們的個人資料上只有他們可以看到的新的私有標籤實現重新訪問。

儲存團隊實現了iOS版本的React Native中儲存的帖子列表。

Checkpoints檢查點
檢查點是從伺服器觸發的流程，以響應可疑操作（例如：當我們需要驗證您的電話號碼時，我們認為您的帳戶可能已被盜用等）。

歷史上，檢查點是使用WebViews實現的。 如前所述，WebViews適合程式碼共享和快速迭代速度，但UX使用者體驗方面不會感覺到時原生應用且啟動時間可能很慢。

Protect 和 Care 小組開始著手改進其中一些流程。 他們決定使用React Native來利用程式碼共享，同時保持良好的使用者體驗和低啟動時間。

評論稽核
我們希望Instagram是一個安全的地方，每個人都可以捕捉和分享他們最重要的時刻。 隨著Instagram社群的發展和來自世界各地的人們分享更多的內容，我們希望努力工作，以保持Instagram保持積極和安全，尤其是對您的照片和影片的評論。 考慮到這一目標，Feed小組推出了一項功能，允許使用者稽核在他們帖子上釋出的評論。

Lead Gen Ads
Lead Gen廣告是一種號召性用語，允許使用者與廣告客戶共享資訊。 廣告客戶可以自定義此表面上的表單。

結果
React Native允許產品團隊更快地將上述功能釋出到我們的iOS和Android應用程式。 下面的列表顯示了一些產品的應用程式之間共享的程式碼百分比，可用作參考來衡量我們如何提高開發人員的速度：
文章推薦：99%
簡訊驗證碼：97％
評論稽核：85％
Lead Gen主要內容廣告：87％
推送通知設定：92％

原文：React Native at Instagram

[該貼被banq於2017-02-07 11:06修改過]

[該貼被banq於2017-02-07 11:06修改過]

相關文章