JavaScript: основи на езика, React Native и разработка на мобилни приложения

Какво е JavaScript?

JavaScript (JS) — език за програмиране от високо ниво с динамично типизиране, прототипно наследяване и функции като обекти от първи клас. Създаден от Брендан Айх през 1995 г. за 10 дни. Той е един от трите основни езика на уеб технологиите (HTML, CSS, JS) и основата на сървърната платформа Node.js (2009), която позволи на JS да излезе извън браузъра.

В мобилната разработка JavaScript се използва в три парадигми: естествена компилация (React Native с Hermes/JSC), WebView контейнери (Ionic, Cordova) и сървърен JS (Node.js + Express за backend на мобилни приложения). React Native — доминиращата технология: според Statista (2025), 38% от跨платформените проекти използват React Native, като изостава само от Flutter (46%).

Ключовата характеристика на JavaScript — еднонишков модел на изпълнение с неблокиращ I/O. Event loop позволява обработката на хиляди асинхронни операции в една нишка без създаване на нишки на операционната система. Това прави JS ефективен за I/O-натоварени приложения (мрежови заявки, работа с бази данни), но изисква внимание при CPU-интензивни изчисления.

Стандарти на JavaScript: ES5, ES6, ES2025

Стандартът ECMAScript (ES) определя спецификацията на JavaScript. ES6 (2015) въведе let/const, стрелкови функции, класове, модули, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Съвременните двигатели Hermes (React Native) и V8 (Node.js) поддържат ES2022+. React Native Hermes поддържа ES2020+ с отделни ограничения за Proxy и Symbol.

Синтаксис на JavaScript: типове, функции и прототипи

Синтаксис на JavaScript — подобен на C, динамично типизиран. Типът на променливата се определя от стойността и може да се промени по време на изпълнение. let и const (ES6) замениха var за блоков обхват. Примитивни типове: string, number, boolean, null, undefined, symbol, bigint. Всичко останало е обект (object, array, function, date, regexp).

Функции като обекти от първи клас

JavaScript — език с функции от по-висок ред. Функциите могат да се присвояват на променливи, да се предават като аргументи, да се връщат от други функции. Стрелковите функции (=>) нямат собствен this — те наследяват this от външния контекст. Затваряне (closure) — функция, която помни променливи от обхвата, в който е създадена.

// Типове данни и функции в JavaScript
// Примитивни типове
const name = 'React Native';
let version = 0.71;
var isActive = true; // остарял var

// Обекти и масиви
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

const items = ['Dart', 'Kotlin', 'Swift'];

// Функция от по-висок ред
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// Затваряне (closure)
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

// Spread оператор за копиране на обекти
const newApp = { ...app, version: 16 };

Spread операторът ... създава плитко копие на обект. Деструктурирането (const { platform, version } = app) извлича полета в променливи. Стрелковата функция във filterByVersion е по-кратка от function израз и не създава собствен this — това е критично в React Native компоненти, където this сочи към класа на компонента.

Прототипно наследяване

JavaScript използва прототипно наследяване, а не класово като Java или C#. Класовете (ES6) — синтактична захар върху прототипи. Всеки обект има вътрешна препратка [[Prototype]] към друг обект. При достъп до свойство, което не съществува в обекта, JS го търси във веригата от прототипи. Класовият синтаксис (extends, super) прави кода по-четим, но под капака остават прототипи.

// Класове в JavaScript — синтактична захар
class PlatformService {
  // Частно поле (ES2022)
  #apiKey;

  constructor(name, apiKey) {
    this.name = name;
    this.#apiKey = apiKey;
  }

  // Статичен метод
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

  // Getter
  get info() {
    return `${this.name} SDK`;
  }

  // Асинхронен метод
  async initialize() {
    return await this.#validateKey();
  }

  #validateKey() {
    return this.#apiKey.length > 10;
  }
}

// Наследяване
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

Частните полета #apiKey (ES2022) осигуряват истинско капсулиране, недостъпно с _underscore конвенции. Статичният метод getPlatforms принадлежи на класа, а не на инстанцията. Getter info се изчислява при достъп. async/await прави асинхронния код линеен. React Native Hermes поддържа частни полета от версия 0.71.

Асинхронност в JavaScript: Event Loop и Promise

Асинхронността на JavaScript се основава на event loop — безкраен цикъл, който проверява стека за извиквания (call stack) и опашките със задачи. Call stack — синхронен код, microtask queue — Promise.then/catch/finally, macrotask queue — setTimeout, setInterval, I/O. Event loop взема задачи първо от microtask, след това от macrotask. Блокирането на call stack (безкраен цикъл) спира целия UI.

Promise — обект, представляващ бъдеща стойност. Promise може да бъде pending (чакащ), fulfilled (успех), rejected (грешка). Веригата .then().catch().finally() обработва асинхронния резултат. async/await (ES8) — синтактична захар: функцията async връща Promise, await спира изпълнението до разрешаването на promise, без да блокира нишката.

// Асинхронно зареждане на данни в React Native
import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`
        );

        if (!response.ok) {
          throw new Error('Network error');
        }

        const data = await response.json();

        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      } catch (error) {
        if (!cancelled) {
          console.error('Fetch failed:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

    return () => { cancelled = true; };
  }, [userId]);

  if (loading) return <ActivityIndicator />;

  return (
    <View>
      <Text>{user?.name ?? 'Unknown'}</Text>
    </View>
  );
}

Hook useEffect с async функция fetchUser изпълнява HTTP заявка при монтиране на компонента. Флагът cancelled предотвратява setState след демонтиране — често срещан проблем в React Native. Optional Chaining user?.name и Nullish Coalescing ?? обработват undefined без грешки. ActivityIndicator се показва по време на зареждане — асинхронен модел, познат на всеки JS разработчик.

React Native: JavaScript на мобилни платформи

React Native — рамка от Meta (Facebook) за създаване на естествени мобилни приложения на JavaScript. За разлика от подхода WebView, React Native рендира истински естествени компоненти (UIView за iOS, ViewGroup за Android). JS кодът се изпълнява в отделна нишка (Hermes или JSC) и комуникира с естествената UI нишка чрез Bridge (стара архитектура) или JSI (нова архитектура Fabric).

Архитектура на React Native

React Native се състои от JS нишка (вашият код), естествена нишка (UI) и Bridge/JSI за тяхното взаимодействие. В старата архитектура (Bridge) JSON съобщенията се сериализират и предават асинхронно — това създава закъснения при бързи анимации. Новата архитектура Fabric (React Native 0.68+) използва JSI (JavaScript Interface) — директно взаимодействие на JS с C++ обекти без сериализация.

// React Native компонент с естествено API
import React, { useState, useEffect } from 'react';
import {
  View, Text, TouchableOpacity, Platform,
  PermissionsAndroid, Alert
} from 'react-native';
import Geolocation from '@react-native-community/geolocation';

function LocationTracker() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    requestLocationPermission();
  }, []);

  async function requestLocationPermission() {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        Alert.alert('Permission denied');
        return;
      }
    }
    getCurrentPosition();
  }

  function getCurrentPosition() {
    Geolocation.getCurrentPosition(
      pos => setLocation({
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
      }),
      error => Alert.alert('Error', error.message),
      { enableHighAccuracy: true, timeout: 15000 }
    );
  }

  return (
    <View>
      <Text>Lat: {location?.lat ?? 'N/A'}</Text>
      <Text>Lng: {location?.lng ?? 'N/A'}</Text>
      <TouchableOpacity onPress={getCurrentPosition}>
        <Text>Update Location</Text>
      </TouchableOpacity>
    </View>
  );
}

Компонентът LocationTracker демонстрира работа с естественото API за геолокация. Platform.OS различава Android и iOS. PermissionsAndroid.request — естественият диалог за разрешения на Android. Geolocation.getCurrentPosition — модулът @react-native-community/geolocation, свързан чрез npm. React Native предоставя JS интерфейси за камера, Bluetooth, акселерометър и други сензори.

Ionic и Cordova: WebView контейнери

Ionic — рамка за хибридни мобилни приложения, която използва WebView за рендиране на HTML/CSS/JS. За разлика от React Native, Ionic не създава естествени компоненти — приложението работи вътре в уеб контейнер (WebView) на iOS (WKWebView) и Android (Android WebView). Това дава 100% повторно използване на уеб код, но ограничава производителността на сложни анимации.

Apache Cordova — основата на Ionic, осигуряваща достъп до естествени API чрез JavaScript плъгини. Камера, GPS, контакти, файлова система — всичко е достъпно чрез cordova-plugin-*. Ionic 7+ използва Capacitor — наследник на Cordova с по-добра производителност, поддръжка на ESM и пряк достъп до iOS/Android SDK чрез Swift и Kotlin.

Инструменти на JavaScript разработчика

Инструменти на JS разработчика за мобилни приложения включват Node.js, npm/yarn, Expo, React Native CLI и Metro bundler. Node.js — среда за изпълнение на JS извън браузъра, основа на екосистемата. npm (Node Package Manager) — мениджър на пакети с 2+ милиона библиотеки. npx — помощна програма за стартиране на npm пакети без инсталация.

Екосистема от инструменти

Expo — наслояване върху React Native, опростяващо разработката: не изисква Xcode/Android Studio за начало, предоставя Managed Workflow с предварително инсталирани библиотеки. Expo Application Services (EAS) — изграждане и публикуване в облака. Metro — пакетиращият инструмент на React Native, събиращ JS код и зависимости в един файл. Hermes — JS двигател от Meta, оптимизиран за мобилни устройства с AOT компилация.

// package.json — конфигурация на React Native проект
{
  "name": "MyMobileApp",
  "version": "1.0.0",
  "scripts": {
    "start": "npx react-native start",
    "android": "npx react-native run-android",
    "ios": "npx react-native run-ios",
    "test": "jest",
    "lint": "eslint . --ext .ts,.tsx"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.0",
    "@react-navigation/native": "^6.1.0",
    "@react-native-community/geolocation": "^3.2.0"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "eslint": "^8.56.0",
    "metro-react-native-babel-preset": "^0.77.0"
  }
}

Файлът package.json — основата на всеки JS проект. Скриптовете start, android, ios стартират Metro пакетиращия инструмент и изграждането. Зависимостите са разделени на dependencies (runtime) и devDependencies (тестове, линтери). React Navigation — стандартен рутер. Jest — рамка за тестване. ESLint — статичен анализатор, проверяващ стила на кода и потенциалните грешки.