NativeScript is a framework that allows web developers to leverage their web development skills to build native mobile apps for Android and iOS (and later Windows Phone as promised by the NativeScript team). So thanks to NativeScript, if you can use JavaScript and CSS, you can build a native mobile app.
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 bridge the gap between the two worlds of hybrid and native mobile apps. It takes the best of the two worlds and mixes it into one platform but how does NativeScript achieve that?
The reuse of web skills, mainly JavaScript and CSS, and 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 have powerful tools at your hand, JavaScript, TypeScript, Angular 2.
- 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?
Angular 2 is the newest JavaScript framework built by Google. It’s the successor of Angular.js (version 1.x) but was rewritten completely from scratch. Unlike Angular.js, Angular 2 can be used outside of web browsers and doesn't require the DOM so it can be leveraged to build applications for other platforms like Desktop or mobile devices and not just the web.
NativeScript doesn’t require Angular 2 and you can use it to build your mobile application with only plain JavaScript, but if you know Angular 2 why miss the power given to you to build mobile apps.
Setting Up NativeScript
So after getting some basic information about NativeScript, let's start by installing it. As any other awesome tool nowadays, NativeScript uses Node.js so you need to have it installed on 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.
npm install -g nativescript
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 NativeScript). 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 optional Android emulator if you are not intending to use a mobile device, during development, for testing. For iOS, you need a MAC OS and you need XCode installed.
After installing the native development platform required tools, you can verify if you are ready for developing with NativeScript using the following command:
nativescript doctor
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.
nativescript create myApp --appid "com.techiediaries.myapp"
appid Is Used to Specify the Application Id
If you want to create an app based on Angular 2 add –ng switch.
nativescript create myApp --appid "com.techiediaries.myapp" --ng
Go ahead and cd into your app directory:
cd myApp
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 your code, you need to prepare your project for a target platform (Android or iOS) by executing the following command:
nativescript prepare android
nativescript prepare ios
The prepare command does no magic. It just copies the platform specific content to each platform specific subdirectory in platforms directory so you make sure each platform 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:
nativescript platform add android
nativescript platform add ios
Now you can build your app with:
nativescript build android
nativescript build ios
After building 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:
nativescript deploy android
nativescript deploy ios
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:
nativescript emulate android
nativescript emulate ios
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.
nativescript run android
nativescript run ios
Or to run in emulators:
nativescript run android --emulator
nativescript run ios --emulator
When developing, you need to see your changes on the fly and fast, so you need to livesync with:
nativescript livesync android
nativescript livesync ios
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 mentioned before, NativeScript uses the native layout renderer of the target platform (either Android or iOS). It is different from hybrid mobile frameworks, so your 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 Layouts
NativeScript has many layouts. A layout is a sort of a container which allows you to place ui elements/components. Different layouts have different 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.
import absoluteLayoutModule = require("ui/layouts/absolute-layout");
The Grid Layout
This layout uses rows and columns to place any component. You need to import the GridLayout module with:
var layout = require("ui/layouts/grid-layout");
The Stack layout
This layout places elements stacked either horizontally or vertically. To use it, you need to import the StackLayout module with:
var StackLayout = require("ui/layouts/stack-layout").StackLayout;
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:
import dockModule = require("ui/layouts/dock-layout");
The Wrap Layout
This layout places ui components next to each other (horizontally or vertically) when space is available. You can set the orientation to be horizontal or vertical as you need. To use, you need to require the WrapLayout module with:
import wrapLayoutModule = require("ui/layouts/wrap-layout");
You have two options, either create your layouts using NativeScript XML ui language or JavaScript code. For example, let's create a simple grid layout with some Labels.
With XML:
<stacklayout orientation="vertical">
var StackLayout = require("ui/layouts/stack-layout").StackLayout;
import enums = require("ui/enums");
var stackLayout = new StackLayout();
stackLayout.orientation = enums.Orientation.horizontal;
var btn = new Button();
btn.text ="Click Me"
stackLayout.addChild(btn);
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 straightforward. All you need to do is install them and then require them, the process is very straightforward:
First, you need to go inside your project directory and install the npm module via normal npm install command:
npm install --save node-uuid
And then in your app code require it and start using it normally:
npm install --save node-uuid
After building your project with:
nativescript build <platform>
The ClI will copy all modules inside of node_modules folder to platforms/<platform>/assets/app/tns_modules.
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 component that adds features such as two data binding, the viewmodel is an observable object that observes the model and signals the changes on the model to the view so it updates itself.
MVVM helps keep the user interface and app logic separated. Using NativeScript with vanilla JavaScript requires you to understand how a MVVM pattern works and how to use it.
Using Existing Native Android/iOS Libraries with NativeScript
NativeScript allows you to use native platform libraries in your NativeScript app code without so much effort, all you need is some tweaking and configuration and then the API is ready for you to call from JavaScript code.
Installing NativeScript Plugins from NPM
Install the plugin from NPM using the CLI:
tns plugin add nativescript-physics-js
NativeScript with TypeScript
Instead of vanilla JavaScript, you can choose to use TypeScript to build your mobile application with NativeScript, you just need to install via (make sure you are under your project directory):
nativescript install typescript
And then, you can start using it.
If you don’t know what TypeScript is, then it’s just a strongly typed superset of JavaScript created by Microsoft which adds OOP (Object Oriented Programming) features to JavaScript. Lots of TypeScript features were added to JavaScript 2015/EcmaScript 6 and other features are planned to be added in the next version es6+.
NativeScript with Angular 2
Angular 2 is the latest version of Angular which is a JavaScript framework for building applications, unlike angular.js(1.x), Angular 2 can be used to build applications outside the web browser since it is independent from the DOM. Angular 2 can be used to build mobile and also desktop applications with native like speed and performance.
References
History
- 14th November, 2016: Initial version
