An Introduction to NativeScript

In this article, we're going to take a look at NativeScript, an open-source framework for building mobile apps with JavaScript. At the end of the article, you should have a pretty good idea of what NativeScript is, how it works, and what technologies it uses. Aside from that, we're also going to answer common questions that you might have when exploring a new technology, such as how it differs from alternatives like Cordova and React Native, and how Telerik is involved in the project.

1. What Is NativeScript?

NativeScript is a framework for building cross-platform native mobile apps. It allows developers to use XML, CSS and JavaScript to build apps for Android, iOS, and even the Windows Universal Platform. Unlike Cordova, which uses WebView for rendering the UI of the app, NativeScript uses the native platform's rendering engine, which means that it provides a truly native user experience.

2. Pros

• It is free and open source. This means that you can contribute to the code and use it however you want, as long as you don't violate the Apache 2.0 license.
• It allows you to build truly native apps for Android and iOS devices. Each of the UI components that NativeScript exposes is translated into its corresponding native UI components.
• It lets you access native platform APIs through JavaScript code. You don't need to have knowledge of Java or Objective-C in order to use native platform APIs because you can write it all in JavaScript. This means that if you need to access a specific device feature, you can just learn how to access native APIs with JavaScript and you're good to go. 
• It gives users an experience closer to native than those provided by hybrid mobile app frameworks like Cordova. 
• It allows developers to easily build, deploy and manage their NativeScript apps through the Telerik platform. I'll discuss the Telerik Platform more in a later section.
• It has zero-day support for new native platforms. This means that you can immediately use the latest native APIs and UI components whenever Google or Apple updates their platform.
• The documentation provides lots of information on how to get started, core concepts, and the user interface. There are also examples, tutorials, a forum, Stack Overflow questions, and sample apps which can help beginners get started with NativeScript. 
• You can write your NativeScript apps with TypeScript. TypeScript is a language that transpiles to JavaScript and adds object-oriented programming capabilities to JavaScript.
• Any JavaScript library that you can find on npm that doesn't rely on the browser and the DOM can be used within NativeScript. Examples of such libraries include utility libraries such as lodash and underscore. 
• You can do almost anything with the NativeScript CLI. Basics such as creating a new project, adding a platform, running on a device and deploying to a specific platform are all included. Aside from that, you can also install plugins, debug the app, and upload to the app store.

3. Cons

• There's no HTML and DOM in NativeScript. You'll need to learn how to use the different UI components in order to build the UI of the app. 
• Verified plugins are lacking. At the time of writing of this article, there are only 16 verified plugins in total. Though there are a lot of NativeScript plugins listed on npm, you can never really be sure of their quality. 
• Developers need to know the native Android and iOS APIs in order to access the device hardware and other platform-specific features.
• Due to its native nature, you can only test apps on an actual device or an emulator. This makes the initial setup for testing slower. But once you get it running on the device, hot-reloading takes over. This means that every time you make a change to the source code, it immediately reloads the app to reflect the changes.
• Not all UI components are available for free. You need to purchase Telerik UI for NativeScript if you want to use components such as charts and calendars.

4. How Does It Work?

NativeScript is composed of a JavaScript virtual machine, a runtime, and a bridge module. The JavaScript virtual machine interprets and executes JavaScript code. Then the bridge module translates the calls to the platform-specific API calls and returns the result to the caller. To put it simply, NativeScript provides developers with a way to command the native platform through JavaScript instead of Objective-C on iOS or Java on Android.

Of course, there's a lot more going on behind the scenes, but the developers at Telerik explain it better than I can, so if you want to learn more about the inner workings of NativeScript, you can read the article by Georgi Atanasov on NativeScript - a Technical Overview or TJ VanToll's article on How NativeScript Works.

5. What Technologies Does It Use?

With NativeScript, you use XML to describe the UI of the app, CSS for styling, and JavaScript to add functionality.

You can use TypeScript with Angular 2 if you prefer to use a framework for authoring your JavaScript code.

For styling, NativeScript only uses a subset of CSS. This means that not all CSS features that are available in a browser environment can be used. For example, you cannot use floats or position attributes. Here's the full list of supported CSS properties. Just like in the browser, you can add styles that apply to the whole app, to specific pages, or to a specific UI component only. If you prefer to use Sass, you can install the NativeScript Dev Sass plugin.

For describing the structure of the user interface, you use XML. Each page in the app should be in its own XML file. NativeScript comes with pre-defined user interface widgets or components which you can use to build the UI of the app. Some of these components are similar to the different HTML elements that you use in the browser.

For example, there's an Image component, which is the equivalent of the img element, or the TextField component, which is equivalent to the input element with a type of text. Event handlers such as tapping a button are added in the component itself. Here's an example:

1. <Button tap="doSomething" />

1. exports.doSomething = function(){
2.     // do something
3. }

Another thing to note is that the components also serve as templates. If you're familiar with templating libraries such as Handlebars or Mustache, you should be at home with the following syntax:

1. <ListView items="{{ animals }}">
2.   <ListView.itemTemplate>
3.     <StackLayout class="animal">
4.       <Label text="{{ . }}"/>
5.     </StackLayout>
6.   </ListView.itemTemplate>
7. </ListView>

The example above uses the ListView component. As the name suggests, this component allows you to create lists. animals is an array defined in the JavaScript file and is bound to the animals variable on page load. This makes the animals variable available for use inside the XML file.

1. var animals = ['panda', 'tiger', 'monkey', 'snake', 'mantis'];
2. function pageLoaded(args){
3.     var page = args.object;
4.  
5.     page.bindingContext = {
6.         animals: animals
7.     }
8. }

This outputs each item in the array inside the ListView.

Lastly, there are plugins which allow you to access the device hardware and platform-specific features. NativeScript comes with a camera plugin pre-installed. This allows you to access the camera of the device and take photos. You can then save the local path to the photo in your app for later use. Platform-specific features such as social sharing can also be used by installing plugins such as the NativeScript Social Share Plugin.

6. What Apps Can You Build?

Due to the native nature of NativeScript, you can build almost any kind of app with it. Here are a few examples of apps that you can build with NativeScript:

• Apps that talk to the server, such as news apps and social networking apps.
• Simple games such as chess, tic-tac-toe, or pinball.
• Real-time apps such as chat apps or live feeds. There's a Firebase plugin for NativeScript which you can use to implement real-time apps.
• Music and video streaming apps. There's a video player plugin which allows you to play videos stored locally or stream remote videos such as the ones on YouTube.
• Maps and geolocation apps. There are plugins for Google Maps, and native map APIs.
• Apps that access the device hardware. Examples include camera apps and IoT apps.

When it comes to the kinds of apps that you can build with NativeScript, the only limiting factors are performance and plugin availability. Writing native mobile apps in JavaScript comes with a price: you can't really expect to build apps that demand high performance. Examples include games with complex graphics and animations, apps with lots of moving parts, and background processes.

Another limitation is plugin availability. Most developers come to NativeScript from a web development background. This means that most of them aren't familiar with or have limited knowledge of the native platform APIs which could be used to create plugins to access the device hardware or platform-specific features such as contacts or messaging.

If you want to learn more about what kinds of apps you can build with NativeScript, you can check out the App Showcases page. Most of the apps that are listed in there are published on both the Google Play Store and Apple Store. This means that you can install it and run it on your device to get a feel of what apps built with NativeScript look like and how they perform.

7. How Does NativeScript Compare to Hybrid Frameworks?

If you're not new to hybrid mobile app development, you might have come across frameworks such as Cordova and React Native. NativeScript is related to these two frameworks in that they both aim to solve the problem of "Write once, run everywhere" in the field of mobile app development. Now let's look at each framework side by side:

To sum it up, Cordova is the old generation of hybrid mobile app frameworks. It uses the WebView to render the UI of the app and accesses native device capabilities by means of plugins. React Native and NativeScript are the new generation because they translate your JavaScript code so that it can be executed by the native platform.

Somebody might come up with a better name for frameworks like React Native and NativeScript in the future. But for now let's classify them as "Native Hybrid Frameworks" because they both use JavaScript for authoring apps and they both offer native-like experience and performance to users.

8. How Is Telerik Involved in the Project?

Telerik is the company that created NativeScript. And, just like any other company, they need to make money in order to survive. So you might ask, if NativeScript is free and open source, how does Telerik make money from it? Well, the answer is through the Telerik Platform and Telerik UI for NativeScript.

The Telerik Platform provides developers with the tools they need to easily design, build, test, deploy, manage and measure the performance of NativeScript apps. Here are a few examples of the tools they offer:

• a visual app builder that allows you to drag and drop different UI components
• a cloud database that provides the database for your app
• live app updates for easily pushing updates to the app without having to resubmit it to the app store and have the user update the app manually
• an analytics service that answers questions such as how your app is being used, how it's performing, and what your users think of it

Telerik UI for NativeScript is a set of components for building the UI of the app. NativeScript already comes with free UI components, but there are also paid UI components such as the Chart and Calendar which you can only use when you purchase it from Telerik.

9. Next Steps

If you want to learn more about NativeScript, I recommend checking out the following resources:

If you still have questions regarding NativeScript, be sure to check out the FAQ page.
For a hands-on article on building a hello world app with NativeScript, check out Getting Started with NativeScript.
If you want a collection of articles, video tutorials and code snippets about NativeScript, there's NativeScript Snacks and NativeScript Resources.

Conclusion

In this article you've learned the very basics of NativeScript. As you have seen, NativeScript is a good option for building mobile apps using the skills you already have as a web developer. I hope this article has provided you with the necessary knowledge to help you decide whether NativeScript is right for you.
Written by Wernher-Bel Ancheta

If you found this post interesting, follow and support us.
Suggest for you:

The Complete Android & Java Course - Build 21 Android Apps

Android Application Programming - Build 20+ Android Apps

Build Apps with React Native

Ionic by Example: Create Mobile Apps in HTML5

iOS 10 Projects: Build Amazing Apps with Apple's Newest iOS

iOS 10 & Swift 3: From Beginner to Paid Professional