JavaScript partout : écrire du code pour toutes les plateformes à la fois

Pourquoi JavaScript est le nouveau « write once, run anywhere » ?

Vous vous souvenez du vieux rêve des développeurs : écrire le code une fois et le voir fonctionner partout ? Java l’a promis avec sa machine virtuelle, mais en pratique, cela se heurtait à des complications. Et maintenant, regardez JavaScript. Le langage autrefois considéré comme « jouet » pour l’animation de boutons a aujourd’hui conquis le monde. Et devinez quoi ? Il tient vraiment cette promesse.

Le développement multiplateforme en JavaScript n’est pas qu’une simple tendance. C’est un moyen de réduire le temps de mise sur le marché, d’économiser le budget et de garder les mêmes spécialistes dans l’équipe. Dans cet article, nous allons voir comment un seul langage permet de créer des applications pour le navigateur, les appareils mobiles, le desktop et le serveur. Et oui, il y aura des exemples de code concrets.

Architecture d’une application multiplateforme moderne

Avant de se lancer dans le code, comprenons comment est structuré l’écosystème moderne. L’idée clé est de diviser la logique de l’application en trois couches :

• Logique métier — traitement des données, validation, travail avec l’API. C’est le noyau qui ne doit pas dépendre de la plateforme.
• Couche UI — l’interface. Elle peut être différente pour le web, les mobiles et le desktop, mais utilise souvent des composants communs.
• Couche de stockage — bases de données locales, cache, travail avec le système de fichiers.

C’est précisément JavaScript qui permet d’écrire ces trois couches dans un seul langage. Examinons les principaux outils.

Partie serveur : Node.js comme fondation

Tout système multiplateforme commence par le backend. Node.js est un environnement d’exécution JavaScript en dehors du navigateur, construit sur le moteur V8. Il est parfait pour créer des API REST, gérer des connexions WebSocket et travailler avec des bases de données.

Voici un exemple simple de serveur avec Express, qui servira à la fois l’application web et mobile :

const express = require('express');const app = express();const port = 3000;

// Middleware pour traiter le JSONapp.use(express.json());

// Exemple d’endpoint pour obtenir la liste des utilisateursapp.get('/api/users', (req, res) => {  const users = [    { id: 1, name: 'Anna', email: 'anna@example.com' },    { id: 2, name: 'Ivan', email: 'ivan@example.com' }  ];  res.json(users);});

// Requête POST pour créer un nouvel utilisateurapp.post('/api/users', (req, res) => {  const newUser = req.body;  // Ici, on sauvegarde généralement dans la base de données  console.log('Nouvel utilisateur :', newUser);  res.status(201).json({ message: 'Utilisateur créé', user: newUser });});

app.listen(port, () => {  console.log(`Serveur démarré sur http://localhost:${port}`);});

Ce code fonctionnera de la même manière sur Windows, macOS et Linux. De plus, vous pouvez l’exécuter sur un Raspberry Pi ou dans un conteneur cloud — aucune modification n’est nécessaire.

Interface web : React comme bloc de construction universel

Quand il s’agit de développement multiplateforme en JavaScript, React est le premier candidat. Son architecture basée sur les composants permet de réutiliser jusqu’à 70 % du code entre le web et les applications mobiles.

Créons un composant simple pour afficher la liste des utilisateurs :

import React, { useState, useEffect } from 'react';

function UserList() {  const [users, setUsers] = useState([]);  const [loading, setLoading] = useState(true);

  useEffect(() => {    fetch('/api/users')      .then(response => response.json())      .then(data => {        setUsers(data);        setLoading(false);      })      .catch(error => console.error('Erreur :', error));  }, []);

  if (loading) {    return <div>Chargement...</div>;  }

  return (    <div>      <h2>Liste des utilisateurs</h2>      <ul>        {users.map(user => (          <li key={user.id}>            {user.name} — {user.email}          </li>