Getting started with NativeScript
Unlike hybride mobile frameworks such as Ionic or any Cordova based framework,NativeScript doesn't use web views but the rendering engine of the target native platform which means you get the same performance as any other native app .
What NativeScript tries to do is bridging the gap between the two worlds of hybride and native mobile apps ,it takes the best of the two worlds and mixes it into one platform but how does NativeScript achive that ?
The use the rendering engine of Android or iOS (Thus no need for a web view and no performance issues).
So thanks to NativeScript :
You can build a mobile app that's 100% Native ,you can call native api directly from the target native platform SDK or any third party library so there is no limitation compared to a native app built by native platform languages (Java or Swift).
You can build cross platform apps with nearly the same/or sometimes the same code base.
You can use NPM/Node.js modules in your app but only modules which don't require or depend on some browser API like the DOM.
You can use a subset of CSS to style your app UI.
You have no web view so no performance issues related to web views.
You can re-use CocoaPods and Gradle packages.
You can share the code between mobile and web apps.
Angular 2 and NativeScript ?
Setting up NativeScript
So after getting some basic information about NativeScript lets start by installing it .As any other awesome tool nowadays NativeScript uses Node.js so you need to have it installed in your system,otherwise you can follow this tutorial on how to install Node.js
Next you need to install the NativeScript CLI from npm(nodejs packager manager),just enter the following line of commands in your Windows command prompt or Linux/Mac terminal
If everything goes without any installation issues you'll have two equivalent commands available at your disposal to work with NativeScript which are as you can guess nativescript and tns(Telerik NatievScript).Using one of these commands and its related subcommands you can scaffold,build and run your NativeScript based mobile application.
Please note that native development requires special setup depending on your target platform ,for example for Android you need to have Java installed and Android SDK and an optionnal android emulator if you are not intending to use a mobile device ,during developement,for testing.For iOS you need a MAC OS and you need XCode installed.
After installing the native development platform required tools you can vereify if you are ready for developing with NativeScript using the following command
If you get “No issues were detected” then you are ready to go.
Building your first mobile app with NativeScript
So go ahead and start your terminal or command prompt then scaffold your first mobile project using nativescript cli
--appid is used to specify the application id
If you want to create an app based on Angular 2 add --ng switch
go ahead and cd into your app directory
If you execute ls you should get a directory structure similar to
All your work should be done in app where you can put your app common and platform specific code and files.
After adding you code you need to prepare your project for a target platform (Android or iOS) by executing the following command
The prepare command does no magic it just copies the platform specic content to each platform specific subdirectory in platforms directory so you make sure each paltform gets only its specific assets.
Next you need to add target platforms to your project so you can build your mobile application,to do that just execute the following command :
Now you can build your app with
Afer bulding your app you should find your app package in
platforms → android → bin (The APK for Android)
platforms → ios → build → emulator (Emulator build (APP) for iOS)
platforms → ios → build → device (Device build (IPA) for iOS)
You can also deploy your project to a device to test it during development with
If you don't have a physical device at hand for testing you can use an emulator and you can run your app in the emulator using
To avoid using all these commands you can use the run command which takes care of running the three commands prepare, build, and deploy for you
Or to run in emulators
When developing you need to see your changes on the fly and fast ,so you need to livesync with
Which works either if you are using an emulator or the actual device.NativeScript will take care of synchronizing your changes with your app just make your changes and be ready to see the result on your emulator or physical device connected via an USB.
Building The User Interface of your mobile app
As we mentionned before,NativeScript uses the native layout renderer of the target platform (Either Android or iOS).It is different from hybride mobile frameworks so you application doesn't execute in a webview and you have no html tags to build your app ui instead you use a NativeScript specific XML based language that gets converted to Android or iOS specific layout language
NativeScript has many layouts.A layout is a sort of a container which allows you to place ui elements/components .Different layouts has diffrent algorithms for placing elements,you can use any layout you choose depending on your needs:
The Absolute layout
This layout uses absolute coordinates (left,top) to place elements.
To use it you need to import the AbsoluteLayout module
The Grid Layout
This layout uses rows and columns to place any component.
You need to import the GridLayout module with
The Stack layout
This layout places elements stacked either horizontaly or vertically.
To use it you need to import the StackLayout module with
The Dock layout
This layout places elements at the edges (left,top,right,bottom,)
To use it you need first to import the DockLayout module using require
The Wrap layout
This layout place ui components next to each other(Horisontally or vertically ) when space is available.You can set the orinetation to be horizontal or vertical as you need.
To use you need to require the WrapLayout module with
Can I use existing NPM/Nodejs modules in my NativeScript app
The short answer is Yes you can .As long as the module doesn't depend or rely on a browser specific api like the DOM for example
Using popular packages such as lodash or moment.js is very straighforwrd all you need to do is installing them and then require them,the process is very straightorward :
First you need to go inside your project directory and install the npm module via normal npm install command :
And then in your app code require it and start using it normally
After building your project with :
The ClI will copy all modules inside of nodemodules folder to platforms/
The MVVM pattern
MVVM stands for Model-View-ViewModel and it is an architectural pattern like MVC or Model-View-Controller.In fact MVVM is just a variation of the MVC architecture which replaces the Controller component with a ViewModel compenent that adds features such as two data binding ,the viewmodel is an observable object that observes the model and signal the changes on the model to the view so it updates itself.
Using existing native Android/iOS librariries with NativeScript
Installing NativeScript plugins from NPM
Install the plugin from NPM using the CLI:
NativeScript with TypeScript
And then you can start using it.
NativeScript with Angular 2
Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.
You can reach the author via Twitter:Follow @ahmedbouchefra
About the author
Read our other tutorials
- Angular Tutorial
- Laravel 6 Tutorial
- React Tutorial
- React Hooks Tutorial
- React Native Tutorial
- Webpack Tutorial
- PHP Tutorial
- Django Tutorial
- Java Spring Tutorial
- Rails 6 Tutorial
- Ionic 4 Tutorial
- TypeScript Tutorial
- Bootstrap 4 Tutorial
- Electron Tutorial
- Cordova Tutorial
- HTML Tutorial
- GraphQL Tutorial
- CSS Grid Layout Tutorial
- PWA Tutorial