Converting Angular 2 applications into native apps by using NativeScript

A few weeks ago I have started studying NativeScript. I wanted to figure out whether you can use an existing Angular 2 web application for building an Android application. The goal was to reuse as much as possible of the existing code. First of all I had a lot of questions: Does it work? How does it work? What can be reused? What should be modified? Does it make sense to reuse an existing app or would it be better to write a new one? Could I use a common codebase? But before I try to answer these questions I want to introduce you to NativeScript.

What is NativeScript?

NativeScript is an open source framework for building iOS and Android applications with a single codebase. You can use TypeScript or JavaScript together with XML and CSS for building mobile applications. Moreover, NativeScript provides the possibility to use Angular 2. As a result, by using the same framework as for building web apps you can build real native apps. No hybrid apps! Instead of having a web view wrapped into a native app (like a hybrid app) you get real native UI views. So there is no DOM and no browser what in many cases leads to a much better performance.

For developing, NativeScript recommends Microsoft’s Visual Studio Code as IDE because there is a special NativeScript extension. You can use this extension as a comfortable way to debug by using breakpoints and checking variables.

You can have a look at the official Angular 2 or NativeScript documentation to get more detailed information about these frameworks.

Why you should use NativeScript?

If you would like to build an application for Android and iOS, you need knowledge in two different programming languages as well as two different IDEs. With NativeScript you are able to build an application for both operating systems with a single codebase. You don’t need to know Java or Objective-C and because for many of the native APIs there is a plugin, not even if you need to access the native APIs. This leads to the next point.

You have direct access to the native APIs and you can do this by using JavaScript. That means the native types are implicitly converted to JavaScript types and vice versa. For a better understanding have a look at the following code example:

What happened? The JavaScript variable “abc” is translated into a Java String and the returned Java Integer is translated into a JavaScript number. For more detailed information you can have a look at the NativeScript documentation or the article “How NativeScript Works”.

Although NativeScript creates apps for Android and iOS with a single codebase you are able to customize the user interface or even the TypeScript code behind. If there are many differences you can write different files for the user interfaces or the code. Otherwise, you could use iOS or Android tags in the XML file or conditional statements in the TypeScript file to distinguish between iOS and Android. For example:

For further examples and more detailed information you can have a look at the article “Platform-Specific Development with NativeScript”.

Is it possible to reuse an existing Angular 2 application for developing a mobile app by using NativeScript?

Short answer: It depends!

Theoretically, it should be possible. Because NativeScript supports Angular 2 and TypeScript and the app structure is almost the same (except of the user interface). In reality it looks a little different. First of all you have to change some little things. For example you have to import the NativeScriptModule in your app.module.ts and remove the imported BrowserModule. Otherwise NativeScript will stop with an error. As already said, there is another small disadvantage. You have to rewrite the whole user interface. In NativeScript there is no DOM and no browser and as a result the HTML-part of Angular 2 cannot be reused. But in my case there occurred some bigger errors while reusing an existing Angular 2 application. I would like to describe two of them.

Using web-specific code

My application is a planning poker app where the host can create meetings. Such a meeting is identified by a key which is created on the database. Users are able to join the meeting by using the URL that includes the key. The app provides this meeting URL by:

Because I have a native app there is no browser and no website. So this called method obviously does not work. Because of this problem the construction of the app by using the URL with the meeting key as entry for participants has to be rethought.

Using the angularfire2 dependency

My biggest problem occurred by using the angularfire2 dependency. This module allows using firebase in the Angular 2 application. Unfortunately, this module cannot be used with NativeScript. A first way out was a special NativeScript firebase plugin. It works well but it would lead to some changes in the code. Another way out could be the nativescript-nodeify plugin which makes several npm packages compatible with NativeScript. But a first attempt led to different errors and further researches were without success.

Summary

In my opinion NativeScript is fantastic if you build your app from scratch. You can write just one code and as a result you get applications for Android and iOS. You also have the possibility to use a common codebase for native applications and web apps. On the other side, reusing an existing Angular 2 application could be difficult in general. Web applications could contain code that won’t work on native apps. Moreover, the existing Angular 2 application could use dependencies that can’t be easily used with NativeScript.