對於Android客戶端程序，不依賴於發布下載而實現交互方案有哪些？

01-20

客戶端程序相對服務端應用程序而言，交互功能的變更通常需要經過市場的發布和用戶主動下載更新才能實現，對於Android給出不依賴於發布下載而實現交互方案。這是2015年8月23號，阿里客戶端工程師機試題中場景題的第三題

天貓技術團隊使用React Native代替H5實現產品化落地，介紹文章：天貓技術團隊使用React Native代替H5實現產品化落地

具體內容（註：本內容版權歸@天貓技術老穆所有）：

自Facebook 開源出React 後，天貓技術團隊就在一直關注，並對比現有Html5系的Hybird解決方案的差異性。

React-Native 是Android端實現實現動態部署的另一種思路，繞過dexLoad【一些現有的Android插件框架】，同時實現了前端人員和客戶端人員資源的共享，總之是非常值得期待和嘗試

PS:【打死我也不告訴你，其實天貓之前也搞了一套類似方案，通過xml模板方式進行前後端交互，其實二者各有優缺點，目的都是更好的解決業務在高速發展情況下的動態能力和流轉能力】。

地址：http://facebook.github.io

產品應用：

業務上，天貓早是在15年的年中618大促及各會場業務頁面中，率先在iOS平台上進行業務線上嘗試，效果不錯，得到肯定。

開源：

今年9月15日發布了React Native For Android ，雖然相對於React Native For iOS來說，Android版本時間不長，但還是吸引了各路好漢的注意力，項目本身開源，且相關依賴的都是成熟知名的項目，github上非常活躍。

地址：facebook/react-native · GitHub

性能：

現對於現有的H5+H5Cache的Webview容器技術，用 React 抽象操作系統原生的 UI 組件，代替 DOM 元素來渲染等。通過消息循環隊列，計算虛擬Dom的更新差量，渲染View的Diff，減少過渡渲染，同時由於本身的Native UI Component，所以會使UI層面相對於H5 有更好的視覺和交互的體驗。

同時在網路請求調用方面，可以不再受制於Webkit等內核的線程限制，使得React Native 在通信性能上都有了很大的提升。

目前現狀

ReactNative iOS方面目前已經相對成熟了，具備業務落地使用的能力。今天主要介紹下剛發布不到一個月的Android方面的情況

react-native/ReactAndroid at master · facebook/react-native · GitHub 【截止2015年10月15日】：

庫版本號：

目前release版本到了0.12.+，0.13-stable分支也已經拉了出來。

開發設備：

簡易使用最新的android sdk 環境配置，盡量保證5.0以上,並正確配置環境變數,ANDROID_HOME NDK_HOME,並確保如下4項：

Android SDK version 23 (compileSdkVersion in build.gradle)
SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
Android Support Repository &>= 17 (for Android Support Library)
Android NDK (download extraction instructions here)

環境安裝

1.安裝nvm

* 1.brew install nvm

2.nvm 安裝最新的 Node.js 4.0

* nvm install node nvm alias default node

3.安裝watchman 和 flow

* $ brew install watchman

* $ brew install flow

並更新brew

* brew update brew upgrade

demo運行

首先切換到你想要的目錄下[盡量是空的乾淨的目錄]，依次執行以下命令

* $ npm install -g react-native-cli

* $ react-native init YourProjectName

* $ cd AwesomeProject/

運行項目

* $ react-native run-android

上面的截圖是運行成功的結果，通過物理menu可以進行刷新。

如果出現下面的情況，是需要通過menu-dev setting-set ip的方式進行設置，沒有找到對應的Node Packager Server。

快速入門：

1、用編輯器打開對應的.js文件，分析代碼結構：

var React = require("react-native");

和Node.js有關，require可以引入其他模塊。

類似java 的 import com.andorid.xx.Act;

2、React.createClass里的render方法就是渲染視圖用的。return返回的是視圖的模板代碼。

3、樣式表現：那麼StyleSheet.create就是干這件事的，只是用JS的自面量表達了css樣式。

4、引入css樣式：

方法1：style={styles.container}

方法2：style={{width:20,height:100}}

5、註冊View組件，第二個參數為React.createClass創建的那個var對象

AppRegistry.registerComponent("aswsome", () =&> yourVar);

6、通過menu可以進行debug，在指定ip的pc的chrome中輸入http://localhost:8081/debugger-ui ，可以看到js端的console logs.

依賴樹關係

【如果不進行任何裁剪，依賴包+so有8M左右，略大,有待優化】

android-jsc-r174650

appcompat-v7-23.0.0

bolts-android-1.1.4

drawee-0.6.1

fbcore-0.6.1

fresco-0.6.1

imagepipeline-0.6.1

imagepipeline-okhttp-0.6.1

jackson-core-2.2.3

jsr305-3.0.0

library-2.4.0

okhttp-2.4.0

okhttp-ws-2.4.0

okio-1.5.0

react-native-0.11.0

support-annotations-23.0.0

support-v4-23.0.0

如何封裝一個React Native Android的自定義組件

1.首先需要使用自己的packageManager

2.在你的Activitiy或Fragment中對其進行設置

3.繼承自ReactContextBaseJavaModule，實現getName用於js前端調用NativeModules.類A，實現含有@ReactMethod的方法用於前端調用類A的xx方法

4.在你自定義的packManager中增加你的NativeModule

5.這樣就可以在前端調用了，代碼如下：

6.效果和Webview的Hybird效果類似，你自定義的nativeModule組件就可以被前端容器代碼所訪問了【成功，over......】

問題和采坑：

性能:
部分UI組件在大量的圖片流情況下，需要性能優化，比如現在的兩個平台上的Listview實現都是直接配合著cssLayout進行繪製，沒有能夠利用上
包大小：
目前依賴包體積偏大。目前ios的jsc可以通過系統的Lib進行載入，而Android端更誇張，使用默認的依賴組件，直接依賴打包後將近8M
Android端進展稍慢：
JS-bundle的remoteURL和本地FilePatch模式目前還都不支持，緊通過DevHelperHost+AssertsBundle，暫時還不適合在業務中落地

4. and more ....

插件式升級，或者使用H5更新資源包就行了，但是完全避免APP客戶端下載升級那是不可能的。

阿里的，是想問他們自己那個吧

唐巧的博客:分析支付寶客戶端的插件機制

allen的博客:淺析支付寶錢包插件

很多app有些頁面跳著跳著就不是native的，知乎也這樣

還有一種方式就是遊戲常見的腳本、資源更新咯。

其實就是搜一下就能得到的答案

iOS bundle打包代碼利用runtime搞？Android插件。。或者webview做.還有別的嗎

阿里也就靠JSBridge各個BU包了一層又一層來作為技術賣點了。。。

現在除了天貓，其他的還沒有使用這個技術么？另外，原來是native+webview+h5，現在用這個是直接native+JS+native view來實現這個意思么？

這個app怎麼老不升級，公司死了還是沒人在用啊？