JavaScript: a nyelv alapjai, React Native és mobilalkalmazás-fejlesztés

Mi az a JavaScript?

JavaScript (JS) — magas szintű programozási nyelv dinamikus típusossággal, prototípus-alapú öröklődéssel és függvényekkel mint első osztályú objektumokkal. Brendan Eich alkotta 1995-ben 10 nap alatt. A webes technológiák (HTML, CSS, JS) három fő nyelvének egyike és a Node.js (2009) szerverplatform alapja, amely lehetővé tette a JS számára, hogy kilépjen a böngészőből.

A mobilfejlesztésben a JavaScript három paradigmában használatos: natív fordítás (React Native Hermes/JSC-vel), WebView konténerek (Ionic, Cordova) és szerveroldali JS (Node.js + Express mobilalkalmazások backendjéhez). A React Native — a domináns technológia: a Statista (2025) szerint a cross-platform projektek 38%-a használ React Native-et, csak a Flutter (46%) előzi meg.

A JavaScript kulcsjellemzője — az egyszálú végrehajtási modell nem blokkoló I/O-val. Az event loop lehetővé teszi több ezer aszinkron művelet feldolgozását egy szálon anélkül, hogy operációs rendszer szálakat hozna létre. Ez hatékonyvá teszi a JS-t I/O-intenzív alkalmazásokhoz (hálózati kérések, adatbázis-munka), de óvatosságot igényel CPU-intenzív számításoknál.

JavaScript szabványok: ES5, ES6, ES2025

ECMAScript (ES) szabvány határozza meg a JavaScript specifikációját. Az ES6 (2015) bevezette a let/const, nyílfüggvények, osztályok, modulok, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. A modern Hermes (React Native) és V8 (Node.js) motorok támogatják az ES2022+-t. A React Native Hermes az ES2020+-t támogatja bizonyos Proxy és Symbol korlátozásokkal.

JavaScript szintaxis: típusok, függvények és prototípusok

JavaScript szintaxis — C-szerű, dinamikusan típusos. A változó típusát az érték határozza meg, és futásidőben változhat. A let és const (ES6) felváltotta a var-t a blokk szintű láthatóság érdekében. Primitive típusok: string, number, boolean, null, undefined, symbol, bigint. Minden más objektum (object, array, function, date, regexp).

Függvények mint első osztályú objektumok

JavaScript — magasabb rendű függvényekkel rendelkező nyelv. A függvények hozzárendelhetők változókhoz, argumentumként átadhatók, más függvényekből visszaadhatók. A nyílfüggvényeknek (=>) nincs saját this-jük — öröklik a this-t a külső kontextusból. A zárvány (closure) — olyan függvény, amely megjegyzi a változókat abból a láthatósági tartományból, ahol létrehozták.

// Adattípusok és függvények JavaScript-ben
// Primitív típusok
const name = 'React Native';
let version = 0.71;
var isActive = true; // elavult var

// Objektumok és tömbök
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Magasabb rendű függvény
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// Zárvány (closure)
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

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

// Spread operátor objektumok másolásához
const newApp = { ...app, version: 16 };

A spread operátor ... egy objektum felületes másolatát hozza létre. A destructuring (const { platform, version } = app) mezőket bont ki változókba. A nyílfüggvény a filterByVersion-ben rövidebb, mint a function kifejezés, és nem hoz létre saját this-t — ez kritikus a React Native komponensekben, ahol a this a komponens osztályára hivatkozik.

Prototípus-alapú öröklődés

JavaScript prototípus-alapú öröklődést használ, nem osztályalapút, mint a Java vagy C#. Az osztályok (ES6) — szintaktikus cukor a prototípusok felett. Minden objektum rendelkezik egy belső [[Prototype]] hivatkozással egy másik objektumra. Amikor olyan tulajdonságot érünk el, amely nem létezik az objektumban, a JS a prototípus láncban keresi. Az osztály szintaxis (extends, super) olvashatóbbá teszi a kódot, de a felszín alatt prototípusok maradnak.

// Osztályok JavaScript-ben — szintaktikus cukor
class PlatformService {
  // Privát mező (ES2022)
  #apiKey;

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

  // Statikus metódus
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

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

  // Aszinkron metódus
  async initialize() {
    return await this.#validateKey();
  }

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

// Öröklődés
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

A privát mezők #apiKey (ES2022) valódi enkapszulációt biztosítanak, amely _underscore konvenciókkal nem érhető el. A statikus getPlatforms metódus az osztályhoz tartozik, nem a példányhoz. A getter info eléréskor számítódik ki. Az async/await lineárissá teszi az aszinkron kódot. A React Native Hermes a 0.71-es verziótól támogatja a privát mezőket.

Aszinkronitás JavaScript-ben: Event Loop és Promise

JavaScript aszinkronitás az event loop-on alapul — egy végtelen cikluson, amely ellenőrzi a call stack-et és a feladat sorokat. Call stack — szinkron kód, microtask queue — Promise.then/catch/finally, macrotask queue — setTimeout, setInterval, I/O. Az event loop először a microtask-ból vesz feladatokat, majd a macrotask-ból. A call stack blokkolása (végtelen ciklus) leállítja a teljes UI-t.

Promise — egy objektum, amely egy jövőbeli értéket képvisel. A Promise lehet pending (várakozó), fulfilled (sikeres), rejected (hibás). A .then().catch().finally() lánc feldolgozza az aszinkron eredményt. Az async/await (ES8) — szintaktikus cukor: az async függvény Promise-t ad vissza, az await felfüggeszti a végrehajtást a promise feloldásáig, anélkül hogy blokkolná a szálat.

// Aszinkron adatbetöltés React Native-ben
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>
  );
}

A useEffect hook az async fetchUser függvénnyel HTTP kérést hajt végre a komponens csatlakozásakor. A cancelled zászló megakadályozza a setState-et a leválasztás után — gyakori probléma a React Native-ben. Az Optional Chaining user?.name és a Nullish Coalescing ?? hibák nélkül kezeli az undefined-ot. Az ActivityIndicator a betöltés alatt jelenik meg — minden JS fejlesztő számára ismerős aszinkron minta.

React Native: JavaScript mobilplatformokon

React Native — a Meta (Facebook) keretrendszere natív mobilalkalmazások létrehozásához JavaScript-ben. A WebView megközelítéssel ellentétben a React Native valódi natív komponenseket renderel (UIView iOS-hez, ViewGroup Android-hoz). A JS kód egy külön szálon fut (Hermes vagy JSC), és a Bridge (régi architektúra) vagy JSI (új Fabric architektúra) segítségével kommunikál a natív UI szállal.

React Native architektúra

A React Native JS szálból (a te kódod), natív szálból (UI) és Bridge/JSI-ből áll az interakciójukhoz. A régi architektúrában (Bridge) a JSON üzenetek szerializálódnak és aszinkron módon kerülnek továbbításra — ez késleltetést okoz gyors animációknál. Az új Fabric architektúra (React Native 0.68+) a JSI-t (JavaScript Interface) használja — JS közvetlen interakcióját C++ objektumokkal szerializáció nélkül.

// React Native komponens natív API-val
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>
  );
}

A LocationTracker komponens bemutatja a natív geolokációs API-val való munkát. A Platform.OS megkülönbözteti az Androidot és iOS-t. A PermissionsAndroid.request — az Android natív engedély párbeszédablaka. A Geolocation.getCurrentPosition — a @react-native-community/geolocation modul, amely npm-en keresztül csatlakoztatható. A React Native JS interfészeket biztosít a kamerához, Bluetooth-hoz, gyorsulásmérőhöz és más érzékelőkhöz.

Ionic és Cordova: WebView konténerek

Ionic — keretrendszer hibrid mobilalkalmazásokhoz, amely WebView-t használ a HTML/CSS/JS rendereléséhez. A React Native-től eltérően az Ionic nem hoz létre natív komponenseket — az alkalmazás egy webkonténerben (WebView) fut iOS-en (WKWebView) és Androidon (Android WebView). Ez 100%-os webkód újrafelhasználást biztosít, de korlátozza az összetett animációk teljesítményét.

Apache Cordova — az Ionic alapja, amely JavaScript pluginokon keresztül biztosít hozzáférést natív API-khoz. Kamera, GPS, névjegyek, fájlrendszer — minden elérhető a cordova-plugin-* segítségével. Az Ionic 7+ a Capacitor-t használja — a Cordova utódját jobb teljesítménnyel, ESM támogatással és közvetlen hozzáféréssel az iOS/Android SDK-hoz Swift és Kotlin segítségével.

JavaScript fejlesztői eszközök

JS fejlesztői eszközök mobilalkalmazásokhoz tartozik a Node.js, npm/yarn, Expo, React Native CLI és Metro bundler. Node.js — JS futtatókörnyezet a böngészőn kívül, az ökoszisztéma alapja. npm (Node Package Manager) — csomagkezelő 2+ millió könyvtárral. npx — segédprogram npm csomagok futtatásához telepítés nélkül.

Eszközök ökoszisztémája

Expo — egy réteg a React Native felett, amely egyszerűsíti a fejlesztést: nem igényel Xcode/Android Studio-t a kezdéshez, Managed Workflow-t biztosít előre telepített könyvtárakkal. Expo Application Services (EAS) — építés és közzététel a felhőben. Metro — a React Native bundlere, amely a JS kódot és függőségeket egy fájlba gyűjti. Hermes — a Meta JS motorja, mobil eszközökre optimalizálva AOT fordítással.

// package.json — React Native projekt konfigurációja
{
  "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"
  }
}

A package.json fájl — minden JS projekt alapja. A start, android, ios szkriptek elindítják a Metro bundlert és az építést. A függőségek dependencies (runtime) és devDependencies (tesztek, linterek) részekre oszlanak. React Navigation — standard router. Jest — tesztelési keretrendszer. ESLint — statikus elemző, amely ellenőrzi a kódstílust és a potenciális hibákat.