NativeScript - Architettura

NativeScript è un framework avanzato per creare applicazioni mobili. Nasconde la complessità della creazione di applicazioni mobili ed espone un'API piuttosto semplice per creare un'applicazione mobile altamente ottimizzata e avanzata. NativeScript consente anche agli sviluppatori entry level di creare facilmente applicazioni mobili sia su Android che su iOS.

Comprendiamo l'architettura del framework NativeScript in questo capitolo.

introduzione

Il concetto fondamentale del framework NativeScript è consentire allo sviluppatore di creare un'applicazione mobile in stile ibrido. L'applicazione ibrida utilizza l'API del browser specifica della piattaforma per ospitare un'applicazione Web all'interno di una normale applicazione mobile e fornisce l'accesso del sistema all'applicazione tramite l'API JavaScript.

NativeScript investe molto su JavaScript languageper fornire una struttura efficiente per gli sviluppatori. DaJavaScriptè lo standard de facto per la programmazione lato client (sviluppo Web) e ogni sviluppatore conosce bene il linguaggio JavaScript, aiuta gli sviluppatori a entrare facilmente nel framework NativeScript. A livello basso, NativeScript espone l'API nativa tramite una raccolta di plugin JavaScript chiamatiNative plugins.

NativeScript si basa sulle fondamenta dei plugin nativi e fornisce molti moduli JavaScript di alto livello e facili da usare . Ogni modulo esegue una funzionalità specifica come l'accesso a una telecamera, la progettazione di uno schermo, ecc. Tutti questi moduli possono essere combinati in più modi per progettare un'applicazione mobile complessa.

Il diagramma seguente mostra la panoramica di alto livello del framework NativeScript:

NativeScript Application - Il framework NativeScript consente allo sviluppatore di utilizzare l'applicazione in stile Angular o l'applicazione in stile Vue.

JavaScript Modules - Il framework NativeScript fornisce un ricco set di moduli JavaScript chiaramente classificati come moduli UI, moduli applicativi, moduli core, ecc. Tutti i moduli sono accessibili in qualsiasi momento dall'applicazione per scrivere qualsiasi livello di applicazione complessa.

JavaScript plugins- Il framework NativeScript fornisce un'ampia raccolta di plugin JavaScript per accedere alle funzionalità relative alla piattaforma. I moduli utilizzano i plugin JavaScript per fornire funzionalità specifiche della piattaforma.

Native plugins- I plugin nativi sono scritti in un linguaggio specifico della piattaforma per racchiudere la funzionalità del sistema che verrà ulteriormente utilizzata dal plugin JavaScript.

Platform API - API fornita dai fornitori della piattaforma.

In breve, l'applicazione NativeScript è scritta e organizzata utilizzando moduli. I moduli sono scritti in JavaScript puro ei moduli accedono alle funzionalità relative alla piattaforma (quando necessario) tramite plug-in e, infine, i plug-in collegano l'API della piattaforma e l'API JavaScript.

Flusso di lavoro di un'applicazione NativeScript

Come abbiamo appreso in precedenza, l'applicazione NativeScript è composta da moduli. Ogni modulo abilita una funzione specifica. Le due importanti categorie di moduli per avviare un'applicazione NativeScript sono le seguenti:

• Moduli di root

• Moduli di pagina

I moduli Root e Page possono essere classificati come moduli dell'applicazione. Il modulo dell'applicazione è il punto di ingresso dell'applicazione NativeScript. Avvia una pagina, consente allo sviluppatore di creare l'interfaccia utente della pagina e infine consente l'esecuzione della logica di business della pagina. Un modulo dell'applicazione è composto dai tre elementi seguenti:

• Design dell'interfaccia utente codificato in XML (ad esempio page.xml / page.component.html)

• Stili codificati in CSS (ad esempio page.css / page.component.css)

• Logica di business effettiva del modulo in JavaScript (ad esempio page.js / page.component.ts)

NativeScript fornisce molti componenti dell'interfaccia utente (in Modulo interfaccia utente) per progettare la pagina dell'applicazione. Il componente UI può essere rappresentato in formato XML o HTML in un'applicazione basata su Angular. Il modulo dell'applicazione utilizza il componente UI per progettare la pagina e memorizzare il progetto in XML separato, page.xml / page.component.html . Il design può essere stilizzato utilizzando CSS standard.

I moduli dell'applicazione memorizzano lo stile del design in CSS separati, page.css / page.component.css. La funzionalità della pagina può essere eseguita utilizzando JavaScript / TypeScript, che ha pieno accesso al design e alle funzionalità della piattaforma. Il modulo dell'applicazione utilizza un file separato, page.js / page.component.ts per codificare la funzionalità effettiva della pagina.

Moduli di root

NativeScript gestisce l'interfaccia utente e l'interazione dell'utente tramite i contenitori dell'interfaccia utente. Ogni contenitore dell'interfaccia utente dovrebbe avere un modulo radice e attraverso il quale il contenitore dell'interfaccia utente gestisce l'interfaccia utente. L'applicazione NativeScript ha due tipi di contenitori dell'interfaccia utente:

Application Container- Ogni applicazione NativeScript dovrebbe avere un contenitore dell'applicazione e verrà impostata utilizzando il metodo application.run (). Inizializza l'interfaccia utente dell'applicazione.

Model View Container- NativeScript gestisce le finestre di dialogo Modal utilizzando il contenitore della vista del modello. Un'applicazione NativeScript può avere un numero qualsiasi di contenitori di viste del modello.

Ogni modulo root dovrebbe avere un solo componente UI come contenuto. Il componente UI a sua volta può avere altri componenti UI come figli. NativeScript fornisce molti componenti dell'interfaccia utente come TabView, ScrollView, ecc., Con funzionalità figlio. Possiamo usarli come componente dell'interfaccia utente di root. Un'eccezione è Frame , che non ha un'opzione figlio ma può essere utilizzato come componente root. Frame fornisce opzioni per caricare i moduli di pagina e opzioni per navigare anche ad altri moduli di pagina .

Moduli di pagina

In NativeScript, ogni pagina è fondamentalmente un modulo di pagina . Il modulo Page è progettato utilizzando il ricco set di componenti dell'interfaccia utente forniti da NativeScript. I moduli della pagina vengono caricati nell'applicazione tramite il componente Frame (utilizzando il suo attributo defaultPage o utilizzando il metodo navigate ()), che a sua volta viene caricato utilizzando i moduli radice , che a loro volta vengono caricati utilizzando application.run () mentre l'applicazione è avviata.

Il flusso di lavoro dell'applicazione può essere rappresentato come nel diagramma sottostante -

Il diagramma sopra è spiegato in dettaglio nei seguenti passaggi:

• L'applicazione NativeScript avvia e chiama il metodo application.run ().

• application.run () carica un modulo Root .

• Il modulo radice è progettato utilizzando uno qualsiasi dei componenti dell'interfaccia utente come specificato di seguito:

  • Frame

  • TabView

  • SideDrawer

  • Qualsiasi visualizzazione layout

• Il componente Frame carica la pagina specificata (modulo Pagina) e ne viene eseguito il rendering. Gli altri componenti dell'interfaccia utente verranno renderizzati come specificato nel modulo radice . Un altro componente dell'interfaccia utente ha anche la possibilità di caricare i moduli di pagina come contenuto principale.

Flusso di lavoro dell'applicazione NativeScript basata su Angular

Come abbiamo appreso in precedenza, il framework NativeScript fornisce più metodologie per soddisfare diverse categorie di sviluppatori. Le metodologie supportate da NativeScript sono le seguenti:

• NativeScript Core - Concetto di base o di base di NativeScript Framework

• Angular + NativeScript - Metodologia basata sugli angoli

• Vuejs + NativeScript - Metodologia basata su Vue.js

Impariamo come il framework Angular è incorporato nel framework NativeScript.

Passo 1

NativeScript fornisce un oggetto (platformNativeScriptDynamic) per avviare l'applicazione Angular. platformNativeScriptDynamic ha un metodo, bootstrapModule, che viene utilizzato per avviare l'applicazione.

La sintassi per avviare l'applicazione utilizzando il framework Angular è la seguente:

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

Qui,

AppModule è il nostro modulo Root.

Passo 2

Una semplice implementazione (sotto il codice specificato) del modulo 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 { }

Qui,

AppModuleavvia l'applicazione caricando il componente AppComponent. I componenti angolari sono simili alle pagine e vengono utilizzati sia per la progettazione che per la logica di programmazione.

Una semplice implementazione di AppComponent (app.component.ts) e della sua logica di presentazione (app.component.css) è la seguente:

app.component.ts

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

Qui,

templateUrl fa riferimento al design del componente.

app.component.html

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

Qui,

page-router-outlet è il luogo in cui viene allegata l'applicazione Angular.

In sintesi, il framework Angular è composto da moduli simili al framework NativeScript con leggere differenze. Ogni modulo in Angular avrà un componente Angular e un file di configurazione del router (page-routing.mocdule.ts). Il router è impostato per modulo e si occupa della navigazione. I componenti angolari sono analoghi alle pagine nel core NativeSctipt.

Ogni componente avrà un design dell'interfaccia utente (page.component.html), un foglio di stile (page.component.css) e un file di codice JavaScript / TypeScript (page.component.ts).