Même un ingénieur backend, finalement, le “produit” s'exécute dans le navigateur.
Il n'est pas nécessaire de se spécialiser dans le frontend, mais connaître la syntaxe et les méthodes JavaScript minimales peut :

  • Rendre le débogage beaucoup plus facile

  • Faciliter la communication avec les collègues du frontend

  • Permettre de toucher aux écrans simples par soi-même.

Dans cet article, nous allons présenter les 5 meilleures méthodes JavaScript pour le frontend qui peuvent vraiment aider un ingénieur backend.

1. fetch – Faire des appels HTTP dans le navigateur

Commandbox 광고

Pourquoi est-ce important ?

Ce qu'un ingénieur backend connaît le mieux, ce sont les API HTTP.
Dans le frontend, cet API est souvent appelé avec fetch.
Comprendre comment les requêtes sont envoyées et comment gérer les réponses/erreurs rend le débogage beaucoup plus facile.

Utilisation de base

// Exemple de requête GET
fetch('https://api.example.com/users/1')
  .then((res) => {
    if (!res.ok) throw new Error('Erreur HTTP ' + res.status);
    return res.json(); // Analyse JSON
  })
  .then((data) => {
    console.log('utilisateur:', data);
  })
  .catch((err) => {
    console.error('Erreur fetch:', err);
  });

Exemple POST + JSON

async function createUser() {
  try {
    const res = await fetch('https://api.example.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: 'Alice', age: 30 }),
    });

    if (!res.ok) {
      throw new Error('Erreur HTTP ' + res.status);
    }

    const data = await res.json();
    console.log('créé:', data);
  } catch (e) {
    console.error(e);
  }
}

Points à retenir

  • Vous pouvez distinguer les erreurs serveur en observant res.ok, res.status, etc.

  • Il est bon d'apprendre par cœur les motifs d'utilisation de JSON.stringify, res.json() comme des templates.

  • Si vous rencontrez une erreur CORS, habituez-vous à vérifier dans la console du navigateur comment la requête fetch est envoyée.

2. Promise et async/await – Les bases de la logique asynchrone

Pourquoi est-ce important ?

Le frontend est principalement asynchrone.

  • Événements UI

  • Requêtes HTTP

  • Timers, WebSocket, etc.

Les concepts clés pour gérer cela sont Promise et async/await.
Si vous avez déjà utilisé l'I/O asynchrone en backend, le concept est similaire.

Base des Promises

function getUser(id) {
  return fetch(`/api/users/${id}`).then((res) => res.json());
}

getUser(1)
  .then((user) => {
    console.log(user);
  })
  .catch((err) => {
    console.error(err);
  });

Plus lisible avec async/await

async function showUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error('HTTP ' + res.status);

    const user = await res.json();
    console.log(user);
  } catch (e) {
    console.error(e);
  }
}

showUser(1);

Appels en parallèle (un motif souvent utilisé en backend)

async function loadDashboard() {
  const [userRes, statsRes] = await Promise.all([
    fetch('/api/me'),
    fetch('/api/stats'),
  ]);

  const [user, stats] = await Promise.all([
    userRes.json(),
    statsRes.json(),
  ]);

  console.log(user, stats);
}

Points à retenir

  • Les APIs basées sur Promise peuvent être choisies pour leur lisibilité avec .then().catch() ou async/await.

  • Lorsque vous envoyez plusieurs requêtes en même temps, il est bon de connaître le motif Promise.all.

3. Les trois méthodes de tableau : map, filter, reduce

Commandbox 광고

Pourquoi est-ce important ?

Le frontend manipule également des données.

  • Convertir les listes JSON reçues du serveur en formats de données pour l'affichage

  • Filtrer uniquement les données répondant à certaines conditions

  • Calculer des totaux/statistiques

Lors de cela, on utilise beaucoup les méthodes de tableau. C'est le même concept que le traitement des collections que l'on trouve couramment en backend.

map – “Transformer” chaque élément d'un tableau

const users = [
  { id: 1, name: 'Alice', age: 31 },
  { id: 2, name: 'Bob', age: 27 },
];

const names = users.map((u) => u.name);
// ['Alice', 'Bob']

filter – Garder seulement ceux qui correspondent aux conditions

const adults = users.filter((u) => u.age >= 30);
// [{ id: 1, name: 'Alice', age: 31 }]

reduce – Rassembler un tableau en une seule valeur

const totalAge = users.reduce((sum, u) => sum + u.age, 0);
// 58

Exemple de chaînage

const avgAgeOfAdults = users
  .filter((u) => u.age >= 30)
  .reduce((acc, u, _, arr) => acc + u.age / arr.length, 0);

Points à retenir

  • En voyant du code frontend avec exclusivement des “boucles for”, vous commencerez à repérer des opportunités de refactoring avec map/filter/reduce.

  • Si vous établissez une correspondance avec les bibliothèques de collections backend (Java, Kotlin, Python, Go, etc.), la compréhension sera plus rapide.

4. Manipulation du DOM : querySelector, addEventListener, classList

Pourquoi est-ce important ?

Même si vous utilisez des frameworks (React, Vue, etc.), durant la phase de débogage, vous devez finalement voir le DOM directement.
Pour des pages admin simples ou des outils internes, il arrive que l'on développe avec du JS vanilla sans framework.

Sélection d'éléments – querySelector

<button id="save-btn">Sauvegarder</button>

const saveBtn = document.querySelector('#save-btn');

Vous utilisez la syntaxe des sélecteurs CSS directement.

  • #id

  • .class

  • button.primary

  • div > span, etc.

Gestionnaires d'événements – addEventListener

saveBtn.addEventListener('click', () => {
  console.log('Bouton de sauvegarde cliqué !');
});

Basculer des styles/états – classList

<button id="save-btn" class="primary">Sauvegarder</button>

saveBtn.classList.add('loading');     // Ajouter une classe
saveBtn.classList.remove('primary');  // Enlever une classe
saveBtn.classList.toggle('hidden');   // Enlever si présent, ajouter si absent

Rien qu'avec cette combinaison :

  • “Pourquoi le bouton ne fonctionne-t-il pas ?” → Vous pouvez vérifier si l'élément DOM est bien ciblé et si l'événement est bien attaché.

  • “Pourquoi ce div n'est-il pas visible ?” → En consultant classList, vous pouvez suivre quelles classes d'état sont appliquées.

Points à retenir

  • Avoir des bases des APIs DOM aide beaucoup moins à être perdu lors de la compréhension du fonctionnement interne des frameworks.

  • Il est important d'aimer l'habitude de taper directement document.querySelector(...) dans la console du navigateur.

5. Modules ES – Bases de import / export

Pourquoi est-ce important ?

Le JavaScript frontend utilise maintenant par défaut le module ES (ESM).

  • Le code est séparé par fichiers

  • On import seulement ce qui est nécessaire

  • Même sans utiliser Webpack/Babel/bundler, le navigateur comprend directement ESM

Comme l'utilisation de l'ESM augmente aussi en backend (Node.js), le rassembler peut aider des deux côtés.

Exporter un module – export

// mathUtils.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.14;

// Export par défaut – valeur/fonction représentant le module
export default function mul(a, b) {
  return a * b;
}

Importer un module – import

// main.js
import mul, { add, PI } from './mathUtils.js';

console.log(add(1, 2)); // 3
console.log(mul(3, 4)); // 12
console.log(PI);        // 3.14

  • { add, PI } : Importation de l'export nommé

  • mul : Importation de l'export par défaut

Exemple d'utilisation du script de module dans le navigateur

<script type="module" src="/static/js/main.js"></script>

En déclarant ainsi, vous pouvez utiliser la syntaxe import / export dans main.js.

Points à retenir

  • Le concept de “modularisation” est le même pour le frontend et le backend

  • Comprendre les règles du chemin d'importation (./, ../, chemin absolu, alias bundle, etc.) rendra la lecture de la configuration de build frontend moins déroutante.

Ingénieur backend écrivant du code js

Conclusion – Les fondamentaux pour un backend qui sait faire du frontend

En résumé, ce qu'un ingénieur backend devrait au moins savoir pour comprendre le JavaScript frontend est :

  1. fetch – Appels HTTP dans le navigateur et traitement JSON

  2. Promise / async/await – Compréhension de la structure de la logique asynchrone

  3. Méthodes de tableau (map, filter, reduce) – Transformation/filtrage/agrégation des données

  4. Principes de DOM (querySelector, addEventListener, classList) – Sélection d'éléments d'affichage, événements, basculement d'état

  5. Modules ES (import / export) – Compréhension de la structure du code par module

Rien que ces cinq points vous permettront de :

  • Participer aux revues de code frontend

  • Implémenter/modifier directement des écrans simples

  • Suivre simultanément les problèmes d'intégration d'API des deux côtés : frontend et backend.

Ensuite, selon les besoins, il serait bon d'élargir le champ avec des frameworks comme React/Vue, ou build/bundling (Webpack, Vite, SWC, etc.).