JavaScript: basis van de taal, React Native en mobiele ontwikkeling

Wat is JavaScript?

JavaScript (JS) — een hoogwaardige programmeertaal met dynamische typering, prototypische overerving en functies als eersteklas objecten. Gemaakt door Brendan Eich in 1995 in 10 dagen. Het is een van de drie belangrijkste talen van webtechnologieën (HTML, CSS, JS) en de basis van het serverplatform Node.js (2009), waarmee JS buiten de browser kon komen.

In mobiele ontwikkeling wordt JavaScript in drie paradigma's gebruikt: native compilatie (React Native met Hermes/JSC), WebView-containers (Ionic, Cordova) en server-JS (Node.js + Express voor backend van mobiele apps). React Native — de dominante technologie: volgens Statista (2025) gebruikt 38% van de cross-platform projecten React Native, alleen achter Flutter (46%).

Het belangrijkste kenmerk van JavaScript — het single-thread uitvoeringsmodel met niet-blokkerende I/O. Event loop maakt het mogelijk duizenden asynchrone bewerkingen in één thread te verwerken zonder besturingssysteem-threads te creëren. Dit maakt JS efficiënt voor I/O-intensieve toepassingen (netwerkverzoeken, databasewerk), maar vereist voorzichtigheid bij CPU-intensieve berekeningen.

JavaScript-standaarden: ES5, ES6, ES2025

ECMAScript (ES)-standaard definieert de JavaScript-specificatie. ES6 (2015) introduceerde let/const, pijlfuncties, klassen, modules, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Moderne Hermes (React Native) en V8 (Node.js) engines ondersteunen ES2022+. React Native Hermes ondersteunt ES2020+ met aparte beperkingen op Proxy en Symbol.

JavaScript-syntax: types, functies en prototypen

JavaScript-syntax — C-achtig, dynamisch getypeerd. Het type variabele wordt bepaald door de waarde en kan tijdens runtime veranderen. let en const (ES6) hebben var vervangen voor block-scope zichtbaarheid. Primitieve types: string, number, boolean, null, undefined, symbol, bigint. Al het andere is een object (object, array, function, date, regexp).

Functies als eersteklas objecten

JavaScript — een taal met hogere-orde functies. Functies kunnen worden toegewezen aan variabelen, als argumenten worden doorgegeven, uit andere functies worden geretourneerd. Pijlfuncties (=>) hebben geen eigen this — ze erven this van de externe context. Sluiting (closure) — een functie die variabelen onthoudt uit het bereik waarin ze is gemaakt.

// Gegevenstypes en functies in JavaScript
// Primitieve types
const name = 'React Native';
let version = 0.71;
var isActive = true; // verouderde var

// Objecten en arrays
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Hogere-orde functie
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// Sluiting (closure)
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

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

// Spread-operator voor kopiëren van objecten
const newApp = { ...app, version: 16 };

De spread-operator ... maakt een oppervlakkige kopie van een object. Destructuring (const { platform, version } = app) extraheert velden naar variabelen. De pijlfunctie in filterByVersion is korter dan een function-expressie en creëert geen eigen this — dit is cruciaal in React Native-componenten waar this naar de componentklasse verwijst.

Prototypische overerving

JavaScript gebruikt prototypische overerving, niet klassengebaseerd zoals Java of C#. Klassen (ES6) — syntactische suiker bovenop prototypen. Elk object heeft een interne [[Prototype]]-verwijzing naar een ander object. Bij toegang tot een eigenschap die niet in het object bestaat, zoekt JS ernaar in de prototypeketen. Klassensyntax (extends, super) maakt code leesbaarder, maar onder de motorkap blijven prototypen.

// Klassen in JavaScript — syntactische suiker
class PlatformService {
  // Privéveld (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;
  }
}

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

Privévelden #apiKey (ES2022) zorgen voor echte inkapseling, onbereikbaar met _underscore-conventies. De statische methode getPlatforms behoort tot de klasse, niet tot de instantie. De getter info wordt berekend bij aanroep. async/await maakt asynchrone code lineair. React Native Hermes ondersteunt privévelden vanaf versie 0.71.

Asynchroniteit in JavaScript: Event Loop en Promise

JavaScript-asynchroniteit is gebaseerd op de event loop — een oneindige lus die de call stack en taakwachtrijen controleert. Call stack — synchrone code, microtask queue — Promise.then/catch/finally, macrotask queue — setTimeout, setInterval, I/O. Event loop haalt eerst taken uit microtask, daarna uit macrotask. Blokkering van de call stack (oneindige lus) stopt de hele UI.

Promise — een object dat een toekomstige waarde vertegenwoordigt. Promise kan pending (in afwachting), fulfilled (succes), rejected (fout) zijn. De keten .then().catch().finally() verwerkt het asynchrone resultaat. async/await (ES8) — syntactische suiker: async-functie retourneert een Promise, await pauzeert de uitvoering tot de promise is opgelost, zonder de thread te blokkeren.

// Asynchroon laden van gegevens 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 failed:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

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

  if (loading) return <ActivityIndicator />;

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

De useEffect-hook met de async-functie fetchUser voert een HTTP-verzoek uit bij het monteren van de component. De cancelled-vlag voorkomt setState na demontage — een veelvoorkomend probleem in React Native. Optional Chaining user?.name en Nullish Coalescing ?? verwerken undefined zonder fouten. ActivityIndicator wordt weergegeven tijdens het laden — een asynchroon patroon bekend bij elke JS-ontwikkelaar.

React Native: JavaScript op mobiele platforms

React Native — een framework van Meta (Facebook) voor het maken van native mobiele apps in JavaScript. In tegenstelling tot de WebView-benadering rendert React Native echte native componenten (UIView voor iOS, ViewGroup voor Android). JS-code wordt uitgevoerd in een aparte thread (Hermes of JSC) en communiceert met de native UI-thread via Bridge (oude architectuur) of JSI (nieuwe Fabric-architectuur).

React Native-architectuur

React Native bestaat uit een JS-thread (jouw code), native thread (UI) en Bridge/JSI voor hun interactie. In de oude architectuur (Bridge) worden JSON-berichten geserialiseerd en asynchroon verzonden — dit veroorzaakt vertragingen bij snelle animaties. De nieuwe Fabric-architectuur (React Native 0.68+) gebruikt JSI (JavaScript Interface) — directe interactie van JS met C++-objecten zonder serialisatie.

// React Native-component met 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>
  );
}

De component LocationTracker demonstreert werken met de native geolocatie-API. Platform.OS onderscheidt Android en iOS. PermissionsAndroid.request — het native machtigingsdialoogvenster van Android. Geolocation.getCurrentPosition — de module @react-native-community/geolocation, aangesloten via npm. React Native biedt JS-interfaces voor camera, Bluetooth, accelerometer en andere sensoren.

Ionic en Cordova: WebView-containers

Ionic — een framework voor hybride mobiele apps dat WebView gebruikt voor het renderen van HTML/CSS/JS. In tegenstelling tot React Native maakt Ionic geen native componenten — de app werkt binnen een webcontainer (WebView) op iOS (WKWebView) en Android (Android WebView). Dit geeft 100% herbruikbaarheid van webcode, maar beperkt de prestaties van complexe animaties.

Apache Cordova — de basis van Ionic, die toegang tot native API's biedt via JavaScript-plugins. Camera, GPS, contacten, bestandssysteem — alles is toegankelijk via cordova-plugin-*. Ionic 7+ gebruikt Capacitor — de opvolger van Cordova met betere prestaties, ESM-ondersteuning en directe toegang tot iOS/Android SDK via Swift en Kotlin.

JavaScript-ontwikkeltools

JS-ontwikkeltools voor mobiele apps omvatten Node.js, npm/yarn, Expo, React Native CLI en Metro bundler. Node.js — JS-runtime buiten de browser, de basis van het ecosysteem. npm (Node Package Manager) — pakketbeheerder met 2+ miljoen bibliotheken. npx — hulpprogramma voor het uitvoeren van npm-pakketten zonder installatie.

Tool-ecosysteem

Expo — een laag bovenop React Native die ontwikkeling vereenvoudigt: vereist geen Xcode/Android Studio om te beginnen, biedt Managed Workflow met vooraf geïnstalleerde bibliotheken. Expo Application Services (EAS) — bouwen en publiceren in de cloud. Metro — de bundler van React Native die JS-code en afhankelijkheden in één bestand verzamelt. Hermes — de JS-engine van Meta, geoptimaliseerd voor mobiele apparaten met AOT-compilatie.

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

Het bestand package.json — de basis van elk JS-project. Scripts start, android, ios starten de Metro-bundler en build. Afhankelijkheden zijn verdeeld in dependencies (runtime) en devDependencies (tests, linters). React Navigation — standaard router. Jest — testframework. ESLint — statische analyser die codestijl en potentiële fouten controleert.