構建 F8 2016 App 第一部分:開發計劃
這是為了介紹 React Native 和它的開源生態的一個系列教程,我們將以構建 F8 2016 開發者大會官方應用的 iOS 和 Android 版為主題。
在第一部分,我們將介紹我們是如何計劃的,在后面的部分,我們將分享示例代碼,討論多平臺設計需要考慮的事情,分析應用的數據層,最后解釋我們所選擇的測試策略。
使用 React Native
在 2015 年的 F8 大會,我們使用 React Native 開發了官方應用的 iOS 版,但 Android 版使用的是原生代碼;在更早的大會上,我們在兩個平臺使用的都是原生代碼。去年大會之后,React Native 發布了 Android 版本,這給我們提供了機會來削減應用的邏輯和 UI 代碼。部分 非死book 團隊在使用 React Native 時發現達到了 85% 的代碼共用。
React Native 在原型設計方面也有優勢,它可以在你和 UI 設計師討論的時候快速構建視覺組件原型,這些我們將在第二部分討論。
所以,如果我們選擇使用 React Native,還有什么需要考慮的?讓我們先從內容開始。
選擇一個數據層
2014 和 15 年的 F8 應用都使用了Parse作為數據后端。因此,在我們計劃開發 2016 年的應用時,使用 Parse 將允許我們重用現有的數據結構,以及能夠快速開發開發。
選擇 Parse 也有其它的原因 - 從大會準備到舉辦的期間,應用所展現的內容需要經常更新,并且內容更新應該像更新表格一樣容易,而不需要工程師來協助。Parse 提供的 dashboard 能完美的滿足這些需求。
由于以上原因,選擇 Parse 作為后端順理成章。不過,由于 Parse 宣布將停止服務,我們轉而使用開源的 Parse Server 和Parse Dashboard 來替代它。
由于 React Native 并不需要時刻與數據層保持緊密連接,比如 UI 和應用邏輯能使用模擬數據完成開發。這意味著我們可以僅以極少的代價替換整個數據層。比如在開發完 F8 應用后,我們能夠非常容易的從 Parse 轉移到開源的 Parse Server,我們將在第三部分進一步討論。
React Native 應用的數據接入
為了讓 Parse 和 React Native 協同工作,我們已經有了 Parse + React Native package 來提供必需的綁定工具,不過這里有一個問題 - 考慮到會場 wi-fi 和連通性并不總是表現良好,F8 應用需要支持離線工作。因為 Parse + React 并不提供離線數據同步功能,我們只能自己開發。
這里還有另一個決定因素 - 團隊大小。比如,提供類似功能的 Relay 更適合大型團隊開發大規模應用,但 F8 應用的開發者只有一個人,以及少數其它人提供設計支持。這將極大影響你在開發應用中使用的數據接入方法。
那么 GraphQL 和 Relay 呢?雖然它們與 React Native 工作良好,但目前為止,Relay 不提供內建的離線使用,而 Parse 對 GraphQL 的支持并不完美。使用它們開發,我們需要構建 GraphQL 到 Parse 的 API,并且開發 Relay 的離線存儲方法。
GraphQL 服務器的設置對于面臨緊迫工期的個人來說也相對復雜。我需要開發應用并發布到應用商店,只能選擇最簡單并且最快的方式,除此之外我還能怎么做呢?
由于以上原因,Redux 也是應用的一個最佳選擇。Redux 提供了 Flux 架構的一個簡單實現,對數據的存儲和緩存提供更多控制,并最終讓應用能從 Parse 進行單向同步。
對應用的存儲部分,Redux 提供了功能性與易用性之間的平衡。在應用發布之后,我們重新梳理了這一部分,并且使用 Relay 和 GraphQL 實現了一遍,我們將在 Relay 和 GraphQL 附加部分討論這些。
我們的開發技術棧
將 React Native 作為我們的應用框架,以及 Redux 作為數據層,我們需要一些其它的支持技術和工具:
- 開源的 Parse Server 提供數據存儲 - 運行在 Node.js 上。
- 我們使用了 Flow 來檢查 React Native JavaScript 代碼中的類型錯誤。
- Jest framework 用來對復雜的函數進行單元測試。
- 使用 React Native 非死book SDK 來快速集成 非死book 接入功能。
- 使用 OSX 平臺的 Nuclide 編輯器,以及它內建的 React Native 支持。
- 我們還使用 Git 做版本管理,將開發的過程都存儲到了 Github 上。
我們還使用了一些小的附加工具包,當我們在教程中碰到時會重點提到。
在你閱讀系列教程的下一章節之前,我們推薦你先學習 React.js 的官方教程 - 特別是它的模塊化組件概念以及 JSX 語法。然后閱讀 React Native 的引導教程,它將展示將其用于移動應用開發的一些基礎知識。
下一篇:構建 F8 2016 App 第二部分:設計跨平臺App
來源:pockry