NativeScript - Arquitetura

NativeScript é uma estrutura avançada para criar aplicativos móveis. Ele oculta a complexidade da criação de aplicativos móveis e expõe uma API bastante simples para criar aplicativos móveis avançados e altamente otimizados. O NativeScript permite que até mesmo os desenvolvedores iniciantes criem facilmente aplicativos móveis no Android e no iOS.

Vamos entender a arquitetura da estrutura NativeScript neste capítulo.

Introdução

O conceito central da estrutura NativeScript é permitir que o desenvolvedor crie um aplicativo móvel de estilo híbrido. O aplicativo híbrido usa a API do navegador específica da plataforma para hospedar um aplicativo da web dentro de um aplicativo móvel normal e fornece acesso do sistema ao aplicativo por meio da API JavaScript.

NativeScript investe pesadamente no JavaScript languagepara fornecer uma estrutura eficiente para desenvolvedores. Desde aJavaScripté o padrão de fato para a programação do lado do cliente (desenvolvimento Web) e todo desenvolvedor está bem ciente da linguagem JavaScript. Isso ajuda os desenvolvedores a entrar facilmente na estrutura NativeScript. No nível inferior, NativeScript expõe a API nativa por meio de uma coleção de plug-ins JavaScript chamadosNative plugins.

NativeScript se baseia nos plug-ins nativos e fornece muitos módulos JavaScript de alto nível e fáceis de usar . Cada módulo executa uma funcionalidade específica, como acessar uma câmera, projetar uma tela, etc. Todos esses módulos podem ser combinados de várias maneiras para arquitetar um aplicativo móvel complexo.

O diagrama abaixo mostra a visão geral de alto nível da estrutura NativeScript -

NativeScript Application - A estrutura NativeScript permite que o desenvolvedor use o aplicativo de estilo Angular ou o aplicativo de Estilo Vue.

JavaScript Modules - A estrutura NativeScript fornece um rico conjunto de módulos JavaScript claramente categorizados como Módulos de IU, Módulos de aplicativo, Módulos principais, etc. Todos os módulos podem ser acessados ​​pelo aplicativo a qualquer momento para escrever qualquer nível de aplicativo complexo.

JavaScript plugins- A estrutura NativeScript fornece uma grande coleção de plug-ins JavaScript para acessar a funcionalidade relacionada à plataforma. Módulos usa os plug-ins JavaScript para fornecer funcionalidade específica da plataforma.

Native plugins- Plug-ins nativos são escritos em linguagem específica de plataforma para empacotar a funcionalidade do sistema que será posteriormente usada pelo plug-in JavaScript.

Platform API - API fornecida por fornecedores de plataforma.

Resumindo, o aplicativo NativeScript é escrito e organizado usando módulos. Os módulos são escritos em JavaScript puro e os módulos acessam a funcionalidade relacionada à plataforma (sempre que necessário) por meio de plug-ins e, por fim, os plug-ins fazem a ponte entre a API da plataforma e a API do JavaScript.

Fluxo de trabalho de um aplicativo NativeScript

Como aprendemos anteriormente, o aplicativo NativeScript é composto de módulos. Cada módulo habilita um recurso específico. As duas categorias importantes de módulo para inicializar um aplicativo NativeScript são as seguintes -

  • Módulos Raiz

  • Módulos de página

Os módulos raiz e página podem ser categorizados como módulos de aplicativo. O módulo do aplicativo é o ponto de entrada do aplicativo NativeScript. Ele inicializa uma página, permite que o desenvolvedor crie a interface do usuário da página e, finalmente, permite a execução da lógica de negócios da página. Um módulo de aplicação consiste em três itens abaixo -

  • Design da interface do usuário codificado em XML (por exemplo, page.xml / page.component.html)

  • Estilos codificados em CSS (por exemplo, page.css / page.component.css)

  • Lógica de negócios real do módulo em JavaScript (por exemplo, page.js / page.component.ts)

NativeScript fornece muitos componentes de UI (no Módulo de UI) para projetar a página do aplicativo. O componente UI pode ser representado em formato XML ou HTML em aplicativos baseados em Angular. O módulo do aplicativo usa o componente UI para projetar a página e armazenar o design em XML separado, page.xml / page.component.html . O design pode ser estilizado usando CSS padrão.

Os módulos do aplicativo armazenam o estilo do design em CSS separado, page.css / page.component.css. A funcionalidade da página pode ser feita usando JavaScript / TypeScript, que tem acesso total ao design, bem como aos recursos da plataforma. O módulo de aplicativo usa um arquivo separado, page.js / page.component.ts para codificar a funcionalidade real da página.

Módulos Raiz

NativeScript gerencia a interface do usuário e a interação do usuário por meio de contêineres de IU. Cada contêiner de IU deve ter um Módulo raiz e por meio do qual o contêiner de IU gerencia a IU. O aplicativo NativeScript tem dois tipos de contêineres de IU -

Application Container- Cada aplicativo NativeScript deve ter um contêiner de aplicativo e ele será definido usando o método application.run (). Ele inicializa a IU do aplicativo.

Model View Container- NativeScript gerencia os diálogos modais usando o contêiner de visualização do modelo. Um aplicativo NativeScript pode ter qualquer número de contêineres de visualização de modelo.

Cada módulo raiz deve ter apenas um componente de interface do usuário como seu conteúdo. O componente de IU, por sua vez, pode ter outros componentes de IU como seus filhos. NativeScript fornece muitos componentes de IU como TabView, ScrollView, etc., com recurso filho. Podemos usá-los como um componente de UI raiz. Uma exceção é o Quadro , que não tem opção filho, mas pode ser usado como componente raiz. Frame fornece opções para carregar Módulos de Página e opções para navegar para outros módulos de página também.

Módulos de página

Em NativeScript, cada página é basicamente um Módulo de página . O módulo de página é projetado usando o rico conjunto de componentes de IU fornecidos pelo NativeScript. Módulos de página são carregados no aplicativo por meio do componente Frame (usando seu atributo defaultPage ou usando o método navigate ()), que por sua vez são carregados usando Módulos Raiz , que por sua vez são carregados usando application.run () enquanto o aplicativo é iniciado.

O fluxo de trabalho do aplicativo pode ser representado como no diagrama abaixo -

O diagrama acima é explicado em detalhes nas etapas a seguir -

  • O aplicativo NativeScript inicia e chama o método application.run ().

  • application.run () carrega um módulo Root .

  • O Módulo raiz é projetado usando qualquer um dos componentes da IU, conforme especificado abaixo -

    • Frame

    • TabView

    • SideDrawer

    • Qualquer visualização de layout

  • O componente Frame carrega a página especificada (módulo Página) e é renderizado. Outros componentes da IU serão renderizados conforme especificado no Módulo Raiz . Outro componente de IU também tem a opção de carregar Módulos de Página como seu conteúdo principal.

Fluxo de trabalho do aplicativo NativeScript baseado em Angular

Como aprendemos anteriormente, a estrutura NativeScript fornece várias metodologias para atender a diferentes categorias de desenvolvedores. As metodologias suportadas pelo NativeScript são as seguintes -

  • NativeScript Core - Conceito básico ou central do NativeScript Framework

  • Angular + NativeScript - Metodologia de base angular

  • Vuejs + NativeScript - Metodologia baseada em Vue.js

Vamos aprender como a estrutura Angular é incorporada à estrutura NativeScript.

Passo 1

NativeScript fornece um objeto (platformNativeScriptDynamic) para inicializar o aplicativo Angular. platformNativeScriptDynamic tem um método, bootstrapModule, que é usado para iniciar o aplicativo.

A sintaxe para inicializar o aplicativo usando a estrutura Angular é a seguinte -

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

Aqui,

AppModule é o nosso módulo Root.

Passo 2

Uma implementação simples (abaixo do código especificado) do módulo do 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 { }

Aqui,

AppModuleinicia o aplicativo carregando o componente AppComponent. Os componentes angulares são semelhantes às páginas e são usados ​​para a lógica de design e programação.

Uma implementação simples de AppComponent (app.component.ts) e sua lógica de apresentação (app.component.css) é a seguinte -

app.component.ts

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

Aqui,

templateUrl refere-se ao design do componente.

app.component.html

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

Aqui,

page-router-outlet é o local onde o aplicativo Angular é anexado.

Em resumo, a estrutura Angular é composta por módulos semelhantes à estrutura NativeScript com pequenas diferenças. Cada módulo no Angular terá um componente Angular e um arquivo de configuração do roteador (page-routing.mocdule.ts). O roteador é configurado por módulo e cuida da navegação. Os componentes angulares são análogos às páginas no núcleo NativeSctipt.

Cada componente terá um design de IU (page.component.html), uma folha de estilo (page.component.css) e um arquivo de código JavaScript / TypeScript (page.component.ts).