Using npm Modules in NativeScript Mobile Apps

With the latest release, AppBuilder allows you use npm modules when building mobile apps with NativeScript.  This is the simplest and easiest way to tap into the huge ecosystem of JavaScript code. With it, you can utilize every JavaScript library that does not depend on browser-specific APIs such as the DOM. Popular libraries like lodash, async or moment become as easy to add to your NativeScript project as couple of mouse clicks in AppBuilder. Let’s look at how.

Getting Started

To access npm packages, use the AppBuilder client that you are most comfortable with: the Windows client, the in-browser client, the Visual Studio extension or the command-line interface – they all natively (pun intended) support working with npm modules.

Let’s look at how npm works using the current version of the AppBuilder in-browser client. We’ll create a very simple app that shows the current date in different formats, using the popular moment.js library.

First, we need to log into our Telerik Platform account at and create a new project, selecting “native app.” Once the project is created, we click the “Create AppBuilder Native project” button. Choose the “NativeScript Blank (JavaScript)” template as a starting point.

Installing a Module

Once the project is created, double click on Properties to open the properties page and, on the left navigation pane, select Dependencies.

The Manage Packages dialog will open; this lets us to install dependencies from either npmjs.org or the Telerik Verified Plugins Marketplace. The latter serves verified plugins that Telerik continuously check for issues – however, at the moment, this only supports Cordova (NativeScript will be coming soon).

Let’s focus on the npm tab, which lets us install from npmjs.org. To find Moment.js, we’ll use the Search field on the right. Once we find it, adding it to the project is a matter of pressing the “Install” button.

After we close the dialog, we can verify that the module was successfully installed by ensuring that it appears in the “Dependencies” list.

Using a Module

Now that we have the module installed, let’s use it in the code!

We’ll build a very simple program to test Moment.js. Overwrite the content of main-page.xml with the code below (to find this file, expand the app node in the “Project Navigator” on the right):

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <StackLayout>
      <Label text="{{ dateshort, 'Today (short format) is ' + dateshort }}" />
      <Label text="{{ datelong, 'Today (long format) is ' + datelong }}" />
    </StackLayout>
</Page>

Next, add this code to main-page.js:

var observable = require("data/observable");
var moment = require("moment");

var HelloWorldModel = (function (_super) {
    __extends(HelloWorldModel, _super);
    function HelloWorldModel() {
        _super.call(this);
        this.set("dateshort", moment().format('l'));
        this.set("datelong", moment().format('LLLL'));
    }
    return HelloWorldModel;
})(observable.Observable);

function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = new HelloWorldModel();
}
exports.pageLoaded = pageLoaded;

As you can see, using Moment.js is very straightforward – we require and use it as just as it is described in its documentation. We’ve also used NativeScript’s data binding infrastructure to keep the UI and logic separated.

Building and Using the App

Now let’s build an app package for Android by using the Run / Build menu:

When the build completes, we can install the apk file on an Android device and run it:

While the app is not the pretty and not really suitable for publishing to the Google Play store, it does correctly show the current date, and, more importantly, it does this using Moment.js.

Caveats

One current limitation of Telerik Platform is that you cannot use npm packages within our Companion Apps for Android and iOS. We are discussing options to alleviate this limitation, but for now you’ll need to build an app package and test the app on a device while developing.

Another limitation is that, while you can create a NativeScript plugin that contains platform-specific code written in Objective-C or Java and publish it to npmjs.org, you cannot consume these plugins in your NativeScript app yet. Full support for this scenario is coming in the next release of AppBuilder – including support for CocoaPods and static libs for iOS. On the bright side, you can easily use plugins that contain only JavaScript code right now.

Looking Forward

The new npm module support is a very important part of NativeScript. Our plans for the future are to continue to enhance and expand this feature.

As I mentioned briefly, we are also planning to expand our Plugins Marketplace so that it offers the best available NativeScript plugins. In addition, we are integrating the Telerik Platform with the recent NativeScript 1.4 release so that it supports all the changes it introduced over the 1.3 and 1.4 releases – NativeScript plugins, Gradle-based builds for Android, CocoaPods dependencies for iOS native libraries, and so much more!

Our next release is coming at the end of October 2015, so be sure to check it out.

The post Using npm Modules in NativeScript Mobile Apps appeared first on Telerik Developer Network.