NativeScript - Arquitectura

NativeScript es un marco avanzado para crear aplicaciones móviles. Oculta la complejidad de la creación de aplicaciones móviles y expone una API bastante simple para crear aplicaciones móviles avanzadas y altamente optimizadas. NativeScript permite incluso a los desarrolladores de nivel de entrada crear fácilmente aplicaciones móviles tanto en Android como en iOS.

Entendamos la arquitectura del marco NativeScript en este capítulo.

Introducción

El concepto central del marco de NativeScript es permitir al desarrollador crear una aplicación móvil de estilo híbrido. La aplicación híbrida utiliza la API de navegador específica de la plataforma para alojar una aplicación web dentro de una aplicación móvil normal y proporciona acceso del sistema a la aplicación a través de la API de JavaScript.

NativeScript invierte mucho en JavaScript languagepara proporcionar un marco eficiente para los desarrolladores. Ya queJavaScriptes un estándar de facto para la programación del lado del cliente (desarrollo web) y todos los desarrolladores conocen bien el lenguaje JavaScript, lo que ayuda a los desarrolladores a acceder fácilmente al marco de NativeScript. En el nivel bajo, NativeScript expone la API nativa a través de una colección de complementos de JavaScript llamadosNative plugins.

NativeScript se basa en los complementos nativos y proporciona muchos módulos JavaScript de alto nivel y fáciles de usar . Cada módulo tiene una funcionalidad específica como acceder a una cámara, diseñar una pantalla, etc. Todos estos módulos se pueden combinar de múltiples formas para diseñar una aplicación móvil compleja.

El siguiente diagrama muestra la descripción general de alto nivel del marco de NativeScript:

NativeScript Application - El marco de NativeScript permite al desarrollador usar una aplicación de estilo angular o una aplicación de estilo Vue.

JavaScript Modules - El marco de NativeScript proporciona un amplio conjunto de módulos JavaScript claramente categorizados como módulos de interfaz de usuario, módulos de aplicación, módulos principales, etc. Se puede acceder a todos los módulos por aplicación en cualquier momento para escribir cualquier nivel de aplicación compleja.

JavaScript plugins- El marco de NativeScript proporciona una gran colección de complementos de JavaScript para acceder a la funcionalidad relacionada con la plataforma. Los módulos utilizan los complementos de JavaScript para proporcionar una funcionalidad específica de la plataforma.

Native plugins- Los complementos nativos están escritos en un lenguaje específico de la plataforma para envolver la funcionalidad del sistema que será utilizada por el complemento de JavaScript.

Platform API - API proporcionada por los proveedores de la plataforma.

En resumen, la aplicación NativeScript está escrita y organizada mediante módulos. Los módulos están escritos en JavaScript puro y los módulos acceden a la funcionalidad relacionada con la plataforma (cuando sea necesario) a través de complementos y, finalmente, los complementos unen la API de la plataforma y la API de JavaScript.

Flujo de trabajo de una aplicación NativeScript

Como aprendimos anteriormente, la aplicación NativeScript se compone de módulos. Todos y cada uno de los módulos habilitan una función específica. Las dos categorías importantes de módulo para arrancar una aplicación NativeScript son las siguientes:

  • Módulos raíz

  • Módulos de página

Los módulos raíz y de página se pueden clasificar como módulos de aplicación. El módulo de la aplicación es el punto de entrada de la aplicación NativeScript. Inicia una página, permite al desarrollador crear una interfaz de usuario de la página y finalmente permite la ejecución de la lógica empresarial de la página. Un módulo de aplicación consta de los siguientes tres elementos:

  • Diseño de interfaz de usuario codificado en XML (por ejemplo, page.xml / page.component.html)

  • Estilos codificados en CSS (por ejemplo, page.css / page.component.css)

  • Lógica empresarial real del módulo en JavaScript (por ejemplo, page.js / page.component.ts)

NativeScript proporciona muchos componentes de la interfaz de usuario (en el módulo UI) para diseñar la página de la aplicación. El componente UI se puede representar en formato XML o HTML en una aplicación basada en Angular. El módulo de aplicación utiliza el componente UI para diseñar la página y almacenar el diseño en XML separado, page.xml / page.component.html . El diseño se puede diseñar utilizando CSS estándar.

Los módulos de la aplicación almacenan el estilo del diseño en CSS separado, page.css / page.component.css. La funcionalidad de la página se puede realizar utilizando JavaScript / TypeScript, que tiene acceso completo al diseño y a las funciones de la plataforma. El módulo de la aplicación usa un archivo separado, page.js / page.component.ts para codificar la funcionalidad real de la página.

Módulos raíz

NativeScript gestiona la interfaz de usuario y la interacción del usuario a través de contenedores de UI. Cada contenedor de IU debe tener un módulo raíz y a través del cual el contenedor de IU administra la IU. La aplicación NativeScript tiene dos tipos de contenedores de IU:

Application Container- Cada aplicación de NativeScript debe tener un contenedor de aplicación y se configurará mediante el método application.run (). Inicializa la interfaz de usuario de la aplicación.

Model View Container- NativeScript administra los cuadros de diálogo modales mediante el contenedor de vista de modelo. Una aplicación NativeScript puede tener cualquier número de contenedor de vista de modelo.

Cada módulo raíz debe tener solo un componente de interfaz de usuario como contenido. El componente de IU, a su vez, puede tener otros componentes de IU como hijos. NativeScript proporciona muchos componentes de IU como TabView, ScrollView, etc., con función secundaria. Podemos usarlos como componente raíz de la interfaz de usuario. Una excepción es Frame , que no tiene opción secundaria pero se puede usar como componente raíz. Frame ofrece opciones para cargar módulos de página y opciones para navegar a otros módulos de página también.

Módulos de página

En NativeScript, todas y cada una de las páginas son básicamente un módulo de página . El módulo de página está diseñado utilizando el rico conjunto de componentes de interfaz de usuario proporcionados por NativeScript. Los módulos de página se cargan en la aplicación a través del componente Frame (usando su atributo defaultPage o usando el método navigate ()), que a su vez se cargan usando módulos raíz , que nuevamente se cargan usando application.run () mientras se inicia la aplicación.

El flujo de trabajo de la aplicación se puede representar como en el siguiente diagrama:

El diagrama anterior se explica en detalle en los siguientes pasos:

  • La aplicación NativeScript inicia y llama al método application.run ().

  • application.run () carga un módulo raíz .

  • El módulo raíz está diseñado utilizando cualquiera de los componentes de la interfaz de usuario como se especifica a continuación:

    • Frame

    • TabView

    • SideDrawer

    • Cualquier vista de diseño

  • El componente Frame carga la página especificada (módulo de página) y se renderiza. Otros componentes de la interfaz de usuario se procesarán como se especifica en el módulo raíz . Otro componente de la interfaz de usuario también tiene la opción de cargar módulos de página como contenido principal.

Flujo de trabajo de la aplicación NativeScript basada en Angular

Como aprendimos anteriormente, el marco de NativeScript proporciona múltiples metodologías para atender diferentes categorías de desarrolladores. Las metodologías compatibles con NativeScript son las siguientes:

  • NativeScript Core - Concepto básico o central de NativeScript Framework

  • Angular + NativeScript - Metodología basada en angular

  • Vuejs + NativeScript - Metodología basada en Vue.js

Aprendamos cómo se incorpora el marco Angular en el marco de NativeScript.

Paso 1

NativeScript proporciona un objeto (platformNativeScriptDynamic) para iniciar la aplicación Angular. platformNativeScriptDynamic tiene un método, bootstrapModule, que se utiliza para iniciar la aplicación.

La sintaxis para arrancar la aplicación usando el marco Angular es la siguiente:

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

Aquí,

AppModule es nuestro módulo raíz.

Paso 2

Una implementación simple (debajo del código especificado) del módulo de la aplicación.

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

Aquí,

AppModuleinicia la aplicación cargando el componente AppComponent. Los componentes angulares son similares a las páginas y se utilizan tanto para el diseño como para la lógica de programación.

Una implementación simple de AppComponent (app.component.ts) y su lógica de presentación (app.component.css) es la siguiente:

app.component.ts

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

Aquí,

templateUrl hace referencia al diseño del componente.

app.component.html

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

Aquí,

page-router-outlet es el lugar donde se adjunta la aplicación Angular.

En resumen, el framework Angular está compuesto por módulos similares al framework NativeScript con ligeras diferencias. Cada módulo en Angular tendrá un componente Angular y un archivo de configuración del enrutador (page-routing.mocdule.ts). El enrutador se configura por módulo y se encarga de la navegación. Los componentes angulares son análogos a las páginas en el núcleo de NativeSctipt.

Cada componente tendrá un diseño de interfaz de usuario (page.component.html), una hoja de estilo (page.component.css) y un archivo de código JavaScript / TypeScript (page.component.ts).