NativeScript - Architektur

NativeScript ist ein erweitertes Framework zum Erstellen mobiler Anwendungen. Es verbirgt die Komplexität beim Erstellen mobiler Anwendungen und bietet eine recht einfache API zum Erstellen hochoptimierter und fortschrittlicher mobiler Anwendungen. Mit NativeScript können selbst Einsteiger problemlos mobile Anwendungen für Android und iOS erstellen.

Lassen Sie uns die Architektur des NativeScript-Frameworks in diesem Kapitel verstehen.

Einführung

Das Kernkonzept des NativeScript-Frameworks besteht darin, dem Entwickler die Erstellung einer mobilen Anwendung im Hybridstil zu ermöglichen. Die Hybridanwendung verwendet die plattformspezifische Browser-API, um eine Webanwendung in einer normalen mobilen Anwendung zu hosten, und bietet Systemzugriff auf die Anwendung über die JavaScript-API.

NativeScript investiert stark in die JavaScript languageein effizientes Framework für Entwickler bereitzustellen. Schon seitJavaScriptist de facto Standard für die clientseitige Programmierung (Webentwicklung) und jeder Entwickler kennt die JavaScript-Sprache. Sie hilft Entwicklern, einfach in das NativeScript-Framework einzusteigen. Auf der niedrigen Ebene macht NativeScript die native API über eine Sammlung von JavaScript-Plugins verfügbar, die aufgerufen werdenNative plugins.

NativeScript baut auf Native Plugins auf und bietet viele hochwertige und einfach zu verwendende JavaScript-Module . Jedes Modul bietet eine bestimmte Funktionalität wie den Zugriff auf eine Kamera, das Entwerfen eines Bildschirms usw. Alle diese Module können auf verschiedene Arten kombiniert werden, um eine komplexe mobile Anwendung zu erstellen.

Das folgende Diagramm zeigt die allgemeine Übersicht über das NativeScript-Framework -

NativeScript Application - Mit dem NativeScript-Framework können Entwickler entweder Angular Style-Anwendungen oder Vue Style-Anwendungen verwenden.

JavaScript Modules - Das NativeScript-Framework bietet eine Vielzahl von JavaScript-Modulen, die klar in UI-Module, Anwendungsmodule, Kernmodule usw. unterteilt sind. Auf alle Module kann jederzeit von der Anwendung zugegriffen werden, um eine komplexe Anwendungsebene zu schreiben.

JavaScript plugins- Das NativeScript-Framework bietet eine große Sammlung von JavaScript-Plugins für den Zugriff auf die plattformbezogenen Funktionen. Module verwendet die JavaScript-Plugins, um plattformspezifische Funktionen bereitzustellen.

Native plugins- Native Plugins werden in einer plattformspezifischen Sprache geschrieben, um die Systemfunktionalität zu verpacken, die vom JavaScript-Plugin weiter verwendet wird.

Platform API - API von Plattformanbietern bereitgestellt.

Kurz gesagt, die NativeScript-Anwendung wird mithilfe von Modulen geschrieben und organisiert. Module sind in reinem JavaScript geschrieben und die Module greifen über Plugins (wann immer erforderlich) auf die plattformbezogene Funktionalität zu. Schließlich verbinden die Plugins die Plattform-API und die JavaScript-API.

Workflow einer NativeScript-Anwendung

Wie wir bereits erfahren haben, besteht die NativeScript-Anwendung aus Modulen. Jedes Modul aktiviert eine bestimmte Funktion. Die zwei wichtigen Kategorien von Modulen zum Booten einer NativeScript-Anwendung lauten wie folgt:

  • Root-Module

  • Seitenmodule

Root- und Page-Module können als Anwendungsmodule kategorisiert werden. Das Anwendungsmodul ist der Einstiegspunkt der NativeScript-Anwendung. Es bootet eine Seite, ermöglicht dem Entwickler das Erstellen einer Benutzeroberfläche der Seite und ermöglicht schließlich die Ausführung der Geschäftslogik der Seite. Ein Anwendungsmodul besteht aus drei Elementen:

  • In XML codiertes Design der Benutzeroberfläche (z. B. page.xml / page.component.html)

  • In CSS codierte Stile (z. B. page.css / page.component.css)

  • Aktuelle Geschäftslogik des Moduls in JavaScript (zB page.js / page.component.ts)

NativeScript bietet viele UI-Komponenten (unter UI-Modul) zum Entwerfen der Anwendungsseite. Die UI-Komponente kann in einer Angular-basierten Anwendung im XML-Format oder im HTML-Format dargestellt werden. Das Anwendungsmodul verwendet die UI-Komponente, um die Seite zu entwerfen und das Design in separatem XML, page.xml / page.component.html , zu speichern . Das Design kann mit Standard-CSS gestaltet werden.

Anwendungsmodule speichern den Stil des Entwurfs in separatem CSS, page.css / page.component.css. Die Funktionalität der Seite kann mit JavaScript / TypeScript erfolgen, das vollen Zugriff auf das Design sowie die Plattformfunktionen hat. Das Anwendungsmodul verwendet eine separate Datei, page.js / page.component.ts, um die tatsächliche Funktionalität der Seite zu codieren.

Root-Module

NativeScript verwaltet die Benutzeroberfläche und die Benutzerinteraktion über UI-Container. Jeder UI-Container sollte ein Root-Modul haben, über das der UI-Container die UI verwaltet. NativeScript-Anwendungen verfügen über zwei Arten von UI-Containern:

Application Container- Jede NativeScript-Anwendung sollte über einen Anwendungscontainer verfügen, der mithilfe der application.run () -Methode festgelegt wird. Es initialisiert die Benutzeroberfläche der Anwendung.

Model View Container- NativeScript verwaltet die modalen Dialoge mithilfe des Modellansichtscontainers. Eine NativeScript-Anwendung kann eine beliebige Anzahl von Modellansichtscontainern enthalten.

Jedes Root-Modul sollte nur eine UI-Komponente als Inhalt haben. Die UI-Komponente kann wiederum andere UI-Komponenten als untergeordnete Komponenten haben. NativeScript bietet viele UI-Komponenten wie TabView, ScrollView usw. mit untergeordneter Funktion. Wir können diese als Root-UI-Komponente verwenden. Eine Ausnahme ist Frame , das keine untergeordnete Option hat, aber als Stammkomponente verwendet werden kann. Frame bietet Optionen zum Laden von Seitenmodulen und Optionen zum Navigieren zu anderen Seitenmodulen .

Seitenmodule

In NativeScript, jede einzelne Seite ist im Grunde ein Seitenmodul . Das Seitenmodul wurde unter Verwendung der umfangreichen UI-Komponenten von NativeScript entwickelt. Seitenmodule werden über die Frame- Komponente (mithilfe ihres defaultPage-Attributs oder mithilfe der navig () -Methode) in die Anwendung geladen, die wiederum mithilfe von Root-Modulen geladen wird , die wiederum mithilfe von application.run () geladen werden, während die Anwendung gestartet wird.

Der Arbeitsablauf der Anwendung kann wie im folgenden Diagramm dargestellt werden -

Das obige Diagramm wird in den folgenden Schritten ausführlich erläutert -

  • Die NativeScript-Anwendung wird gestartet und ruft die application.run () -Methode auf.

  • application.run () lädt ein Root-Modul .

  • Das Root-Modul wird unter Verwendung einer der unten angegebenen UI-Komponenten entwickelt.

    • Frame

    • TabView

    • SideDrawer

    • Beliebige Layoutansicht

  • Die Rahmenkomponente lädt die angegebene Seite (Seitenmodul) und wird gerendert. Andere UI-Komponenten werden wie im Root-Modul angegeben gerendert . Andere UI-Komponenten haben auch die Möglichkeit, Seitenmodule als Hauptinhalt zu laden .

Workflow der Angular-basierten NativeScript-Anwendung

Wie wir bereits erfahren haben, bietet das NativeScript-Framework mehrere Methoden, um verschiedene Kategorien von Entwicklern zu bedienen. Die von NativeScript unterstützten Methoden lauten wie folgt:

  • NativeScript Core - Grund- oder Kernkonzept des NativeScript Framework

  • Angular + NativeScript - Winkelbasierte Methodik

  • Vuejs + NativeScript - Vue.js basierte Methodik

Lassen Sie uns lernen, wie das Angular-Framework in das NativeScript-Framework integriert wird.

Schritt 1

NativeScript bietet ein Objekt (platformNativeScriptDynamic) zum Booten der Angular-Anwendung. platformNativeScriptDynamic verfügt über eine Methode, bootstrapModule, mit der die Anwendung gestartet wird.

Die Syntax zum Booten der Anwendung mithilfe des Angular-Frameworks lautet wie folgt:

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

Hier,

AppModule ist unser Root-Modul.

Schritt 2

Eine einfache Implementierung (unter dem angegebenen Code) des App-Moduls.

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 { }

Hier,

AppModuleStartet die Anwendung durch Laden der AppComponent-Komponente. Winkelkomponenten ähneln Seiten und werden sowohl für die Entwurfs- als auch für die Programmierlogik verwendet.

Eine einfache Implementierung von AppComponent (app.component.ts) und seiner Präsentationslogik (app.component.css) lautet wie folgt:

app.component.ts

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

Hier,

templateUrl bezieht sich auf das Design der Komponente.

app.component.html

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

Hier,

page-router-outlet ist der Ort, an dem die Angular-Anwendung angehängt wird.

Zusammenfassend besteht das Angular-Framework aus Modulen, die dem NativeScript-Framework mit geringfügigen Unterschieden ähnlich sind. Jedes Modul im Angular verfügt über eine Angular-Komponente und eine Router-Setup-Datei (page-routing.mocdule.ts). Der Router wird pro Modul eingestellt und kümmert sich um die Navigation. Winkelkomponenten sind analog zu Seiten im NativeSctipt-Kern.

Jede Komponente verfügt über ein UI-Design (page.component.html), ein Stylesheet (page.component.css) und eine JavaScript / TypeScript-Codedatei (page.component.ts).