React Native

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

• Facebook已經(jīng)在多項(xiàng)產(chǎn)品中使用了React Native，并且將持續(xù)地投入建設(shè)React Native。

React Native 是Facebook的一個(gè)開源框架，React Native使你能夠在Javascript和React的基礎(chǔ)上獲得完全一致的開發(fā)體驗(yàn)，構(gòu)建世界一流的原生APP。官方的標(biāo)語(yǔ)為“ Learn once, write anywhere”，僅需學(xué)習(xí)一次，編寫任何平臺(tái)。是目前App混合式開發(fā)的主要技術(shù)之一。

原生組件

使用React Native，你可以使用標(biāo)準(zhǔn)的平臺(tái)組件，例如iOS的UITabBar或安卓的Drawer。 這使你的app獲得平臺(tái)一致的視覺(jué)效果和體驗(yàn)，并且獲得最佳的性能和流暢性。 使用對(duì)應(yīng)的React component，就可以輕松地把這些原生組件整合到你的React Native應(yīng)用中， 例如TabBarIOS和DrawerLayoutAndroid。

異步執(zhí)行

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

觸摸事件處理

React Native實(shí)現(xiàn)了一個(gè)強(qiáng)大的觸摸事件處理系統(tǒng)，可以在復(fù)雜的View層次關(guān)系下正確地處理觸摸事件。同時(shí)還提供了高度封裝的組件如TouchableHighlight等，可以直接嵌入到ScrollView或者其它的元素中，無(wú)需額外配置。

彈性盒(Flexbox)和樣式

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

兼容通用標(biāo)準(zhǔn)

React Native致力于改進(jìn)視圖代碼的編寫方式。除此之外，我們還吸納了web生態(tài)系統(tǒng)中的通用標(biāo)準(zhǔn)，并在必要的時(shí)候?yàn)檫@些API提供兼容層。如此一來(lái)，npm上的許多庫(kù)就可以在React Native中直接使用。這樣的兼容層有XMLHttpRequest, window.requestAnimationFrame, navigator.geolocation等。我們還在努力增加更多的API，并且十分歡迎開源社區(qū)進(jìn)行貢獻(xiàn)。

擴(kuò)展性

使用React Native，無(wú)需編寫一行原生代碼即可創(chuàng)造一款不錯(cuò)的app。盡管如此，使用自定義的原生視圖和模塊來(lái)擴(kuò)展React Native也非常容易 —— 這意味著你現(xiàn)有的所有工作都可以被復(fù)用，你喜歡的各種原生庫(kù)都可以被導(dǎo)入。

入門

React Native看起來(lái)很像React，只不過(guò)其基礎(chǔ)組件是原生組件而非web組件。要理解React Native應(yīng)用的基本結(jié)構(gòu)，首先需要了解一些基本的React的概念，比如JSX語(yǔ)法、組件、state狀態(tài)以及props屬性。

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

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

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

初看這段代碼，可能覺(jué)得并不像JavaScript——沒(méi)錯(cuò)，這是“未來(lái)”的JavaScript.

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

學(xué)習(xí)地址

Weex

• 一次編寫，多端運(yùn)行。
  Weex 提供強(qiáng)大的跨平臺(tái)能力，可以使用相同的 API 開發(fā) Web，Android 和 iOS 應(yīng)用。 同時(shí)，我們對(duì)接口了豐富的擴(kuò)展能力。 這樣，當(dāng)您需要擴(kuò)展原生組件或模塊時(shí)，這將非常方便。

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

整體架構(gòu)

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

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

云端部署和分發(fā)

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

客戶端 JavaScript 引擎

Weex 的 iOS 和 Android 客戶端中都會(huì)運(yùn)行一個(gè) JavaScript 引擎，來(lái)執(zhí)行 JS bundle，同時(shí)向各端的渲染層發(fā)送規(guī)范化的指令，調(diào)度客戶端的渲染和其它各種能力。我們?cè)?iOS 下選擇了 JavaScriptCore 內(nèi)核，而在 Android 下選擇了 UC 提供的 v8 內(nèi)核。無(wú)論是從性能還是穩(wěn)定性方面都提供了強(qiáng)有力的保障。

為了讓整個(gè)移動(dòng)應(yīng)用的資源利用得更好，我們?cè)诳蛻舳颂峁┑?JavaScript 引擎是單例的，即所有 JS bundle 公用一個(gè) JavaScript 內(nèi)核實(shí)例，同時(shí)對(duì)每個(gè) JS bundle 在運(yùn)行時(shí)進(jìn)行了上下文的隔離，使得每個(gè) JS bundle 都能夠高效安全的工作。我們還把 Vue 2.0 這樣的 JS Framework 做了預(yù)置，開發(fā)者不必把 JS Framework 打包在每個(gè) JS bundle 里，從而大大減少了 JS bundle 的體積，也就進(jìn)一步保障了頁(yè)面打開的速度。

客戶端渲染層

Weex 目前提供了 iOS 和 Android 兩個(gè)客戶端的 native 渲染層。每個(gè)端都基于 DOM 模型設(shè)計(jì)并實(shí)現(xiàn)了標(biāo)準(zhǔn)的界面渲染接口供 JavaScript 引擎調(diào)用。并且結(jié)合 web 標(biāo)準(zhǔn)和 native 的特點(diǎn)和優(yōu)勢(shì)實(shí)現(xiàn)了一套統(tǒng)一的組件和模塊。Weex 在性能方面的表現(xiàn)也是非常優(yōu)異的，尤其是界面首屏加載時(shí)間、native 下長(zhǎng)列表的資源開銷和復(fù)用情況、CPU、內(nèi)存、幀率 等關(guān)鍵指標(biāo)。當(dāng)然，盡管 Weex 官方已經(jīng)提供了一組開發(fā)者最常用的組件和模塊，但面對(duì)豐富多樣的移動(dòng)應(yīng)用研發(fā)需求，團(tuán)隊(duì)也難免會(huì)力不從心，為此我們提供了靈活自由的橫向擴(kuò)展能力，開發(fā)者可以根據(jù)自身的情況定制屬于自己的客戶端組件和模塊，進(jìn)一步豐富 Weex 在客戶端上的能力。

瀏覽器渲染

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

擴(kuò)展

Weex 和 Web 平臺(tái)的差異
如何使用 iOS
如何使用 Android
如何使用 HTML5

學(xué)習(xí)地址

React Native 對(duì)比 Weex

下面附上一張性能對(duì)比圖

r&w.png