React Native

• React Native著力于提高多平臺開發的開發效率 —— 僅需學習一次，編寫任何平臺。(Learn once, write anywhere)

• Facebook已經在多項產品中使用了React Native，并且將持續地投入建設React Native。

React Native 是Facebook的一個開源框架，React Native使你能夠在Javascript和React的基礎上獲得完全一致的開發體驗，構建世界一流的原生APP。官方的標語為“ Learn once, write anywhere”，僅需學習一次，編寫任何平臺。是目前App混合式開發的主要技術之一。

原生組件

使用React Native，你可以使用標準的平臺組件，例如iOS的UITabBar或安卓的Drawer。 這使你的app獲得平臺一致的視覺效果和體驗，并且獲得最佳的性能和流暢性。 使用對應的React component，就可以輕松地把這些原生組件整合到你的React Native應用中， 例如TabBarIOS和DrawerLayoutAndroid。

異步執行

在Javascript代碼和原生平臺之間的所有操作都是異步執行的，并且原生模塊還可以根據需要創建新的線程。這意味著你可以在主線程解碼圖片，然后在后臺將它保存到磁盤，或者在不阻塞UI的情況下計算文字大小和界面布局等等。所以React Native開發的app天然具備流暢和反應靈敏的優勢。Javascript和原生代碼之間的通訊是完全可序列化的，這使得我們可以借助Chrome開發者工具去調試應用，而不論應用運行在模擬器還是真機上。

觸摸事件處理

React Native實現了一個強大的觸摸事件處理系統，可以在復雜的View層次關系下正確地處理觸摸事件。同時還提供了高度封裝的組件如TouchableHighlight等，可以直接嵌入到ScrollView或者其它的元素中，無需額外配置。

彈性盒(Flexbox)和樣式

控制view的布局應當簡單易行，這就是為什么React Native從web中借鑒了Flexbox模型。Flexbox讓大多數常見的UI布局構建變得簡單（譬如帶有外襯margin和內襯padding，且堆疊在一起的多個矩形）。React Native還支持多種常見的web樣式，例如fontWeight等。抽象樣式表提供了一個高性能的機制來聲明所有的樣式和布局，并且可以直接應用到你的組件中。

兼容通用標準

React Native致力于改進視圖代碼的編寫方式。除此之外，我們還吸納了web生態系統中的通用標準，并在必要的時候為這些API提供兼容層。如此一來，npm上的許多庫就可以在React Native中直接使用。這樣的兼容層有XMLHttpRequest, window.requestAnimationFrame, navigator.geolocation等。我們還在努力增加更多的API，并且十分歡迎開源社區進行貢獻。

擴展性

使用React Native，無需編寫一行原生代碼即可創造一款不錯的app。盡管如此，使用自定義的原生視圖和模塊來擴展React Native也非常容易 —— 這意味著你現有的所有工作都可以被復用，你喜歡的各種原生庫都可以被導入。

入門

React Native看起來很像React，只不過其基礎組件是原生組件而非web組件。要理解React Native應用的基本結構，首先需要了解一些基本的React的概念，比如JSX語法、組件、state狀態以及props屬性。

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

// 注意，這里用引號括起來的'HelloWorldApp'必須和你init創建的項目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

初看這段代碼，可能覺得并不像JavaScript——沒錯，這是“未來”的JavaScript.

首先你需要了解ES2015 （也叫作ES6）——這是一套對JavaScript的語法改進的官方標準。但是這套標準目前還沒有在所有的瀏覽器上完整實現，所以目前而言web開發中還很少使用。React Native內置了對ES2015標準的支持，你可以放心使用而無需擔心兼容性問題。上面的示例代碼中的import、from、class、extends、以及() =>箭頭函數等新語法都是ES2015中的特性。

學習地址

Weex

• 一次編寫，多端運行。
  Weex 提供強大的跨平臺能力，可以使用相同的 API 開發 Web，Android 和 iOS 應用。 同時，我們對接口了豐富的擴展能力。 這樣，當您需要擴展原生組件或模塊時，這將非常方便。

與 Web App、HTML5 App 或 hybrid App 不同，您可以使用 Weex 構建一個真正的原生應用。更貼心的是你的代碼只需使用 HTML、CSS、JavaScript 可以構建原生應用，上手非常簡單。但實際上，應用的底層是 Objective-C 或 Java， 同時，Weex 提供很多 native 組件或模塊供開發人員使用。

整體架構

Weex 表面上是一個客戶端技術，但實際上它串聯起了從本地開發環境到云端部署和分發的整個鏈路。開發者首先可以在本地像撰寫 web 頁面一樣撰寫一個 app 的頁面，然后編譯成一段 JavaScript 代碼，形成 Weex 的一個 JS bundle；在云端，開發者可以把生成的 JS bundle 部署上去，然后通過網絡請求或預下發的方式傳遞到用戶的移動應用客戶端；在移動應用客戶端里，WeexSDK 會準備好一個 JavaScript 引擎，并且在用戶打開一個 Weex 頁面時執行相應的 JS bundle，并在執行過程中產生各種命令發送到 native 端進行的界面渲染或數據存儲、網絡通信、調用設備功能、用戶交互響應等移動應用的場景實踐；同時，如果用戶沒有安裝移動應用，他仍然可以在瀏覽器里打開一個相同的 web 頁面，這個頁面是使用相同的頁面源代碼，通過瀏覽器里的 JavaScript 引擎運行起來的。

952288D6-E103-4094-A12F-9B01FAA6610A.png

云端部署和分發

Weex 的 JS bundle 可以作為 web 開發中的一段靜態資源進行部署和下發。幾乎可以復用 HTML5 所有的工程體系和最佳實踐。比如在本地開發環境通過部署工具將 JS bundle 部署到 CDN、通過 CMS 或搭建平臺把業務數據和模塊化的前端組件自動化拼接生成 JS bundle、通過服務端 JS bundle 的流量和日志統計頁面的訪問情況、通過 AppCache 或類似的方式對 JS bundle 在客戶端進行緩存或預加載以降低網絡通信的成本等。

客戶端 JavaScript 引擎

Weex 的 iOS 和 Android 客戶端中都會運行一個 JavaScript 引擎，來執行 JS bundle，同時向各端的渲染層發送規范化的指令，調度客戶端的渲染和其它各種能力。我們在 iOS 下選擇了 JavaScriptCore 內核，而在 Android 下選擇了 UC 提供的 v8 內核。無論是從性能還是穩定性方面都提供了強有力的保障。

為了讓整個移動應用的資源利用得更好，我們在客戶端提供的 JavaScript 引擎是單例的，即所有 JS bundle 公用一個 JavaScript 內核實例，同時對每個 JS bundle 在運行時進行了上下文的隔離，使得每個 JS bundle 都能夠高效安全的工作。我們還把 Vue 2.0 這樣的 JS Framework 做了預置，開發者不必把 JS Framework 打包在每個 JS bundle 里，從而大大減少了 JS bundle 的體積，也就進一步保障了頁面打開的速度。

客戶端渲染層

Weex 目前提供了 iOS 和 Android 兩個客戶端的 native 渲染層。每個端都基于 DOM 模型設計并實現了標準的界面渲染接口供 JavaScript 引擎調用。并且結合 web 標準和 native 的特點和優勢實現了一套統一的組件和模塊。Weex 在性能方面的表現也是非常優異的，尤其是界面首屏加載時間、native 下長列表的資源開銷和復用情況、CPU、內存、幀率 等關鍵指標。當然，盡管 Weex 官方已經提供了一組開發者最常用的組件和模塊，但面對豐富多樣的移動應用研發需求，團隊也難免會力不從心，為此我們提供了靈活自由的橫向擴展能力，開發者可以根據自身的情況定制屬于自己的客戶端組件和模塊，進一步豐富 Weex 在客戶端上的能力。

瀏覽器渲染

Weex 除了提供 iOS 和 Android 的客戶端渲染層之外，還基于 Vue 2.0 對官方的所有組件和模塊進行了封裝，開發者可以基于 Vue 2.0 用同一套源代碼構建出在瀏覽器中相同效果的頁面。并且同樣可以橫向擴展。

擴展

Weex 和 Web 平臺的差異
如何使用 iOS
如何使用 Android
如何使用 HTML5

學習地址

React Native 對比 Weex

下面附上一張性能對比圖

r&w.png