Introduction to NativeScript
Tags: nativescript, angular, javascript, programming
Published: 2023-02-19 16:14:34

I have never quite been interested in building native apps but my recent realization of the web's limits changed my mind.

I tried firstly Ionic, a great framework for building hybrid applications. I had a great time playing with ionic components, they are awesome. (you can learn more about the Ionic framework by [visiting the official documentation](https://ionicframework.com/))

Don't get me wrong, you can build great hybrid apps with ionic but the problem is that Ionic uses some sort of a bridge between the native experience and your application. 
In fact, apps built with this framework, although fantastic, are run in a web view because they're still web apps.

And what I wanted was a native app, something that could give me the flexibility of Ionic and the performance of a native app, built with Java/Kotlin and this is how I encountered NativeScript.

It's giving the possibility of using JS(Angular in my case) without compromising too much on the real experience of a native application.

You can learn more about the differences between Ionic, Flutter, Reactive Native, and NativeScript [here](https://youtu.be/vl12yhSh_Pg).

[Echo](https://echoinnovateit.com/flutter-vs-nativescript/) also wrote a deep dive into the main differences between Flutter and NativeScript, 2 popular frameworks for cross-platform application development, performance-wise.

If you are using Angular and don't want to learn Dart or React, NativeScript is almost the default choice, for, its support for angular is outstanding.


## Installing the NativeScript CLI and setting environment variables.

The official documentation of NativeScript offers a great tutorial for installing and setting environment variables on UNIX OS and Windows. You can check it out [here](https://docs.nativescript.org/environment-setup.html#windows-android).

Please, take the time to read the official documentation before proceeding further with this article.

I had, however, the hardest time setting the JAVA_HOME environment variable. I recommend you install the required packages(⚠️_**JDK 11 by Adoptium**_) with Choco if you are on Windows.

## Create your first native app with NativeScript 

The NativeScript CLI already installed on your computer, run the following command in your terminal 
`ns create myFirstApp --angular` 

**_myFirstApp_** is the name of your application, you can use a name that is most convenient for you.

This command will create an angular-supported project for your app. You will probably be asked to choose a template, to begin with. 

> Templates are like Angular Material Schematics.

If you installed correctly everything that is mentioned in the official documentation provided by the NativeScript, you should be able to test your application on Android using an Emulator or a physical device.

I tested my app on my android device by enabling debugging mode in the developer's options. (the mentioned options can be found in your phone parameters after clicking 7 times on the build number on the "About the phone" page).

The link to the official documentation also offers how you can run your NativeScript application on your mobile device.

As a medical student, I believe in the importance of technology in changing and shaping the health of our communities, we will be building next time a clinic calculator using solely Angular and NativeScript.

It should be able to calculate:

- The mean arterial pressure 
- The Apgar score 
- The BMI 
- The glomerular filtration score.

And of course, the design needs to be on point. We will be testing NativeScript capabilities in this particular area and I know it'll be fun so, see you next time.

PS: In the meantime, please take some time to learn about **_layouts_** in NativeScript utilizing the resources below:

[The Official Documentation](https://v7.docs.nativescript.org/angular/ui/layouts/layouts) 

These wonderful videos by Codedamn, [from video 10 to video 13](https://youtube.com/playlist?list=PLYxzS__5yYQnbduR0rpntEcXIhftdz15n)