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 ElectronやMicrosoftのUWPを使うことで、Angular 2をデスクトップ上で動かすことも可能だ。
モバイルデバイスでは、Ionic 2、NativeScript、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アプリケーションのアーキテクチャを次のように図解した。
彼はこう説明する。
技術的に、React Nativeアプリケーションは3つのスレッドを動かしています。メインスレッドはJSスレッドで、ここでJSコードを実行します。これがアプリケーション全体をコントロールします。他の2つのスレッドは、アプリケーションのネイティブ部分を動かしています。標準のメインのUIスレッドと、メジャーリングとレイアウトを行う「シャドウ」スレッドです。
ネイティブ側とJS側は、ブリッジを介して双方向にコミュニケーションします。ネイティブ機能（ネットワーク、ジオロケーション、クリップボードなど）にアクセスしてネイティブ要素を操作するBridge JS APIがあり、ネイティブイベントはJS側に戻されます。
近い将来、Angular 2チームは新しいアニメーションモジュールの作成を計画している。一方、React Nativeチームはネイティブ側のパフォーマンスをさらにあげようとしている。また、FacebookはReact NativeにUWPのサポートを追加するつもりだ。
Rate this Article
- Editor Review
- Chief Editor Action