NativeScript, what kind of beast and what is it for?

Good day, habrazhiteli, my name is Vladimir Milenko, I am a frontend-engineer in the company Innosoft, geographically located in the city of Innopolis and is a resident of the special economic zone of the city of Innopolis.

Today I will talk about such a beast as NativeScript (yes, it has changed, yes, much). NativeScript is a framework for cross-platform development, adhering to the concept of write once - use everywhere, and, perhaps, he did it!

What are you?

Let's start with a simple one, {N} is JS, which runs on a JSVM specific to each system (V8 for Android, WebKit iOS). And all would be sad if it were not for one thing - NS provides access to all system APIs.

Those.
')

let card = new com.google.android.support.v7.widget.CardView(someContext); 

- Valid {N} code that will create a proxy object, all calls to which will call native methods and return the result from them.

In fact, the code above shows a call to the native plugin library for Android. In most cases, you will write such a long call only once when creating a nativescript plugin.

The execution flow in NativeScript is as follows:


* Image taken from official NativeScript documentation.

In principle, before the release of Angular 2, {N} had very weighty cons, the markup was described using xml, and all the functionality had to be written by myself. But at the same time, {N} developed and appeared modules that allow to abstract from the OS, and use most of the standard features, without worrying about how they are converted into native methods.

For example, the following code will be executed using native methods for checking the existence of a file.

 import fs = require(“file-system”) let exists = fs.File.exists(“abc.ini”); //     ,   boolean  Java   JS boolean. 

In general, {N} is JS + XML, running on JSVM and allowing you to call native methods from JS. In this case, it is possible to use markup in the form of XML and use a certain CSS subset, and also apply animations and so on.

Why not ReactNative?

// there used to be a small comparison with React.Native, but due to my mistake I removed it. Thanks to the commentators.
NativeScript advantages:
Supports all components from AndroidArsenal and Cocoapods.
Supports calling native methods from native libraries.
Minuses:
These calls will have to be declared, i.e. describe the library (which is generally not necessary, it is enough to describe only those methods that you call)

The main advantage - Angular 2 + NS

With the release of Angular 2, the web world rocked, incl. those who wrote on rc versions and changed a good half of the code for the new rc were shaking.

The team did a lot of work and made Angular 2 as customizable as possible. You want to override the render - please, this is what the guys from Telerik did.

What makes it possible for us to write applications in Angular 2 + TypeScript + NativeScript? And this gives us the same code-sharing, the ability to use a huge number of angular features.

Now you can fumble your services between the web component and between the tns component.

Consider a small sample template:



Here you can notice the ngFor directive, which allows you to most conveniently display the collection, if you need a ListView - this is done using a template, i.e. Android developers can forget about ViewHolders and stuff.

And this is how the code will look on Android:



And this is on iOS:



You can also see platform-specific markup specific to each platform in the markup:

 <ios></ios> <android></android 

And since we started talking about markup, it is impossible not to mention the two-way binding, which we get with the help of angular 2:

Those. If you describe the variable name in the component class, then to bind it to the text field, you need to write the following code:

 <TextField ([text])="variable"></TextField> 

And to the word about the animation, you can describe it with the help of css keyframes, use the keyfraymes library or operate through Promise.

This is how the animation through Promise looks like:

 let view = this.page.getViewById("grid"); view .animate({backgroundColor: new Color("#efefef"), duration: 75}) .then( () => { view.animate({backgroundColor: new Color("white"), duration: 75}); } ); 

On this little intro will come to an end, you will find the survey a little lower.

In order to understand how Telerik could use an angular, I recommend watching the performance of Alexey Okhrimenko with GDG Perm.

→ native script

PS Develop NativeScript by Telerik, which is part of Progress. This is about the commentary below.