Click here to Skip to main content
14,425,979 members

NativeScript - Develop Truly Native Mobile Apps with JavaScript & CSS

Rate this:
4.67 (7 votes)
Please Sign up or sign in to vote.
4.67 (7 votes)
6 Mar 2015CPOL
Are you a web developer? Are You well versed with JavaScript? Do you want to be a native mobile app developer? Through this article, I will let you know how you can develop native mobile apps with your JavaScript skills.

Introduction

I want to introduce you to one more framework today. I know, I know - you will be going like "Yet Another Framework" :). But believe me this one will actually excite you. Especially if you are JavaScript Ninja.

Yesterday Telerik introduced a new JavaScript framework called "NativeScript". NativeScript is completely free and is released as a open source framework. Its currently in a beta launch and will hit mainstream during May time frame. So rest of this article will be introduction to nativeScript - its features and usage. So sit tight and read on

About NativeScript

The goal of NativeScript is to let people develop native Android, iOS and Windows Phone Apps from a single code base. And to let people use their JavaScript & CSS skill. Yes you heard it right - JavaScript & CSS. You will use JavaScript for the application logic and CSS to style your UI components. If you are eager to check this out, head over to www.nativescript.org. Thats the home for NativeScript. NativeScript also lets you access native platform API right from your JavaScript code. Entire native platform functionality is available in the javaScript layer of your code.

Image 1

Sailient Features of NativeScript

  • Truly Native UX
    Although you code in javaScript, the application package is not based on a hybrid rather its truly native.
     
  • Can use 3rd party JavaScript libraries
    Allows you to reuse JS libs that do not have browser or other platfirm dependencies for e.g. moment.js for date formatting
     
  • XML UI Declaration
    UI is defined using XML syntax. No learning curve required here for any platform
     
  • Open Source
    Source code is available on GitHub repo and is Apache license based. You can contribute too to NativeScript framework.
     
  • Rich Data Binding
    Allows handle bars kind of rich data binding in your XML views

How Does NativeScript Work

Lets look at a block diagram which depicts the working of NativeScript framework:

Working of NativeScript

Lets understand the above diagram a little better:

  • You write your app using javaScript and use the NativeScript modules. NativeScript modules expose the device's native platform capabilities in a consistent manner. And you use those modules in your non-platform specific code.
     
  • Buld your app. During build NativeScript runtime translates non-platform specific code to native language of the target platform. NativeScript tools use the native platform SDKs & tools to build native app package
     
  • Run your cross-platform native apps in emulator or on real devices

Getting Started with NativeScript

NativeScript has a command line interface or CLI which is also open sourced. With the NativeScript CLI you can develop native apps with IDE of your choice locally and free of charge. Note that on a Windows environment, you can develop only Android apps using the CLI. This is a limitation due to the nature of iOS development & requirements put forth by Apple.

 

In this article i will be concentrating on Windows OS as the development platform.

Let's see how we set up things on a Windows machine to develop apps with NativeScript CLI.

Pre-Requisites

  1. Node JS
    Install Node JS on your machine. You can go to http://nodejs.org, download and install Node.
     
  2. Chocolatey
    Chocolatey is a package manager but for your machine. You can install applications/tools using chocolatey. You can go to https://chocolatey.org/ and install chocolatey.
     
  3. JDK 7 or a later stake release
    You need Java Development Kit to be installed for android apps. In a command prompt run the command "choco install java". Then create JAVA_HOME environment variable (if not present) and point it to the JDK installation folder.
     
  4. Apache Ant 1.8 or later
    In a command prompt run the command "choco install ant". Then update the PATH environment variable with path to Ant installation folder.
     
  5. Android SDK
    In a command prompt run the command "choco install android-sdk". Once the SDK is installed, update the PATH environment variable with path to tools & platform-tools folder inside your android SDK installation folder. Close the command prompt, open another command prompt and update android sdk with the following command "android update sdk". Selecth the packages for Android 19 SDK and any other SDKs you want to install
     
  6. NativeScript CLI
    Open a command prompt and run the following command: "npm i -g nativescript". Restart the command prompt after this.

Hello World with Native Script

Now lets code a sample hellow world app. Since i will be using Windows OS as the develpoment machine, we will be building a native android Hellow World app using NativeScript CLI. Follow the below steps to create the app:

  1. Creating New Project
    To create a new mobile app using NS CLI, open a command prompt and run the following command:
    "tns create hello-world"
     
  2. Add Android Platform
    Above step creates a new folder called hello-world. Next we need to add the platform we want to support in this app. I will add Android since i am on Windows machine. In the command prompt execute the following commands:
    "cd hello-world"
    "tns platform add android"

    This command uses the native SDKs and generates some platforms specific content in your project. 
     
  3. Run the App
    At this moment the NS CLI would have created a simple app which can be readily run on an emulator or on a device. In order to use the emulator, on the command prompt execute the following command:
    "tns run android --emulator"
    Note: If you have Genymotion configured on your machine, you can execute the following command to use genymotion emulator:
    "tns run android --emulator --geny <Genymotion device name>"
    If we emit the --emulator switch the app can be deployed to a USB connected Android device
    Here is the screenshot of the app we just created:
    App on Android Device

NativeScript Project Structure

Now that you have seen the app lets take a look at the project structure of a NativeScript based mobile app. Following screenshot shows the structure for you:

Image 4

Lets go over the project structure in detail now:

  • The app/app folder is the folder where you will have your app code. This is your development area. All pages and code logic go into this folder.
     
  • The Platforms folder will contain platform specific resources of the app. When we execute command "tns platform add android|ios" - the platform specific folder is created in front of Platform folder.
     
  • The App_Resources folder contains resources per platform. This includes you icons, splash screens and config files like AndroidManifest.xml or Info.plist files.
     
  • The tns_modules folder contains the NativeScript modules. 

The app.js found in app folder  is the starting point for the app. The app folder also contain main-page.xml and main-page.js. Here is the code snippet found in in app.js:

var application = require("application");
application.mainModule = "app/main-page";
application.start();

In the first line we create the application. Then we are setting the main module or main page of the app to app/main-page. Lets look at the main-page.xml which is the UI for our app. here is the code snippet:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <StackLayout>
    <Label text="Tap the button" cssClass="title"/>
    <Button text="TAP" tap="{{ tapAction }}" />
    <Label text="{{ message }}" cssClass="message" textWrap="true"/>
  </StackLayout>
</Page>

As stated earlier, the UI in nativeScript is defined using XML syntax. So in our case, we have created a stacked layout which stacks its contents vertically by default. We have placed a label, then a button and then another label which will output a message. Next the logic for main-page is in main-page.js. Here is the code snippet for main-page.js:

var vmModule = require("./main-view-model");
// Event handler for Page "loaded" event attached in main-page.xml
function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = vmModule.mainViewModel;
}
exports.pageLoaded = pageLoaded;

We first reference a ViewModel. ViewModel is nothing but a business object which is observable in nature. We have the logic placed in the view model and we bind that view model to the main page. We have a pageLoaded event defined and is referenced by main-page.xml. So when the page lods, the binding context is set to view model. Here is the code snippet of main-view-model:

var observable = require("data/observable");
var counter = 42;
var mainViewModel = new observable.Observable();
mainViewModel.set("message", counter + " taps left");
mainViewModel.tapAction = function () {
   counter--;
   if (counter <= 0) {
     mainViewModel.set("message", "Hoorraaay! You unlocked the NativeScript clicker achievement!");
   }
   else {
     mainViewModel.set("message", counter + " taps left");
   }
};
exports.mainViewModel = mainViewModel;

The logic above is self explanatory.

And thats all it takes to make a android app using javaScript. There is one things we did not talk about. What about CSS style sheet for styling. Well if you open app.css, it contains global styles for the whole app. Here is the snippet from app.css file:

.title {
    font-size: 30;
    horizontal-align: center;
    margin:20;
}

button {
    font-size: 42;
    horizontal-align: center;
}

.message {
    font-size: 20;
    color: #284848;
    horizontal-align: center;
}

Summary

What we have seen in this article is just the tip of the iceberg. nativeScript is a free of charge, open source framework for building native - truly native - mobile apps for Android & iOS with just your JavaScript skill & knowledge. So from a web developer you can now become a native app developer in no time. Through this article i just wanted to let you all know about this new framework and hope you are as excited as i am to try this out.

Resources

Some of the resources that will help you go the next mile:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

kashyapa78
Architect Telerik
India India
Technical Evangelist - Telerik India, Microsoft MVP, BDotNet

Comments and Discussions

 
QuestionNot totally hybrid like Cordova Pin
palluCodeProject8-May-15 5:20
MemberpalluCodeProject8-May-15 5:20 
AnswerRe: Not totally hybrid like Cordova Pin
kashyapa7830-Nov-15 20:24
professionalkashyapa7830-Nov-15 20:24 
QuestionHow to add external javascript libraries to native script app Pin
jay3dec27-Apr-15 2:18
Memberjay3dec27-Apr-15 2:18 
AnswerRe: How to add external javascript libraries to native script app Pin
kashyapa7830-Nov-15 20:25
professionalkashyapa7830-Nov-15 20:25 
QuestionTitle misleading Pin
Tomas Brennan10-Mar-15 6:46
MemberTomas Brennan10-Mar-15 6:46 
AnswerRe: Title misleading Pin
kashyapa7830-Nov-15 20:32
professionalkashyapa7830-Nov-15 20:32 
QuestionWin phones? Pin
Maniezzo9-Mar-15 3:02
professionalManiezzo9-Mar-15 3:02 
AnswerRe: Win phones? Pin
kashyapa7830-Nov-15 20:36
professionalkashyapa7830-Nov-15 20:36 
QuestionIt sure would be nice if... Pin
Dewey6-Mar-15 13:58
MemberDewey6-Mar-15 13:58 
AnswerRe: It sure would be nice if... Pin
kashyapa786-Mar-15 19:13
professionalkashyapa786-Mar-15 19:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Article
Posted 6 Mar 2015

Tagged as

Stats

22.5K views
7 bookmarked