NativeScript, що за звір і для чого він потрібен?

Доброго часу доби, хабражітелі, мене звати Володимир Міленко, я frontend-інженер в компанії Иннософт, географічно розташована в місті Иннополис і є резидентом особливої економічної зони р. Иннополис.

Сьогодні я розповім про такого звіра, як NativeScript(так, він змінився, так, сильно).
NativeScript — фреймворк для кроссплатформної розробки, дотримується концепції write once — use everywhere, і, можливо, у нього вийшло!



Що ти таке?
Почнемо з простого, {N} це JS, який запускається на JSVM, специфічної для кожної системи(V8 для Android, WebKit iOS).
І все б було б сумно, якби не одне але — NS надає доступ до всіх системних API.
Тобто

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

— Валідний {N} код, який створить proxy-об'єкт, всі звернення до якого будуть викликати нативні методи і повертати результат від них.

Фактично, код вище показує звернення до нативної підключається бібліотеці для Android. У більшості випадків такий довгий виклик ви напишете всього один раз при створенні nativescript-плагіна.

Execution flow в NativeScript виглядає наступним чином:


*Зображення взято з офіційної документації NativeScript

В принципі, до моменту релізу Angular 2, {N} мав досить відчутні мінуси, розмітка описувалася за допомогою xml, а весь функціонал доводилося писати самому.
Але при цьому, {N} розвивався і з'явилися модулі, що дозволяють абстрагуватися від ОС, і використовувати більшість стандартних функцій, не піклуючись про те, як конвертуються в нативні методи.
Наприклад, наступний код буде виконаний нативними методами перевірки існування файлу.


import fs = require("file-system")
let exists = fs.File.exists(“abc.ini"); // буде викликаний відповідний нативний метод, після чого boolean з Java конвертується в JS boolean.


У загальному і цілому, {N} — JS+XML, що працює на JSVM і дозволяє викликати нативні методи з JS. При цьому є можливість використовувати розмітку у вигляді XML і використовувати якийсь сабсет CSS, а ще застосовувати анімації та інше.

Чому не ReactNative?
Насправді, NativeScript і ReactNative дуже схожі, але при цьому дуже сильно відрізняються. ReactNative використовує DOM, NS використовує просто нативні лэйауты.
ReactNative обмежує вас в компонентах, NativeScript підтримує всі компоненти з AndroidArsenal і Cocoapods.

Головна перевага — Angular 2 + NS

З виходом Angular 2 світ веба сотрясся, в т. ч. тряслися ті, хто писав на rc версіях і зраджував добру половину коду під новий rc.
Команда виконала дуже большуй роботу і зробила Angular 2 максимально кастомизируемым. Хочеш змінити рендер — будь ласка, це зробили хлопці з Telerik.

Що ж нам дає можливість писати програми на Angular 2 + TypeScript + NativeScript?
А це дає нам той самий code-sharing, можливість використовувати величезну кількість фіч ангуляра.

Тепер ви можете нишпорити ваші сервіси веб компонентом і між tns-компонентом.

Розглянемо невеликий приклад шаблону:

Тут можна помітити директиву ngFor, що дозволяє найбільш зручно виводити колекцію, якщо ж вам необхідний ListView — там це робиться з допомогою шаблону, тобто android розробникам можна забути про ViewHolder'и та інше.

А ось так цей код буде виглядати на Android:

А ось так на iOS:


Також в розмітці можна помітити platform-specific розмітку, специфічну для кожної платформи:
<ios></ios>
<android></android


І раз вже заговорили про розмітку, то не можна не згадати two-way binding, який ми отримуємо за допомогою angular 2:
Тобто якщо описати змінну name в класі компонента, то щоб прив'язати її до текстового поля потрібно написати ось такий код:
<TextField ([text])="variable"></TextField>


І до речі про анімації, ви можете описувати її за допомогою css keyframes, використовувати бібліотеку keyfraymes або ж оперувати через Promise.
Ось так виглядає анімація через Promise:

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


На цьому невелике інтро підійде до кінця, опитування ви знайдете трохи нижче.

Для того, щоб зрозуміти, як Telerik зміг використовувати ангуляр рекомендую подивитися виступ Олексія Охріменко з GDG Perm: www.youtube.com/watch?v=eqJDM8PV-lE&index=4&list=PLuhR-xNwqdQhyCGY_1SW2olVDSG5VBoxd

NativeScript: nativescript.org

P. S. Розробляють NativeScript компанія Telerik, яка є частиною Progress. Це до слова про комментарие трохи нижче.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.