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 за бекенд мобилних апликација). React Native — доминантна технологија: према Statista (2025), 38% међуплатформских пројеката користи React Native, заостајући само за Flutter-ом (46%).

Кључна карактеристика JavaScript-а — једнонитни модел извршавања са неблокирајућим улазом-излазом. 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'];
  }

  // Гетер
  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 припада класи, а не инстанци. Гетер 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>
  );
}

Хук 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 (рантајм) и devDependencies (тестови, линтери). React Navigation — стандардни рутер. Jest — оквир за тестирање. ESLint — статички анализатор, који проверава стил кода и потенцијалне грешке.