Over a million developers have joined DZone.

NativeScript for .NET Developers

NativeScript allows developers to create native mobile apps that run cross-platform, and has a lot of appeal for .NET developers.

· Mobile Zone

Contrary to what it may sound like, NativeScript is not a programming language – in fact, it simply uses languages you may already know: JavaScript, CSS and XML. NativeScript is a framework for building cross-platform truly native mobile apps with JavaScript!

There is no DOM, no cross-compilation and no hybrid mobile WebView rendering. You have a single codebase of JavaScript, XML and CSS towards making a native app that runs cross-platform. NativeScript as a platform is open source, and offers free developer tooling via the Command Line Interface (CLI).

Now, it may sound like NativeScript is mostly catering to JavaScript developers – you know, those skinny jeans hipsters, so to speak. While you may respect non-Microsoft developers, perhaps you are not one of them. Maybe you are a .NET developer on the Microsoft stack and rather proud of it. If so, you’d have good reason – it is one of the richest possible developer ecosystems and with some of the best tooling available.

It turns out, NativeScript has lots and lots of appeal for .NET developers. You’re going to enjoy the possibilities. Let’s dive in.

This article is Part I of unpacking NativeScript for .NET developers. In Part II, we’ll talk about UI composition and more tooling.

Visual Studio Familiarity

Now free CLI tooling may be hip, but you probably spend your entire days in Visual Studio. With a paid Telerik Platform subscription (or a free trial), you can build entire NativeScript apps inside of Visual Studio, without ever having to leave the comforts of your favorite IDE.

There are three primary components of a NativeScript app – business logic in JavaScript, UI markup in XML and styling through CSS. And Visual Studio is exceptionally good at supporting JavaScript, XML and CSS – the fit is natural.

Simply sign up or sign in to https://platform.telerik.com and click on Getting Started, then Downloads. Pick AppBuilder NativeScript and download/install the AppBuilder Extension for Visual Studio. You are all set.

Build Your NativeScript App in VS

When you do File > New Project, you’ll see all the NativeScript project templates.

VSTemplates

Once you create a NativeScript project in Visual Studio, you are greeted with a project structure that may seem familiar. All of the NativeScript Modules reside in a single tns_modules folder, App_Resources houses your platform-specific icons and app folder contains all your code.

You may notice simple MVVM-type conventions – if you have a main-page.xml (UI markup), NativeScript will automatically pair it with a main-page.js (code-behind) and it is customary to have a main-view-model.js (view model) in the same folder.

NSProject

Once inside of Visual Studio, you’ll get all the usual help for writing code in JavaScript, XML and CSS, such as syntax highlighting and code completion.

EditingXML

EditingJS

Need to bring in some package dependencies? As expected, you get Visual Studio intellisense in package.json edits, as below:

VSPackageIntellisense

NativeScript gives you access to all of the native platform APIs. You also get robust app life cycle management control including the following application life cycle events – launch, suspend, resume, exit, lowMemory and uncaughtError. At any point, you can persist and restore application settings – with direct device file system access through the application-settings NativeScript module.

Almost anything you can do on a native app, you can do so through NativeScript modules and abstractions – only via a single codebase that serves multiple platforms.

Deploy Your NativeScript App From VS

Once you are ready to try out your NativeScript app, use the Visual Studio AppBuilder menu. You can run your project on native emulators or directly on devices.

ABMenu

If you are deploying to emulators, you can choose to run your Android project on the native Android emulator or the GenyMotion one or even the Microsoft-made Android emulator. For deploying iOS apps to a native emulator from Visual Studio, you have to have a remote OSX machine configured as a build host.

EmulatorDeployment

It’s important to state, however, that you don’t have to have a Mac to build for iOS! You can simply choose to use your existing iOS devices and deploy directly to them. If you are an existing Telerik Platform subscriber, simply utilize the cloud iOS/Android builds. You can build your app as a native app package or deploy it through the corresponding NativeScript Companion apps, available on each platform.

BuildTarget

The cloud builds produce a simple QR code with a link to your app package, with all your code and assets included. Convenient, right? And yes, you can share this QR code with your app testers.

Once installed, you don’t have to keep deploying the whole app package for every code change. Simply tap and hold with three fingers on the app – the latest bits get pulled down to your device through a feature called LiveSync.

DeployQR

So, how do you scan the QR codes from your device? Sure you can use any QR code scanner, but the NativeScript Companion app actually has one built-in. Simply swipe with two fingers from the left edge, as below.

QRCodeScanner

Once you scan a QR code, the app package gets pulled down and deployed inside the NativeScript Companion app shell, as you can see in the screenshot below that loaded the default Hello World app.

DownloadingAppPackage

NativeAppDeployed

JavaScript Against a Common API Canvas

NativeScript Modules offer access to the native platform APIs. You can write plain JavaScript to call the APIs on either platform.

NativeScript uses the popular CommonJS module format, allowing you to simply require whichever NativeScript module you need. All device, platform or user interface functionalities reside in separate modules.

For example, the code sample below shows how you can use the camera to take a picture – NativeScript handles communicating this to the corresponding native API calls.

var cameraModule = require("camera");
var imageModule = require("ui/image");
cameraModule.takePicture().then(function(picture) {
    console.log("Result is an image source instance");
    var image = new imageModule.Image();
    image.imageSource = picture;
});

Business Logic in TypeScript

Now straight up JavaScript may not be your comfort zone. .NET developers often like their type safety in object oriented programming and are not fond of some of the “weirdness” that a dynamic language like JavaScript brings to the table.

Thankfully, if you are a .NET developer, there is a better choice for you. You can write your app business logic code entirely in TypeScript!

If you come from a C# background, you’ll feel right at home in TypeScript, which has been enjoying a lot of love lately. TypeScript has the typical object-oriented programming paradigms like classes, interfaces, access modifiers and extensions.

And sometimes, the small things make all the difference, like in the TypeScript syntax as shown in some examples below.

// Inferred types from assignment.
var a = 5;

// Arrays can be typed.
var array : number[] = [];
array[0]=100;
// This triggers an editor warning.
array[1]="Hello World";

// OOP with confidence, without the dynamic randomness.
class Auto{
      wheels;
      doors;
}
var car = new Auto();
car.wheels = 2;
car.doors = 4;
// This triggers an editor warning.
car.gears = 6;

Here’s how you write TypeScript code in your NativeScript apps to get the device geolocation.

import locationModule = require("location");
var locationManager = new locationModule.LocationManager();
var locationOptions = {
    desiredAccuracy: 3,
    updateDistance: 0,
    minimumUpdateTime: 5000,
    maximumAge: 20000
};
locationManager.startLocationMonitoring(function(location){
    console.log("Location received: " + location);
    }, function (error) {
        console.log("Location error received: " + error);
    }, locationOptions);

Grab your favorite code editor, like Visual Studio or Visual Studio Code and use them to write TypeScript for your NativeScript mobile apps. You also get NativeScript Definition Files (the *.d.ts files in the NativeScript repo) that surface some of the native API metadata to give you code completion features – TypeScript intellisense for iOS/Android just makes your coding so much easier.

TSIntellisense

Conclusion

The NativeScript promise is simple – you can build truly native cross-platform apps with a single codebase of JavaScript, XML and CSS. NativeScript offers plenty of tooling for the Visual Studio developer – everything from building the app, to testing and deployment. Don’t like JavaScript? Fine, you get to write your app business logic with TypeScript. Choice for developers is a good thing, and .NET developers get plenty of love in NativeScript.

Topics:
mobile ,.net ,javascript ,nativescript

Published at DZone with permission of Samidip Basu, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}