Создание мобильных приложений с Angular или Vue.js и NativeScript {N}

В последние годы все больше и больше разработчиков Java вступают в контакт с разработкой интерфейса. Для этой группы разработчиков переход на разработку мобильных приложений с помощью NativeScript — лишь маленький шаг. В этом посте мы попытаемся прояснить возможности разработки нативных и гибридных приложений с использованием NativeScript.

Что такое NativeScript {N}?

{N} — это платформа с открытым исходным кодом (под лицензией Apache 2) для создания собственных приложений iOS и Android с использованием TypeScript и Angular. {N} — это технология, отличная от гибридных сред, таких как Ionic и Phonegap. {N} — это среда выполнения, а не веб-технология. Ваше приложение не будет работать как мини-сайт в WebView и поэтому будет более эффективным. С {N} у вас есть прямой доступ ко всем родным API вашего устройства.

Машинопись

Для программистов на Java интересно понять, что TypeScript (TS) имеет много общего с Java. TS — лучший способ написать {N} приложения, независимо от того, объединены ли они с Angular или нет. И, кроме того, написание собственного кода в TS для Android довольно просто, потому что вы можете взять на себя много непосредственного участия в нативном коде Java (например:  new io.java.File() допустимо как в Java, так и в JS / TS. Это просто немного сложнее в Objective-C). На самом деле очень интересно видеть, как NativeScript удается реализовать все нативные конструкции с чистым JavaScript. От строковых массивов до интерфейсов и реализаций абстрактных классов.

Почему NativeScript?

Одним из аргументов в пользу использования NativeScript {N} является повторное использование «Умений». То есть кто-то со знанием JavaScript / TypeScript может сразу начать с {N}. {N} написано на JavaScript или TypeScript.

Повторное использование кода. Создание собственных мобильных приложений для iOS и Android с единой кодовой базой и общим интерфейсом. Это не относится к Xamarin, например, где вам нужно создать два интерфейса для iOS и Android с одним общим слоем. Неудивительно, что лозунг {N} звучит так: «Пиши один раз, беги везде».

Его также легко расширить с помощью модулей {N} (см. Примеры в этой статье) и модулей npm. Собственно плагины от Cordova / Phonegap.

Наконец, WebViews не используются, в отличие от многих гибридных сред. Благодаря JavaScript у вас есть прямой доступ к Native API и повышение производительности NativeScript.

Что нужно для NativeScript?

В документации по NativeScript есть четкое описание того, как {N} должен быть установлен. Поскольку эта установка не всегда работает безупречно, имеет смысл установить «NativeScript Sidekick».

С помощью Sidekick можно создавать приложения в облаке.

Если вы решили создавать свои приложения в облаке, вы можете разрабатывать свои приложения независимо от вашей операционной системы. Конечно, вы даже можете создавать приложения для iOS на компьютере с Windows. С Sidekick также можно работать локально, но для этого вам нужно настроить собственную среду с iOS Xcode и Android SDK. У Sidekick все еще есть много известных проблем, но он уже работает хорошо.

Еще одна приятная вещь о {N} — это Live Sync. Таким образом, если вы измените правило в коде, оно будет отправлено непосредственно на телефон с помощью облачной сборки, и результат изменения будет сразу же виден.

Как NativeScript работает с JavaScript?

Ниже приведен простой пример JavaScript в {N}, который создает экземпляр iOS-элемента UIAlertView управления на основе Objective-C  :

var myAlert = new UIAlertView();

myAlert.message = “NativeScript rocks!”;

myAlert.show();

var dialogs = require ("ui / dialogs");

dialogs.alert ({message: "NativeScript rocks!"});

import {Component} from ‘@angular/core';

@Component({
    selector: ‘grocery - list '
    templateUrl: ‘grocerylist.template.html '
})
export class GroceryListComponent {
    groceries: string[];
    constructor() {
        this.groceries = [‘Cheese, ‘Eggs’, 'Tomatoes', 'Tea']
    }
}

….

<grocery-list></grocery-list>     

….

<p>Groceries: </p>
<ul>
	<li *ng-for = “let grocery of groceries">      
	{{grocery}}
	</li>
</ul>

<StackLayout *ngFor = "let grocery of groceries">

<Label [text] = “grocery"></Label>

</StackLayout>

var http = require(“http”); import HTTP module

http.getJSON(‘https://api.groceries.com’)

.then(function (result)) {
	…
});

import {Http} from ‘@angular/http’

export class GroceryListService {
    constructor(private http: Http) {}
    getGroceries() {
        return this.http.get(`https://api.groceries.com`)
            .map((res: Response) => res.json());
    }
}

const Vue = require("nativescript-vue");

new Vue({
    data() {
        return {
            message: 'Hello Vue!',
        }
    },
    template: `
<Page class="page">
<Label :text="message" />
</Page>
`,
}).$start();