NativeScript - Architecture

NativeScript est un framework avancé pour créer une application mobile. Il cache la complexité de la création d'une application mobile et expose une API assez simple pour créer une application mobile hautement optimisée et avancée. NativeScript permet même aux développeurs débutants de créer facilement des applications mobiles sous Android et iOS.

Comprenons l'architecture du framework NativeScript dans ce chapitre.

introduction

Le concept de base du framework NativeScript est de permettre au développeur de créer une application mobile de style hybride. L'application hybride utilise l'API de navigateur spécifique à la plate-forme pour héberger une application Web dans une application mobile normale et fournit un accès système à l'application via l'API JavaScript.

NativeScript investit massivement dans JavaScript languagepour fournir un cadre efficace aux développeurs. DepuisJavaScriptest un standard de facto pour la programmation côté client (développement Web) et chaque développeur connaît bien le langage JavaScript, il aide les développeurs à entrer facilement dans le framework NativeScript. Au bas niveau, NativeScript expose l'API native via une collection de plugins JavaScript appelésNative plugins.

NativeScript s'appuie sur les plugins natifs et fournit de nombreux modules JavaScript de haut niveau et faciles à utiliser . Chaque module fait une fonctionnalité spécifique comme l'accès à une caméra, la conception d'un écran, etc. Tous ces modules peuvent être combinés de plusieurs manières pour concevoir une application mobile complexe.

Le diagramme ci-dessous montre la vue d'ensemble de haut niveau du framework NativeScript -

NativeScript Application - Le framework NativeScript permet aux développeurs d'utiliser une application de style angulaire ou une application de style Vue.

JavaScript Modules - Le framework NativeScript fournit un ensemble riche de modules JavaScript clairement catégorisés en modules d'interface utilisateur, modules d'application, modules de base, etc. Tous les modules sont accessibles par application à tout moment pour écrire n'importe quel niveau d'application complexe.

JavaScript plugins- Le framework NativeScript fournit une grande collection de plugins JavaScript pour accéder aux fonctionnalités liées à la plate-forme. Modules utilise les plugins JavaScript pour fournir des fonctionnalités spécifiques à la plate-forme.

Native plugins- Les plugins natifs sont écrits dans un langage spécifique à la plate-forme pour envelopper les fonctionnalités du système qui seront ensuite utilisées par le plugin JavaScript.

Platform API - API fournie par les fournisseurs de plate-forme.

En bref, l'application NativeScript est écrite et organisée à l'aide de modules. Les modules sont écrits en JavaScript pur et les modules accèdent aux fonctionnalités liées à la plate-forme (chaque fois que nécessaire) via des plugins et enfin, les plugins relient l'API de la plate-forme et l'API JavaScript.

Flux de travail d'une application NativeScript

Comme nous l'avons appris précédemment, l'application NativeScript est composée de modules. Chaque module permet une fonctionnalité spécifique. Les deux catégories importantes de modules pour amorcer une application NativeScript sont les suivantes:

  • Modules racine

  • Modules de page

Les modules racine et page peuvent être classés en tant que modules d'application. Le module d'application est le point d'entrée de l'application NativeScript. Il amorce une page, permet au développeur de créer l'interface utilisateur de la page et permet enfin l'exécution de la logique métier de la page. Un module d'application se compose de trois éléments ci-dessous -

  • Conception de l'interface utilisateur codée en XML (par exemple page.xml / page.component.html)

  • Styles codés en CSS (par exemple page.css / page.component.css)

  • Logique métier réelle du module en JavaScript (par exemple page.js / page.component.ts)

NativeScript fournit de nombreux composants d'interface utilisateur (sous Module d'interface utilisateur) pour concevoir la page de l'application. Le composant UI peut être représenté au format XML ou au format HTML dans une application basée sur Angular. Le module d'application utilise le composant d'interface utilisateur pour concevoir la page et stocker la conception dans un fichier XML distinct, page.xml / page.component.html . Le design peut être stylisé à l'aide de CSS standard.

Les modules d'application stockent le style de la conception dans un CSS distinct, page.css / page.component.css. La fonctionnalité de la page peut être effectuée à l'aide de JavaScript / TypeScript, qui a un accès complet à la conception ainsi qu'aux fonctionnalités de la plate-forme. Le module d'application utilise un fichier séparé, page.js / page.component.ts pour coder la fonctionnalité réelle de la page.

Modules racine

NativeScript gère l'interface utilisateur et l'interaction utilisateur via des conteneurs d'interface utilisateur. Chaque conteneur d'interface utilisateur doit avoir un module racine et à travers lequel le conteneur d'interface utilisateur gère l'interface utilisateur. L'application NativeScript a deux types de conteneurs d'interface utilisateur -

Application Container- Chaque application NativeScript doit avoir un conteneur d'application et il sera défini à l'aide de la méthode application.run (). Il initialise l'interface utilisateur de l'application.

Model View Container- NativeScript gère les boîtes de dialogue modales à l'aide du conteneur de vue de modèle. Une application NativeScript peut avoir n'importe quel nombre de conteneurs de vue de modèle.

Chaque module racine ne doit avoir qu'un seul composant d'interface utilisateur comme contenu. Le composant d'interface utilisateur peut à son tour avoir d'autres composants d'interface utilisateur comme enfants. NativeScript fournit de nombreux composants d'interface utilisateur tels que TabView, ScrollView, etc., avec une fonction enfant. Nous pouvons les utiliser comme composant d'interface utilisateur racine. Une exception est Frame , qui n'a pas d'option enfant mais peut être utilisé comme composant racine. Frame fournit des options pour charger des modules de page et des options pour accéder également à d'autres modules de page .

Modules de page

Dans NativeScript, chaque page est essentiellement un module de page . Le module Page est conçu à l'aide du riche ensemble de composants d'interface utilisateur fournis par NativeScript. Les modules de page sont chargés dans l'application via le composant Frame (en utilisant son attribut defaultPage ou en utilisant la méthode navigate ()), qui à son tour est chargé à l'aide des modules racine , qui sont à nouveau chargés à l'aide de application.run () au démarrage de l'application.

Le flux de travail de l'application peut être représenté comme dans le diagramme ci-dessous -

Le diagramme ci-dessus est expliqué en détail dans les étapes suivantes -

  • L'application NativeScript démarre et appelle la méthode application.run ().

  • application.run () charge un module racine .

  • Le module racine est conçu en utilisant l'un des composants de l'interface utilisateur comme spécifié ci-dessous -

    • Frame

    • TabView

    • SideDrawer

    • Toute vue de mise en page

  • Le composant Frame charge la page spécifiée (module Page) et est rendu. Les autres composants de l'interface utilisateur seront rendus comme spécifié dans le module racine . Un autre composant de l'interface utilisateur a également la possibilité de charger des modules de page comme contenu principal.

Flux de travail de l'application NativeScript basée sur Angular

Comme nous l'avons appris précédemment, le framework NativeScript fournit plusieurs méthodologies pour répondre à différentes catégories de développeurs. Les méthodologies prises en charge par NativeScript sont les suivantes -

  • NativeScript Core - Concept de base ou de base de NativeScript Framework

  • Angular + NativeScript - Méthodologie basée sur angulaire

  • Vuejs + NativeScript - Méthodologie basée sur Vue.js

Apprenons comment le framework Angular est intégré au framework NativeScript.

Étape 1

NativeScript fournit un objet (platformNativeScriptDynamic) pour amorcer l'application Angular. platformNativeScriptDynamic a une méthode, bootstrapModule, qui est utilisée pour démarrer l'application.

La syntaxe pour amorcer l'application à l'aide du framework Angular est la suivante -

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

Ici,

AppModule est notre module racine.

Étape 2

Une implémentation simple (sous le code spécifié) du module d'application.

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

Ici,

AppModuledémarre l'application en chargeant le composant AppComponent. Les composants angulaires sont similaires aux pages et sont utilisés à la fois pour la logique de conception et de programmation.

Une implémentation simple d'AppComponent (app.component.ts) et de sa logique de présentation (app.component.css) est la suivante -

app.component.ts

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

Ici,

templateUrl fait référence à la conception du composant.

app.component.html

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

Ici,

page-router-outlet est l'endroit où l'application Angular est attachée.

En résumé, le framework Angular est composé de modules similaires au framework NativeScript avec de légères différences. Chaque module de l'Angular aura un composant Angular et un fichier de configuration du routeur (page-routing.mocdule.ts). Le routeur est paramétré par module et il s'occupe de la navigation. Les composants angulaires sont des analogues aux pages dans NativeSctipt core.

Chaque composant aura une conception d'interface utilisateur (page.component.html), une feuille de style (page.component.css) et un fichier de code JavaScript / TypeScript (page.component.ts).