NativeScript: детальний огляд з прикладами

🔹 Що таке NativeScript?

NativeScript — це фреймворк для розробки кросплатформних мобільних застосунків для iOS та Android за допомогою JavaScript, TypeScript або Angular/Vue.

На відміну від Ionic (який використовує WebView) та React Native (який працює через міст між JS та нативним кодом), NativeScript напряму викликає нативні API, що забезпечує вищу продуктивність та нативний вигляд.

---

🔹 Основні особливості NativeScript

✅ Кросплатформність

• Один код працює на iOS та Android.
• Використовує нативні компоненти операційної системи.

✅ Прямий доступ до нативних API

• Без використання WebView (на відміну від Ionic).
• Без JS Bridge (на відміну від React Native).
• Використовує C++ Runtime, що напряму взаємодіє з Android/iOS API.

✅ Підтримка JavaScript, TypeScript, Angular, Vue

• Можна писати на чистому JavaScript.
• Підтримка TypeScript для безпечного коду.
• Інтегрується з Angular та Vue для масштабних застосунків.

✅ Гаряче оновлення (Hot Reloading)

• Миттєве відображення змін без перевстановлення застосунку.

✅ Можливість додавання нативного коду

• Можна легко писати Swift/Objective-C для iOS або Java/Kotlin для Android.

---

🔹 Як працює NativeScript?

NativeScript дозволяє напряму працювати з нативними елементами, використовуючи JavaScript.
📌 Наприклад, у NativeScript ви можете керувати нативною кнопкою Android або iOS через JS-код без використання веб-технологій.

---

🔹 Основи роботи з NativeScript

📌 Встановлення NativeScript

Перед початком потрібно встановити NativeScript CLI:

npm install -g @nativescript/cli

Створення нового проєкту:

ns create MyApp --template @nativescript/template-hello-world

Запуск застосунку:

ns run android  # Запуск на Android
ns run ios      # Запуск на iOS

---

📌 Простий застосунок NativeScript + JavaScript

import { Application, Button } from '@nativescript/core';

Application.run({
  create: () => {
    const button = new Button();
    button.text = "Натисни мене";
    button.on("tap", () => console.log("Кнопка натиснута"));
    return button;
  }
});

📌 Що тут відбувається?

• Створюємо нативний компонент кнопки.
• Додаємо обробник натискання.
• Використовуємо нативний Application.run() для запуску UI.

---

📌 Простий застосунок NativeScript + Angular

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

@Component({
  selector: 'ns-app',
  template: `
    <StackLayout>
      <Button text="Натисни мене" (tap)="onTap()"></Button>
    </StackLayout>
  `,
})
export class AppComponent {
  onTap() {
    console.log("Кнопка натиснута!");
  }
}

📌 Що тут відбувається?

• Використовуємо Angular для створення UI.
• <StackLayout> – контейнер для компонентів.
• <Button> – нативна кнопка.
• (tap)="onTap()" – прив’язка події.

---

🔹 Основні UI-компоненти NativeScript

NativeScript містить нативні компоненти, які напряму відображаються у вигляді Android/iOS елементів.

NativeScript	Android	iOS
<Button>	<Button>	<UIButton>
<Label>	<TextView>	<UILabel>
<Image>	<ImageView>	<UIImageView>

📌 Приклад використання компонентів:

<Page xmlns="http://schemas.nativescript.org/tns.xsd">
  <StackLayout>
    <Label text="Привіт, NativeScript!" />
    <Button text="Натисни мене" tap="{{ onTap }}" />
  </StackLayout>
</Page>

---

🔹 Доступ до нативних API

📌 Приклад використання камери через NativeScript API

npm install @nativescript/camera

import { takePicture } from '@nativescript/camera';

async function capturePhoto() {
  const image = await takePicture({ width: 300, height: 300, keepAspectRatio: true });
  console.log("Фото зроблено:", image);
}

📌 Що тут відбувається?

• Використовуємо @nativescript/camera для роботи з камерою.
• Викликаємо нативний метод takePicture().
• Отримуємо зображення у вигляді нативного об’єкта.

---

🔹 Робота з API

📌 Приклад отримання даних з API

import { Http } from '@nativescript/core';

async function fetchData() {
  const response = await Http.request({ url: 'https://jsonplaceholder.typicode.com/todos/1', method: 'GET' });
  console.log("Дані:", response.content.toJSON());
}

📌 Що тут відбувається?

• Використовуємо нативний HTTP-клієнт (Http).
• Отримуємо JSON-дані з API.

---

🔹 Переваги NativeScript

✅ 100% нативний інтерфейс – UI виглядає і працює як у нативних застосунках.
✅ Прямий доступ до нативних API – без WebView або JS Bridge.
✅ Підтримка Angular, Vue, TypeScript – для більшої гнучкості.
✅ Гаряче оновлення (Hot Reloading) – прискорює розробку.
✅ Готові UI-компоненти – адаптуються під iOS та Android.

---

🔹 Недоліки NativeScript

❌ Важча крива навчання – складніше, ніж React Native чи Ionic.
❌ Менша спільнота та екосистема – у порівнянні з React Native.
❌ Великий розмір застосунку – трохи більший, ніж у нативних застосунків.
❌ Менше готових бібліотек – доводиться писати більше нативного коду.

---

🔹 Для кого підходить NativeScript?

✅ Для тих, хто хоче максимально нативний UI, але без Java/Kotlin/Swift.
✅ Для Angular або Vue-розробників, які хочуть створювати мобільні застосунки.
✅ Для компаній, які хочуть один код для iOS та Android, але без WebView.

---

🔹 Висновок

NativeScript – це потужний фреймворк для кросплатформної розробки з 100% нативним UI та продуктивністю.

Він має кращу швидкодію, ніж Ionic, та більш нативний підхід, ніж React Native.
Якщо вам потрібен максимально продуктивний кросплатформний застосунок, NativeScript – чудовий вибір! 🚀