NativeScript-アーキテクチャ

NativeScriptは、モバイルアプリケーションを作成するための高度なフレームワークです。モバイルアプリケーションの作成の複雑さを隠し、高度に最適化された高度なモバイルアプリケーションを作成するためのかなり単純なAPIを公開します。NativeScriptを使用すると、エントリーレベルの開発者でもAndroidとiOSの両方でモバイルアプリケーションを簡単に作成できます。

この章では、NativeScriptフレームワークのアーキテクチャを理解しましょう。

前書き

NativeScriptフレームワークのコアコンセプトは、開発者がハイブリッドスタイルのモバイルアプリケーションを作成できるようにすることです。ハイブリッドアプリケーションは、プラットフォーム固有のブラウザAPIを使用して、通常のモバイルアプリケーション内でWebアプリケーションをホストし、JavaScriptAPIを介してアプリケーションへのシステムアクセスを提供します。

NativeScriptはに多額の投資をしています JavaScript language開発者に効率的なフレームワークを提供します。以来JavaScriptはクライアントサイドプログラミング（Web開発）のデファクトスタンダードであり、すべての開発者はJavaScript言語をよく知っているため、開発者はNativeScriptフレームワークに簡単にアクセスできます。低レベルでは、NativeScriptはと呼ばれるJavaScriptプラグインのコレクションを介してネイティブAPIを公開しますNative plugins.

NativeScriptは、ネイティブプラグインを基盤として構築されており、高レベルで使いやすいJavaScriptモジュールを多数提供します。各モジュールは、カメラへのアクセス、画面の設計などの特定の機能を実行します。これらすべてのモジュールを複数の方法で組み合わせて、複雑なモバイルアプリケーションを設計できます。

以下の図は、NativeScriptフレームワークの概要を示しています-

NativeScript Application − NativeScriptフレームワークにより、開発者はAngularスタイルのアプリケーションまたはVueスタイルのアプリケーションのいずれかを使用できます。

JavaScript Modules − NativeScriptフレームワークは、UIモジュール、アプリケーションモジュール、コアモジュールなどとして明確に分類されたJavaScriptモジュールの豊富なセットを提供します。すべてのモジュールは、アプリケーションからいつでもアクセスして、あらゆるレベルの複雑なアプリケーションを作成できます。

JavaScript plugins− NativeScriptフレームワークは、プラットフォーム関連の機能にアクセスするためのJavaScriptプラグインの大規模なコレクションを提供します。モジュールはJavaScriptプラグインを使用して、プラットフォーム固有の機能を提供します。

Native plugins−ネイティブプラグインは、JavaScriptプラグインによってさらに使用されるシステム機能をラップするために、プラットフォーム固有の言語で記述されています。

Platform API −プラットフォームベンダーが提供するAPI。

つまり、NativeScriptアプリケーションは、モジュールを使用して作成および編成されています。モジュールは純粋なJavaScriptで記述されており、モジュールはプラグインを介して（必要に応じて）プラットフォーム関連の機能にアクセスし、最後にプラグインがプラットフォームAPIとJavaScriptAPIをブリッジします。

NativeScriptアプリケーションのワークフロー

前に学習したように、NativeScriptアプリケーションはモジュールで構成されています。すべてのモジュールが特定の機能を有効にします。NativeScriptアプリケーションをブートストラップするためのモジュールの2つの重要なカテゴリは次のとおりです。

ルートモジュール
ページモジュール

ルートモジュールとページモジュールは、アプリケーションモジュールとして分類できます。アプリケーションモジュールは、NativeScriptアプリケーションのエントリポイントです。これはページをブートストラップし、開発者がページのユーザーインターフェイスを作成できるようにし、最後にページのビジネスロジックの実行を可能にします。アプリケーションモジュールは、以下の3つの項目で構成されています-

XMLでコード化されたユーザーインターフェイスデザイン（例：page.xml / page.component.html）
CSSでコーディングされたスタイル（例：page.css / page.component.css）
JavaScriptのモジュールの実際のビジネスロジック（例：page.js / page.component.ts）

NativeScriptは、アプリケーションページを設計するための多くのUIコンポーネント（UIモジュールの下）を提供します。UIコンポーネントは、AngularベースのアプリケーションでXML形式またはHTML形式で表すことができます。アプリケーションモジュールは、UIコンポーネントを使用してページをデザインし、デザインを個別のXML、page.xml /page.component.htmlに保存します。デザインは、標準のCSSを使用してスタイルを設定できます。

アプリケーションモジュールは、デザインのスタイルを個別のCSS、page.css /page.component.cssに保存します。ページの機能は、JavaScript / TypeScriptを使用して実行できます。JavaScript/ TypeScriptは、プラットフォームの機能だけでなく、デザインにも完全にアクセスできます。アプリケーションモジュールは、別のファイルpage.js / page.component.tsを使用して、ページの実際の機能をコーディングします。

ルートモジュール

NativeScriptは、UIコンテナーを介してユーザーインターフェイスとユーザーインタラクションを管理します。すべてのUIコンテナーには、UIコンテナーがUIを管理するためのルートモジュールが必要です。NativeScriptアプリケーションには2種類のUIコンテナがあります-

Application Container−すべてのNativeScriptアプリケーションには1つのアプリケーションコンテナが必要であり、application.run（）メソッドを使用して設定されます。アプリケーションのUIを初期化します。

Model View Container− NativeScriptは、モデルビューコンテナを使用してモーダルダイアログを管理します。NativeScriptアプリケーションは、任意の数のモデルビューコンテナを持つことができます。

すべてのルートモジュールには、コンテンツとして1つのUIコンポーネントのみが必要です。UIコンポーネントは、その子として他のUIコンポーネントを持つことができます。NativeScriptは、子機能を備えたTabView、ScrollViewなどの多くのUIコンポーネントを提供します。これらをルートUIコンポーネントとして使用できます。1つの例外はフレームです。これには子オプションはありませんが、ルートコンポーネントとして使用できます。フレームには、ページモジュールをロードするためのオプションと、他のページモジュールに移動するためのオプションもあります。

ページモジュール

NativeScriptでは、すべてのページは基本的にページモジュールです。ページモジュールは、NativeScriptによって提供されるUIコンポーネントの豊富なセットを使用して設計されています。ページモジュールは、Frameコンポーネントを介して（defaultPage属性またはnavigate（）メソッドを使用して）アプリケーションにロードされ、ルートモジュールを使用してロードされます。ルートモジュールは、アプリケーションの起動時にapplication.run（）を使用して再度ロードされます。

アプリケーションのワークフローは、次の図のように表すことができます-

上記の図は、次の手順で詳細に説明されています。

NativeScriptアプリケーションが起動し、application.run（）メソッドを呼び出します。
application.run（）はルートモジュールをロードします。
ルートモジュールは、以下に指定されているUIコンポーネントのいずれかを使用して設計されています-
- Frame
- TabView
- SideDrawer
- 任意のレイアウトビュー
フレームコンポーネントは、指定されたページ（ページモジュール）をロードしてレンダリングされます。他のUIコンポーネントは、ルートモジュールで指定されたとおりにレンダリングされます。他のUIコンポーネントにも、メインコンテンツとしてページモジュールをロードするオプションがあります。

AngularベースのNativeScriptアプリケーションのワークフロー

以前に学習したように、NativeScriptフレームワークは、さまざまなカテゴリの開発者に対応するための複数の方法論を提供します。NativeScriptでサポートされている方法論は次のとおりです。

NativeScript Core −NativeScriptフレームワークの基本またはコアコンセプト
Angular + NativeScript −角度ベースの方法論
Vuejs + NativeScript −Vue.jsベースの方法論

AngularフレームワークがNativeScriptフレームワークにどのように組み込まれているかを学びましょう。

ステップ1

NativeScriptは、Angularアプリケーションをブートストラップするためのオブジェクト（platformNativeScriptDynamic）を提供します。platformNativeScriptDynamicには、アプリケーションを起動するために使用されるメソッドbootstrapModuleがあります。

Angularフレームワークを使用してアプリケーションをブートストラップするための構文は次のとおりです-

import { platformNativeScriptDynamic } from "nativescript-angular/platform"; 
import { AppModule } from "./app/app.module"; 
platformNativeScriptDynamic().bootstrapModule(AppModule);

ここに、

AppModule ルートモジュールです。

ステップ2

appモジュールの簡単な実装（指定されたコードの下）。

import { NgModule } from "@angular/core"; 
import { NativeScriptModule } from "nativescript-angular/nativescript.module"; 
import { AppRoutingModule } from "./app-routing.module"; 
import { AppComponent } from "./app.component"; 
@NgModule(
   {
      bootstrap: [
         AppComponent
      ], imports: [
         NativeScriptModule,
         AppRoutingModule
      ], declarations: [
         AppComponent
      ]
   }
) export class AppModule { }

ここに、

AppModuleAppComponentコンポーネントをロードしてアプリケーションを起動します。Angularコンポーネントはページに似ており、設計ロジックとプログラミングロジックの両方に使用されます。

AppComponent（app.component.ts）とそのプレゼンテーションロジック（app.component.css）の簡単な実装は次のとおりです。

app.component.ts

import { Component } from "@angular/core"; 
@Component(
   {
      selector: "ns-app",
      templateUrl: "app.component.html"
   }
)
export class AppComponent { }

ここに、

templateUrlは、コンポーネントのデザインを参照します。

app.component.html

<page-router-outlet></page-router-outlet>

ここに、

page-router-outlet Angularアプリケーションが接続される場所です。

要約すると、Angularフレームワークは、NativeScriptフレームワークと同様のモジュールで構成されていますが、わずかな違いがあります。Angularの各モジュールには、Angularコンポーネントとルーターセットアップファイル（page-routing.mocdule.ts）があります。ルーターはモジュールごとに設定され、ナビゲーションを処理します。Angularコンポーネントは、NativeSctiptコアのページに類似しています。

各コンポーネントには、UIデザイン（page.component.html）、スタイルシート（page.component.css）、およびJavaScript / TypeScriptコードファイル（page.component.ts）があります。