JavaScript : bases du langage, React Native et développement mobile

Qu'est-ce que JavaScript ?

JavaScript (JS) est un langage de programmation de haut niveau avec typage dynamique, héritage prototypique et fonctions comme objets de première classe. Il a été créé par Brendan Eich en 1995 en 10 jours. C'est l'un des trois langages principaux des technologies web (HTML, CSS, JS) et le fondement de la plateforme serveur Node.js (2009), qui a permis à JS de sortir du navigateur.

Dans le développement mobile, JavaScript est utilisé selon trois paradigmes : compilation native (React Native avec Hermes/JSC), conteneurs WebView (Ionic, Cordova) et JS côté serveur (Node.js + Express pour les backends d'applications mobiles). React Native est la technologie dominante : selon Statista (2025), 38% des projets multiplateformes utilisent React Native, juste derrière Flutter (46%).

La caractéristique clé de JavaScript est le modèle d'exécution monothread avec E/S non bloquantes. L'event loop permet de traiter des milliers d'opérations asynchrones dans un seul thread sans créer de threads OS. Cela rend JS efficace pour les applications intensives en E/S (requêtes réseau, opérations base de données), mais nécessite de la prudence pour les calculs intensifs en CPU.

Normes JavaScript : ES5, ES6, ES2025

La norme ECMAScript (ES) définit la spécification de JavaScript. ES6 (2015) a introduit let/const, les fonctions fléchées, les classes, les modules, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Les moteurs modernes Hermes (React Native) et V8 (Node.js) supportent ES2022+. React Native Hermes supporte ES2020+ avec certaines limitations sur Proxy et Symbol.

Syntaxe JavaScript : types, fonctions et prototypes

La syntaxe JavaScript est de type C, à typage dynamique. Le type d'une variable est déterminé par la valeur et peut changer à l'exécution. let et const (ES6) ont remplacé var pour la portée de bloc. Types primitifs : string, number, boolean, null, undefined, symbol, bigint. Tout le reste est un objet (object, array, function, date, regexp).

Fonctions comme objets de première classe

JavaScript est un langage avec des fonctions d'ordre supérieur. Les fonctions peuvent être assignées à des variables, passées comme arguments, retournées par d'autres fonctions. Les fonctions fléchées (=>) n'ont pas leur propre this — elles héritent this du contexte externe. Une fermeture (closure) est une fonction qui se souvient des variables de la portée où elle a été créée.

// Types de données et fonctions en JavaScript
// Types primitifs
const name = 'React Native';
let version = 0.71;
var isActive = true; // var obsolète

// Objets et tableaux
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Fonction d'ordre supérieur
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

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

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

// Opérateur spread pour copier des objets
const newApp = { ...app, version: 16 };

L'opérateur spread ... crée une copie superficielle d'un objet. La déstructuration (const { platform, version } = app) extrait les champs dans des variables. La fonction fléchée dans filterByVersion est plus courte qu'une expression function et ne crée pas son propre this — c'est crucial dans les composants React Native où this fait référence à la classe du composant.

Héritage prototypique

JavaScript utilise l'héritage prototypique, pas classique comme Java ou C#. Les classes (ES6) sont du sucre syntaxique sur les prototypes. Chaque objet a une référence interne [[Prototype]] vers un autre objet. Lors de l'accès à une propriété qui n'existe pas sur l'objet, JS la cherche dans la chaîne de prototypes. La syntaxe de classe (extends, super) rend le code plus lisible, mais sous le capot, ce sont toujours des prototypes.

// Classes en JavaScript — sucre syntaxique
class PlatformService {
  // Champ privé (ES2022)
  #apiKey;

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

  // Méthode statique
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

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

  // Méthode asynchrone
  async initialize() {
    return await this.#validateKey();
  }

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

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

Les champs privés #apiKey (ES2022) offrent un véritable encapsulagement, inaccessible avec les conventions _. La méthode statique getPlatforms appartient à la classe, pas à l'instance. Le getter info est calculé à l'accès. async/await rend le code asynchrone linéaire. React Native Hermes supporte les champs privés depuis la version 0.71.

Asynchronie en JavaScript : Event Loop et Promise

L'asynchronie en JavaScript est basée sur l'event loop — une boucle infinie qui vérifie la pile d'appels (call stack) et les files de tâches. La pile d'appels gère le code synchrone, la microtask queue gère Promise.then/catch/finally, la macrotask queue gère setTimeout, setInterval, E/S. L'event loop prend d'abord les tâches de microtask, puis de macrotask. Bloquer la pile d'appels (boucle infinie) arrête toute l'interface.

Promise est un objet représentant une valeur future. Une promesse peut être pending (en attente), fulfilled (tenue) ou rejected (rejetée). La chaîne .then().catch().finally() gère le résultat asynchrone. async/await (ES8) est du sucre syntaxique : une fonction async retourne une Promise, await suspend l'exécution jusqu'à la résolution de la promesse sans bloquer le thread.

// Chargement asynchrone de données dans 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('Échec de fetch :', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

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

  if (loading) return <ActivityIndicator />;

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

Le hook useEffect avec la fonction async fetchUser effectue une requête HTTP au montage du composant. Le drapeau cancelled empêche setState après le démontage — un problème courant avec React Native. Optional Chaining user?.name et Nullish Coalescing ?? gèrent undefined sans erreurs. ActivityIndicator s'affiche pendant le chargement — un motif asynchrone familier à tout développeur JS.

React Native : JavaScript sur les plateformes mobiles

React Native est un framework de Meta (Facebook) pour créer des applications mobiles natives en JavaScript. Contrairement à l'approche WebView, React Native rend de véritables composants natifs (UIView pour iOS, ViewGroup pour Android). Le code JS s'exécute dans un thread séparé (Hermes ou JSC) et communique avec le thread natif UI via Bridge (ancienne architecture) ou JSI (nouvelle architecture Fabric).

Architecture React Native

React Native se compose du thread JS (votre code), du thread natif (UI) et de Bridge/JSI pour leur interaction. Dans l'ancienne architecture (Bridge), les messages JSON sont sérialisés et transmis de manière asynchrone — cela crée des délais lors des animations rapides. La nouvelle architecture Fabric (React Native 0.68+) utilise JSI (JavaScript Interface) — interaction directe de JS avec des objets C++ sans sérialisation.

// Composant React Native avec API native
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>
  );
}

Le composant LocationTracker illustre le travail avec l'API native de géolocalisation. Platform.OS distingue Android et iOS. PermissionsAndroid.request est la boîte de dialogue native des permissions Android. Geolocation.getCurrentPosition — un module de @react-native-community/geolocation, installé via npm. React Native fournit des interfaces JS pour l'appareil photo, le Bluetooth, l'accéléromètre et d'autres capteurs.

Ionic et Cordova : conteneurs WebView

Ionic est un framework pour applications mobiles hybrides utilisant WebView pour le rendu HTML/CSS/JS. Contrairement à React Native, Ionic ne crée pas de composants natifs — l'application s'exécute dans un conteneur web (WebView) sur iOS (WKWebView) et Android (Android WebView). Cela permet une réutilisation à 100% du code web mais limite les performances des animations complexes.

Apache Cordova est le fondement d'Ionic, fournissant l'accès aux API natives via des plugins JavaScript. Appareil photo, GPS, contacts, système de fichiers — tout est disponible via cordova-plugin-*. Ionic 7+ utilise Capacitor — le successeur de Cordova avec de meilleures performances, le support ESM et l'accès direct au SDK iOS/Android via Swift et Kotlin.

Outils du développeur JavaScript

Les outils du développeur JS pour applications mobiles incluent Node.js, npm/yarn, Expo, React Native CLI et Metro bundler. Node.js est un environnement d'exécution JS hors navigateur, la base de l'écosystème. npm (Node Package Manager) est un gestionnaire de paquets avec plus de 2 millions de bibliothèques. npx est un utilitaire pour exécuter des paquets npm sans installation.

Écosystème d'outils

Expo est une couche au-dessus de React Native qui simplifie le développement : ne nécessite pas Xcode/Android Studio pour démarrer, fournit Managed Workflow avec des bibliothèques préinstallées. Expo Application Services (EAS) — compilation et publication dans le cloud. Metro est le bundler React Native qui assemble le code JS et les dépendances en un seul fichier. Hermes est un moteur JS de Meta optimisé pour les appareils mobiles avec compilation AOT.

// package.json — configuration du projet 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"
  }
}

Le fichier package.json est la base de tout projet JS. Les scripts start, android, ios lancent le bundler Metro et la compilation. Les dépendances sont divisées en dependencies (exécution) et devDependencies (tests, linters). React Navigation est le routeur standard. Jest est un framework de test. ESLint est un analyseur statique qui vérifie le style de code et les erreurs potentielles.