BT

Ready for InfoQ 3.0? Try the new design and let us know what you think!

Angular 2とReact Nativeの組み合わせ

| 作者: Abel Avram フォローする 12 人のフォロワー , 翻訳者 笹井 崇司 フォローする 0 人のフォロワー 投稿日 2016年4月25日. 推定読書時間: 4 分 |

原文(投稿日:2016/04/20)へのリンク

Angular 2のアーキテクチャは、React Nativeを含む様々なレンダラーを使ったレンダリングを可能にする。

Angular 2で下された基本的なアーキテクチャ判断の一つに、フレームワークの2つのレイヤーへの分離がある。コア(core)が、コンポーネント、ディレクティブ、フィルター、サービス、ルーター、変更検出、DI、I18nを扱い、レンダラー(renderer)が、DOM、CSS、アニメーション、テンプレート、Webコンポーネント、カスタムイベントなどを扱う。コアは別プロセスで動かすことができ、UIから分離することで、高負荷時の反応を改善できる。このアーキテクチャ判断については、「Angular 2 Rendering Architecture」に詳しく書かれている。

これまで、Angularアプリケーションのレンダリングはブラウザ内のDOM経由で行われていたが、Angular 2では別のレンダラー経由で描画できるようになる。レンダラーには、デスクトップあるいはモバイルデバイスのネイティブ、さらにはサーバー側も含まれる。どうやってAngular 2がこれを実現しているかについては、「Rendering in Angular2」という記事が詳しい。

メインアプリからレンダリングを分離するのには、複数のメリットがある。Angular 2アプリケーションはNode.js上で動かすこともでき、Googleでエンジニアリングディレクターを務めるBrad Green氏によると、これは非常に高速で「Photoshopみたいなアプリも実行できる」そうだ。Node.jsはファイルシステム、プロセス、ハードウェアに対する必要なアクセスを提供する。また、Angular ElectronMicrosoftのUWPを使うことで、Angular 2をデスクトップ上で動かすことも可能だ。

モバイルデバイスでは、Ionic 2NativeScript、React Nativeといった選択肢がある。React Nativeの場合、このライブラリを使うことで、React NativeでAngular 2アプリケーションをレンダリングできる。開発者は、React NativeがiOSとAndroidのネイティブ機能にアクセスするために用意している全APIとpolyfillを呼び出すことができる。また、コールバックは必要に応じて、Angular Zoneで実行される。Marc Laval氏によると、ネイティブモバイル向けの開発はWeb向けと似ているが、HTMLとCSSが提供するコンポーネントの代わりに、異なるコンポーネントを使うという。

  • 共通コンポーネント: Image, Picker, RefreshControl, ScrollView, Switch, Text, TextInput, View, WebView

  • Android特有: DrawerLayout, PagerLayout, ProgressBar, Toolbar

  • iOS特有: ActivityIndicator, DatePicker, MapView, Navigator, ProgressView, SegmentedControl, Slider, TabBar

アプリケーションのスタイリングはReact Nativeのスタイルで行われ、ジェスチャーはHammer.jsで処理される。Laval氏はReact Native + Angular 2アプリケーションのアーキテクチャを次のように図解した。

ang2-react-native

彼はこう説明する。

技術的に、React Nativeアプリケーションは3つのスレッドを動かしています。メインスレッドはJSスレッドで、ここでJSコードを実行します。これがアプリケーション全体をコントロールします。他の2つのスレッドは、アプリケーションのネイティブ部分を動かしています。標準のメインのUIスレッドと、メジャーリングとレイアウトを行う「シャドウ」スレッドです。

ネイティブ側とJS側は、ブリッジを介して双方向にコミュニケーションします。ネイティブ機能(ネットワーク、ジオロケーション、クリップボードなど)にアクセスしてネイティブ要素を操作するBridge JS APIがあり、ネイティブイベントはJS側に戻されます。

近い将来、Angular 2チームは新しいアニメーションモジュールの作成を計画している。一方、React Nativeチームはネイティブ側のパフォーマンスをさらにあげようとしている。また、FacebookはReact NativeにUWPのサポートを追加するつもりだ

 
 

Rate this Article

Relevance
Style
 
 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション
BT