使用React, React Native和Redux實現跨平臺共用Web, iOS, Android的核心代碼

原文發表於blog.xuyuan.me, 轉載請註明。

相信使用同一個平臺和技術開發Web, iOS, Android是不少程序員的追求，也是不少創業公司和產品經理的夢想。而若是核心的業務邏輯代碼可以跨平臺共用，那更是求之不得的事情了。試想，創業公司不用再忍受Android/iOS應聘者的拒絕，只要招幾個互爲備份的Javascript開發就能夠搞定跨平臺開發；同一個業務Bug再也不擔憂iOS改好了而Android還沒fix，只要改一行JS代碼就能夠修正各平臺；iOS App能夠實現即時部署，不再用在線上bug迫不及待的時候還得等待蘋果漫長的審覈期；如此種種，程序員和產品經理終於能夠和諧相處了 :D

好吧，上面的這些場景尚未徹底實現，不過Facebook在2015年推出的React Native讓它們看起來更有但願實現了。曾經，開發者們嘗試經過各類方式來進行跨平臺開發，例如移動端HTML5，以及用C++實現核心業務邏輯等等。但前者在移動端的性能沒法匹敵原生程序，用戶體驗有明顯差異，後者會致使開發和維護的技術成本增長。而React的出現至少讓跨平臺開發多了一種選擇，並且是看上去更美好的選擇。

開源實例

本文以兩個程序例子(NodeTwitter和ReactTwitter)來實現一個簡單的Twitter客戶端，簡單到只在用戶受權登陸後在首頁顯示"Hello {username}"。 但這個簡單的例子基本涵蓋了先後端程序交互的各方面，其中，NodeTwitter是服務端程序，負責與Twitter的OAuth和REST API進行通信；ReactTwitter是前端程序，使用React展現Web界面，React Native展現iOS和Android App界面，而跨平臺的界面經過Redux共享代碼與服務端NodeTwitter進行交互。詳情能夠參照下圖：

本文的主旨是嘗試利用Javascript技術棧進行跨平臺的開發實踐，並不包括如何使用React進行UI開發等。關於React和React Native的開發教程，網上已經有了不少很好的文章 1 2，你們能夠參考。

技術棧

• IDE: Sublime Text 3
  在嘗試過Webstorm, Atom, VS Code以後，仍是以爲Sublime Text最輕便靈活。在Javascript各類框架亂戰的時代，彷佛任何一個試圖作到大而全的IDE都或多或少會有一些缺陷。相反Sublime Text的小巧以及豐富的插件使它可以應對各類要求。將來看好微軟出品的VS Code，也許終有一天會出現相似Visual Studio或Xcode的Javascript事實標準IDE。

• 靜態代碼檢查：ESLint + SublimeLinter

• 服務端：Node.js + Express

• Web端程序：React

• App端程序：React Native

• 共享業務邏輯和數據：Redux

  • react-redux: 進行React與Redux的綁定，例如將業務數據和函數綁定到UI

  • redux-thunk: Redux中間件，用以推遲代碼的異步執行，例如在數據訪問完成後再執行回調

• 編譯，部署和ES6支持：Webpack + Babel

• 實時調試：react-transform-hmr

運行界面

NodeTwitter和ReactTwitter的例子能夠在Github上找到，包括了Web, iOS和Android平臺。