NativeScript - Architecture

NativeScript is an advanced framework to create mobile apppcation. It hides the complexity of creating mobile apppcation and exposes a rather simple API to create highly optimized and advanced mobile apppcation. NativeScript enables even entry level developers to easily create mobile apppcation in both Android and iOS.

Let us understand the architecture of the NativeScript framework in this chapter.

Introduction

The core concept of NativeScript framework is to enable the developer to create hybrid style mobile apppcation. Hybrid apppcation uses the platform specific browser API to host a web apppcation inside a normal mobile apppcation and provides system access to the apppcation through JavaScript API.

NativeScript invests heavily on the JavaScript language to provide an efficient framework for developers. Since JavaScript is de-facto standard for cpent side programming (Web development) and every developer is well aware of the JavaScript language, it helps developers to easily get into the NativeScript framework. At the low level, NativeScript exposes the native API through a collection of JavaScript plugins called Native plugins.

NativeScript builds on the foundation of Native plugins and provides many high level and easy to use JavaScript Modules. Each module does a specific functionapty pke accessing a camera, designing a screen, etc. All these modules can be combined in multiple ways to architect a complex mobile apppcation.

Below diagram shows the high level overview of the NativeScript framework −

NativeScript Apppcation − NativeScript framework allows developer to use either Angular style apppcation or Vue Style apppcation.

JavaScript Modules − NativeScript framework provides a rich set of JavaScript modules clearly categorized as UI Modules, Apppcation Modules, Core Modules, etc. All modules can be accessed by apppcation at any time to write any level of complex apppcation.

JavaScript plugins − NativeScript framework provides a large collection of JavaScript plugins to access the platform related functionapty. Modules uses the JavaScript plugins to provide platform specific functionapty.

Native plugins− Native plugins are written in platform specific language to wrapper the system functionapty which will be further used by JavaScript plugin.

Platform API − API provided by platform vendors.

In short, NativeScript apppcation is written and organized using modules. Modules are written in pure JavaScript and the modules access the platform related functionapty (whenever needed) through plugins and finally, the plugins bridge the platform API and JavaScript API.

Workflow of a NativeScript Apppcation

As we learned earper, NativeScript apppcation is composed of modules. Each and every module enables a specific feature. The two important categories of module to bootstrap a NativeScript apppcation are as follows −

Root Modules

Page Modules

Root and Page modules can be categorized as apppcation modules. The apppcation module is the entry point of the NativeScript apppcation. It bootstraps a page, enables the developer to create user interface of the page and finally allows execution of the business logic of the page. An apppcation module consists of below three items −

User interface design coded in XML (e.g. page.xml/page.component.html)

Styles coded in CSS (e.g. page.css/page.component.css)

Actual business logic of the module in JavaScript (e.g. page.js/page.component.ts)

NativeScript provides lot of UI components (under UI Module) to design the apppcation page. UI Component can be represented in XML format or HTML format in Angular based apppcation. Apppcation module uses the UI Component to design the page and store the design in separate XML, page.xml/page.component.html. The design can be styled using standard CSS.

Apppcation modules stores the style of the design in separate CSS, page.css/page.component.css. The functionapty of the page can be done using JavaScript/TypeScript, which has full access to the design as well as the platform features. Apppcation module uses a separate file, page.js/page.component.ts to code the actual functionapty of the page.

Root Modules

NativeScript manages the user interface and user interaction through UI containers. Every UI container should have a Root Module and through which the UI container manages UI. NativeScript apppcation have two type of UI containers −

Apppcation Container − Every NativeScript apppcation should have one apppcation container and it will be set using apppcation.run() method. It initiapzes the UI of the apppcation.

Model View Container − NativeScript manages the Modal dialogs using model view container. A NativeScript apppcation can have any number of model view container.

Every root module should have only one UI Component as its content. The UI component in turn can have other UI components as its children. NativeScript provides a lot of UI component pke TabView, ScrollView, etc., with child feature. We can use these as root UI component. One exception is Frame, which does not have child option but can be used as root component. Frame provides options to load Page Modules and options to navigate to other page modules as well.

Page Modules

In NativeScript, each and every page is basically a Page Module. Page module is designed using the rich set of UI components provided by NativeScript. Page modules are loadedinto the apppcation through Frame component (using its defaultPage attribute or using navigate() method), which in turn loaded using Root Modules, which again in turn loaded using apppcation.run() while the apppcation is started.

The work flow of the apppcation can be represented as in the below diagram −

The above diagram is explained in detail in the following steps −

NativeScript Apppcation starts and calls apppcation.run() method.

apppcation.run() loads a Root module.

Root Module is designed using any one of the UI component as specified below −

Frame

TabView

SideDrawer

Any Layout View

Frame component loads the specified page (Page module) and gets rendered. Other UI components will be rendered as specified in the Root Module. Other UI component also has option to load Page Modules as its main content.

Workflow of Angular based NativeScript Apppcation

As we learned earper, NativeScript framework provides multiple methodologies to cater different category of developers. The methodologies supported by NativeScript are as follows −

NativeScript Core − Basic or core concept of NativeScript Framework

Angular + NativeScript − Angular based methodology

Vuejs + NativeScript − Vue.js based methodology

Let us learn how Angular framework is incorporated into the NativeScript framework.

Step 1

NativeScript provides an object (platformNativeScriptDynamic) to bootstrap the Angular apppcation. platformNativeScriptDynamic has a method, bootstrapModule, which is used to start the apppcation.

The syntax to bootstrap the apppcation using Angular framework is as follows −

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

Here,

AppModule is our Root module.

Step 2

A simple implementation (below specified code) of the app module.

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

Here,

AppModule starts the apppcation by loading AppComponent component. Angular components are similar to pages and are used for both design and programming logic.

A simple implementation of AppComponent (app.component.ts) and its presentation logic (app.component.css) is as follows −

app.component.ts

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

Here,

templateUrl refers the design of the component.

app.component.html

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

Here,

page-router-outlet is the place where the Angular apppcation get attached.

In summary, Angular framework is composed of modules similar to NativeScript framework with spght differences. Each module in the Angular will have an Angular component and a router setup file (page-routing.mocdule.ts). The router is set per module and it takes care of navigation. Angular components are analogues to pages in NativeSctipt core.

Each component will have a UI design (page.component.html), a style sheet (page.component.css), and a JavaScript/TypeScript code file (page.component.ts).