FacebookがReact Nativeを発表しました.JavaScriptでモバイルアプリケーションの開発を開始しました.

先週カリフォルニア州のメンロパークで行われたReact開発者大会で、FacebookはReact Native-Reactという非常に人気のあるJavaScriptライブラリの純モバイル端末バージョンを発表しました.表面的には、React NativeはReactに似ています.JavaScript宣言文法によってインタラクティブなユーザーインターフェースを定義します.しかし、この背景には大きな違いがあります.React Nativeはプラットフォームに特定された元々のコントロールを通して画面を表示します.ReactはDOM元素を使います.
Reactはフロントエンドユーザーインターフェースを開発するためのJavaScriptフレームであり、最初はFacebookによって開発され、その後オープンソースが実現された.Reactは声明式の文法とJSX(彼らのJavaScript文法拡張)を使ってHTMLレイアウトを記述しています.各Reactコンポーネントは、属性とステータスによって構成され、状態が変化すると、一方向のデータストリームによって駆動されるUI更新をトリガする.これらの更新は仮想DOM機構によって最適化され、実際のDOM更新は本当に状態変化が発生した部分のみを含むことを確認した.
典型的なReactコンポーネントを以下に示す.

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
React.render(<HelloMessage name="John" />, mountNode);

上記の例ではハローMessageというReactカスタムコンポーネントが定義されています.Reactの標準的なアプローチのように,この組織では,render法を定義して,DOMを生成するためにHTML要素のツリー構造を返す.このようなHTMLシンタックススタイルで要素を定義するのはJSXによってサポートされています.これらの文は前処理され、React関数呼出しに翻訳されて、実際に関連するHTML要素が発生します.
同様に、React Nativeは同じステートメント文法を使用して、元のUIを定義しているが、HTML要素にバインドされているのではなく、カスタムタイプによって元のUIコンポーネントのマッピングを実現する.以下はChecklistAppleからの例示的なコードであり、React Nativeがどのように元のUIコンポーネントに結合されるか、例えばViewと編集可能テキストボックス:

render() {
    return (
        <View style={{marginTop: 20}}>
           <Text>Checklist</Text>
           <TextInput
               style={styles.input}
               autoFocus={true}
               onSubmitEditing={this.handleSubmit}
            />
           <View style={styles.list}>
              {this.renderItems()}
           </View>
       </View>
    );
}

水曜日(1月28日)にReact Nativeを発表した後、Christpher Chedia(Facebookのソフトウェア開発者)が「React Nativeを深く理解する」というテーマの講演をしました.スピーチでは、ChristoppherはReact Nativeが標準的なWeb開発や原生開発よりももたらすことができる3つの利点を指摘した.

ジェスチャー識別:Web技術(HTML 5/JavaScript)に基づいて構築されたモバイルアプリケーションは、しばしばクレームされ、タイムリーな応答がない.原生UIに基づくReact Nativeはこれらの問題を回避してリアルタイム応答を実現することができる.

元のコンポーネント:HTML 5/JavaScriptを使って実現されたコンポーネントは、元のコンポーネントよりずっと感じが悪いです.React Nativeは、元のUIコンポーネントを採用しているので、当然この問題はありません.

スタイルとレイアウト:iOS、Android、およびWebベースのアプリケーションは、それぞれ異なるスタイルとレイアウト機構を有する.React NativeはFlexBoxベースのレイアウトエンジンにより、すべてのモバイルプラットフォームにおいて一貫したクロスプラットフォームパターンとレイアウト方式を実現した.

Hacker NewsでFacebookについてReact Nativeを発表する議論では、Peter Hunt(Reactのコード貢献者)はReact Nativeの内部メカニズムについて説明する.

JSエンジンはバックグラウンドスレッド

で動作します.

メインスレッドで生サービス(objcまたはandroid)を実行し、JSと生サービスの通信はバッチ処理、非同期のメッセージプロトコルによって完了します.

Reactプラグインは、このような通信プロトコルに従う

.

は、ツールによって、プラットフォームをまたぐflexboxレイアウトシステムなどの標準的なテキストコンポーネントの開発を容易にする

.

設計目標は、元のプラットフォームのUIコンポーネントを十分に利用することであり、次のJava Swing

になるわけではない.
Facebookでは、React Nativeがいつ公開されるかは発表されておらず、現在も社内開発の状態です.しかし、ライブラリ全体の機能はすでに利用可能であり、Facebookのいくつかのリリースされたアプリケーションでは、例えばFacebook Groups iOS Appを使用しています.
英文原文:Facebook Emples Native App Development in JavaScript with React Native
邵思華さんの本文に対する校閲に感謝します.
InfoQ中国語ステーションに投稿したり、コンテンツ翻訳に参加したりします[email protected].新浪微博(@InfoQ)や騰訊微博(@InfoQ)を通じて、私たちに関心を持ってくれて、編集者や他の読者や友達と交流することも歓迎します.