JavaScript: Grundlagen der Sprache, React Native und mobile Entwicklung

Was ist JavaScript?

JavaScript (JS) ist eine höhere Programmiersprache mit dynamischer Typisierung, prototypischer Vererbung und Funktionen als Objekte erster Klasse. Es wurde von Brendan Eich 1995 in 10 Tagen entwickelt. Es ist eine der drei Hauptsprachen der Webtechnologien (HTML, CSS, JS) und die Grundlage der serverseitigen Plattform Node.js (2009), die JS den Austritt aus dem Browser ermöglichte.

In der mobilen Entwicklung wird JavaScript in drei Paradigmen verwendet: native Kompilierung (React Native mit Hermes/JSC), WebView-Container (Ionic, Cordova) und serverseitiges JS (Node.js + Express für Mobile-Backends). React Native ist die dominierende Technologie: Laut Statista (2025) verwenden 38% der plattformübergreifenden Projekte React Native, nur übertroffen von Flutter (46%).

Das Hauptmerkmal von JavaScript ist das Single-Thread-Ausführungsmodell mit nicht blockierender E/A. Die Ereignisschleife ermöglicht die Verarbeitung Tausender asynchroner Operationen in einem einzigen Thread ohne Erstellung von OS-Threads. Dies macht JS effizient für E/A-intensive Anwendungen (Netzwerkanfragen, Datenbankoperationen), erfordert jedoch Vorsicht bei CPU-intensiven Berechnungen.

JavaScript-Standards: ES5, ES6, ES2025

Der ECMAScript (ES)-Standard definiert die JavaScript-Spezifikation. ES6 (2015) führte let/const, Pfeilfunktionen, Klassen, Module, Promise ein. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Moderne Engines Hermes (React Native) und V8 (Node.js) unterstützen ES2022+. React Native Hermes unterstützt ES2020+ mit gewissen Einschränkungen bei Proxy und Symbol.

JavaScript-Syntax: Typen, Funktionen und Prototypen

Die JavaScript-Syntax ist C-ähnlich, dynamisch typisiert. Der Typ einer Variablen wird durch den Wert bestimmt und kann zur Laufzeit wechseln. let und const (ES6) ersetzten var für den Block-Gültigkeitsbereich. Primitive Typen: string, number, boolean, null, undefined, symbol, bigint. Alles andere ist ein Objekt (object, array, function, date, regexp).

Funktionen als Objekte erster Klasse

JavaScript ist eine Sprache mit Funktionen höherer Ordnung. Funktionen können Variablen zugewiesen, als Argumente übergeben, von anderen Funktionen zurückgegeben werden. Pfeilfunktionen (=>) haben kein eigenes this — sie erben this vom äußeren Kontext. Ein Closure ist eine Funktion, die sich an Variablen aus dem Bereich erinnert, in dem sie erstellt wurde.

// Datentypen und Funktionen in JavaScript
// Primitive Typen
const name = 'React Native';
let version = 0.71;
var isActive = true; // veraltetes var

// Objekte und Arrays
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Funktion höherer Ordnung
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-Operator zum Kopieren von Objekten
const newApp = { ...app, version: 16 };

Der Spread-Operator ... erstellt eine flache Kopie eines Objekts. Die Destrukturierung (const { platform, version } = app) extrahiert Felder in Variablen. Die Pfeilfunktion in filterByVersion ist kürzer als ein function-Ausdruck und erstellt kein eigenes this — dies ist in React Native-Komponenten kritisch, wo this auf die Komponentenklasse verweist.

Prototypische Vererbung

JavaScript verwendet prototypische Vererbung, nicht klassisch wie Java oder C#. Klassen (ES6) sind syntaktischer Zucker über Prototypen. Jedes Objekt hat einen internen [[Prototype]]-Verweis auf ein anderes Objekt. Beim Zugriff auf eine Eigenschaft, die im Objekt nicht existiert, sucht JS in der Prototypenkette danach. Die Klassensyntax (extends, super) macht den Code lesbarer, aber unter der Haube bleiben Prototypen.

// Klassen in JavaScript — syntaktischer Zucker
class PlatformService {
  // Privates Feld (ES2022)
  #apiKey;

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

  // Statische Methode
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

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

  // Asynchrone Methode
  async initialize() {
    return await this.#validateKey();
  }

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

// Vererbung
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

Private Felder #apiKey (ES2022) bieten echte Kapselung, die mit _-Unterstrich-Konventionen nicht verfügbar ist. Die statische Methode getPlatforms gehört zur Klasse, nicht zur Instanz. Der Getter info wird beim Zugriff berechnet. async/await macht asynchronen Code linear. React Native Hermes unterstützt private Felder seit Version 0.71.

Asynchronität in JavaScript: Event Loop und Promise

Die Asynchronität von JavaScript basiert auf der Ereignisschleife — einer Endlosschleife, die den Aufrufstapel (Call Stack) und die Aufgabenwarteschlangen überprüft. Der Call Stack behandelt synchronen Code, die Microtask-Warteschlange behandelt Promise.then/catch/finally, die Macrotask-Warteschlange behandelt setTimeout, setInterval, E/A. Die Ereignisschleife nimmt zuerst Aufgaben aus Microtask, dann aus Macrotask. Das Blockieren des Call Stacks (Endlosschleife) stoppt die gesamte UI.

Promise ist ein Objekt, das einen zukünftigen Wert darstellt. Ein Promise kann pending (ausstehend), fulfilled (erfüllt) oder rejected (abgelehnt) sein. Die .then().catch().finally()-Kette behandelt das asynchrone Ergebnis. async/await (ES8) ist syntaktischer Zucker: Eine async-Funktion gibt ein Promise zurück, await pausiert die Ausführung bis zur Auflösung des Promises, ohne den Thread zu blockieren.

// Asynchrones Datenladen in 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 fehlgeschlagen:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

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

  if (loading) return <ActivityIndicator />;

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

Der useEffect-Hook mit der async-Funktion fetchUser führt eine HTTP-Anfrage beim Mounten der Komponente aus. Das cancelled-Flag verhindert setState nach dem Unmounten — ein häufiges React Native-Problem. Optional Chaining user?.name und Nullish Coalescing ?? behandeln undefined ohne Fehler. ActivityIndicator wird während des Ladens angezeigt — ein asynchrones Muster, das jedem JS-Entwickler vertraut ist.

React Native: JavaScript auf mobilen Plattformen

React Native ist ein Framework von Meta (Facebook) zur Erstellung nativer mobiler Anwendungen in JavaScript. Anders als der WebView-Ansatz rendert React Native echte native Komponenten (UIView für iOS, ViewGroup für Android). JS-Code wird in einem separaten Thread (Hermes oder JSC) ausgeführt und kommuniziert über Bridge (alte Architektur) oder JSI (neue Fabric-Architektur) mit dem nativen UI-Thread.

React Native-Architektur

React Native besteht aus dem JS-Thread (Ihr Code), dem nativen Thread (UI) und Bridge/JSI für deren Interaktion. In der alten Architektur (Bridge) werden JSON-Nachrichten serialisiert und asynchron übertragen — dies verursacht Verzögerungen bei schnellen Animationen. Die neue Fabric-Architektur (React Native 0.68+) verwendet JSI (JavaScript Interface) — direkte JS-Interaktion mit C++-Objekten ohne Serialisierung.

// React Native-Komponente mit nativer 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>
  );
}

Die LocationTracker-Komponente demonstriert die Arbeit mit der nativen Geolokalisierungs-API. Platform.OS unterscheidet zwischen Android und iOS. PermissionsAndroid.request ist der native Android-Berechtigungsdialog. Geolocation.getCurrentPosition — ein Modul von @react-native-community/geolocation, installiert über npm. React Native bietet JS-Schnittstellen für Kamera, Bluetooth, Beschleunigungsmesser und andere Sensoren.

Ionic und Cordova: WebView-Container

Ionic ist ein Framework für hybride mobile Anwendungen, das WebView zum Rendern von HTML/CSS/JS verwendet. Anders als React Native erstellt Ionic keine nativen Komponenten — die Anwendung läuft innerhalb eines Web-Containers (WebView) auf iOS (WKWebView) und Android (Android WebView). Dies ermöglicht 100%ige Wiederverwendung von Webcode, schränkt jedoch die Leistung komplexer Animationen ein.

Apache Cordova ist die Grundlage von Ionic und bietet Zugriff auf native APIs über JavaScript-Plugins. Kamera, GPS, Kontakte, Dateisystem — alles ist über cordova-plugin-* verfügbar. Ionic 7+ verwendet Capacitor — den Nachfolger von Cordova mit besserer Leistung, ESM-Unterstützung und direktem Zugriff auf iOS/Android SDK über Swift und Kotlin.

JavaScript-Entwicklerwerkzeuge

Zu den JS-Entwicklerwerkzeugen für mobile Anwendungen gehören Node.js, npm/yarn, Expo, React Native CLI und Metro Bundler. Node.js ist eine JS-Laufzeitumgebung außerhalb des Browsers, die Grundlage des Ökosystems. npm (Node Package Manager) ist ein Paketmanager mit über 2 Millionen Bibliotheken. npx ist ein Dienstprogramm zum Ausführen von npm-Paketen ohne Installation.

Werkzeug-Ökosystem

Expo ist eine Schicht über React Native, die die Entwicklung vereinfacht: Es erfordert kein Xcode/Android Studio für den Start, bietet Managed Workflow mit vorinstallierten Bibliotheken. Expo Application Services (EAS) — Build und Veröffentlichung in der Cloud. Metro ist der React Native-Bundler, der JS-Code und Abhängigkeiten in einer Datei zusammenfasst. Hermes ist ein JS-Engine von Meta, optimiert für mobile Geräte mit AOT-Kompilierung.

// package.json — React Native Projektkonfiguration
{
  "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"
  }
}

Die package.json-Datei ist die Grundlage jedes JS-Projekts. Die Skripte start, android, ios starten den Metro-Bundler und den Build. Abhängigkeiten werden in dependencies (Laufzeit) und devDependencies (Tests, Linter) unterteilt. React Navigation ist der Standard-Router. Jest ist ein Test-Framework. ESLint ist ein statischer Analysator, der Codestil und potenzielle Fehler überprüft.