Zelfs backend engineers moeten deze dingen weten - Top 5 frontend JS-methoden en modules

Zelfs backend engineers moeten uiteindelijk de “resultaten” in de browser draaien.
Het is niet nodig om gespecialiseerd te zijn in frontend, maar als je de minimale JavaScript-syntaxis en methoden kent:

• is het veel gemakkelijker om de oorzaak van bugs te identificeren

• kun je beter communiceren met frontend collega's

• kun je wat eenvoudige schermen zelf aanpassen.

In dit artikel worden de Top 5 Frontend JavaScript-methoden die ook nuttig zijn voor backend engineers samengevat.

1. fetch – HTTP-aanroepen in de browser

Waarom is het belangrijk?

Wat backend engineers het meest kennen, zijn HTTP API's.
In de frontend worden deze API's vaak aangeroepen met fetch.
Als je begrijpt hoe verzoeken worden verzonden en hoe antwoorden/fouten worden afgehandeld, wordt debuggen een stuk eenvoudiger.

Basisgebruik

// Voorbeeld van een GET-verzoek
fetch('https://api.example.com/users/1')
  .then((res) => {
    if (!res.ok) throw new Error('HTTP-fout ' + res.status);
    return res.json(); // JSON parsing
  })
  .then((data) => {
    console.log('gebruiker:', data);
  })
  .catch((err) => {
    console.error('fetch-fout:', err);
  });

Voorbeeld van 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('HTTP-fout ' + res.status);
    }

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

Punten

• Door res.ok, res.status, enz. te bekijken, kun je serverfouten onderscheiden

• JSON.stringify, res.json() gebruikspatronen kun je het beste als een soort sjabloon onthouden

• Als er een CORS-fout optreedt, is het goed om de gewoonte te hebben om in de browserconsole te kijken hoe de fetch-verzoeken worden verzonden

2. Promise en async/await – Basis van asynchrone logica

Waarom is het belangrijk?

Frontend is voor het grootste deel asynchroon.

• UI-gebeurtenissen

• HTTP-verzoeken

• Timers, WebSocket's, enz.

De kernconcepten om hiermee om te gaan zijn Promise en async/await.
Als je asynchrone I/O in de backend hebt gebruikt, is het concept vergelijkbaar.

Basis van Promise

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

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

Gemakkelijker te lezen met 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);

Parallel aanroepen (een patroon dat vaak in de backend wordt gebruikt)

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);
}

Punten

• API's op basis van Promise kunnen gemakkelijk worden gelezen met .then().catch() of met async/await, kies een stijl die goed leest

• Als je meerdere verzoeken tegelijk wilt verzenden, vergeet dan niet het Promise.all patroon

3. Array-methoden trio: map, filter, reduce

Waarom is het belangrijk?

Ook in de frontend werk je met gegevens.

• JSON-lijsten ontvangen van de server en deze omzetten naar een vorm voor het scherm

• Alleen de gegevens die aan bepaalde voorwaarden voldoen filteren

• Sommen/statistieken berekenen

Hiervoor worden array-methoden veel gebruikt. Dit concept is precies hetzelfde als verzameling verwerking in de backend.

map – Elk element van de array “transformeren”

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

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

filter – Alleen de elementen die aan de voorwaarden voldoen behouden

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

reduce – De array samenvoegen in één waarde

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

Voorbeeld van chaining

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

Punten

• Als je ‘frontend-code vol for-lussen’ ziet, begin je automatisch te erkennen waar je kunt refactoren met map/filter/reduce

• Als je een verbinding legt tussen backend (Java, Kotlin, Python, Go, enz.)-verzamelingbibliotheken, wordt het begrip sneller

4. Kern van DOM-manipulatie: querySelector, addEventListener, classList

Waarom is het belangrijk?

Zelfs als je frameworks (React, Vue, enz.) gebruikt, moet je tijdens het debuggen uiteindelijk de DOM direct bekijken.
Simpel admin pagina's of interne tools worden soms ook zonder framework met vanilla JS gebouwd.

Elementselectie – querySelector

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

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

Je gebruikt de syntaxis van CSS-selectoren.

• #id

• .class

• button.primary

• div > span enz.

Evenementhandler – addEventListener

saveBtn.addEventListener('click', () => {
  console.log('Opslaan knop geklikt!');
});

Stijl/status toggle – classList

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

saveBtn.classList.add('loading');     // Klasse toevoegen
saveBtn.classList.remove('primary');  // Klasse verwijderen
saveBtn.classList.toggle('hidden');   // Als het er is, verwijderen, als het niet er is, toevoegen

Zelfs met alleen deze combinatie:

• “Waarom kan de knop niet worden ingedrukt?” → je kunt bekijken of het daadwerkelijke DOM-element correct is vastgelegd en of het evenement correct is ingesteld

• “Waarom is deze div niet zichtbaar?” → je kunt nagaan welke statusklassen zijn toegepast door naar de classList te kijken

Punten

• Als je de interne werking van een framework begrijpt, is het veel minder ontmoedigend als je basiskennis van de DOM API hebt

• Het is belangrijk om de gewoonte te hebben om document.querySelector(...) rechtstreeks in de browserconsole te typen

5. ES Modules – basis van import / export

Waarom is het belangrijk?

Frontend JavaScript gebruikt nu standaard ES Module (ESM).

• Code wordt opgesplitst in bestandsniveau

• Alleen benodigde delen worden import en gebruikt

• Zelfs zonder webpack/babel/bundlers begrijpt de browser ESM direct

Aangezien ook aan de backend (Node.js) steeds meer ESM wordt gebruikt, is het goed om dit op te schrijven voor beide kanten.

Modules exporteren – export

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

export const PI = 3.14;

// Standaard (default) export – waarde/functie die de module vertegenwoordigt
export default function mul(a, b) {
  return a * b;
}

Modules importeren – 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 } : genaamde export (named export) importeren

• mul : standaard export (default export) importeren

Voorbeeld van module-script in de browser

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

Door dit zo te declareren, kun je import / export syntaxis gebruiken in main.js.

Punten

• Het concept “modularisatie” is hetzelfde voor frontend en backend

• Als je de regel voor het import pad kent (./, ../, absolute paden, alias van bundlers, enz.), begrijp je sneller de frontend build-instellingen

Conclusie – Minimum vereisten voor een “backend engineer die ook frontend kan”

Samenvattend, de dingen die een backend engineer moet weten om frontend JS te begrijpen, zijn:

1. fetch – HTTP-aanroepen vanuit de browser en het verwerken van JSON

2. Promise / async/await – Structuur van asynchrone logica begrijpen

3. Array-methoden (map, filter, reduce) – Gegevens omzetten/filteren/samenvatten

4. Basis van DOM (querySelector, addEventListener, classList) – Elementen op het scherm selecteren, evenementen en status toggelen

5. ES Modules (import / export) – Basisstructuur van modulaire code begrijpen

Als je deze vijf goed kent:

• kun je deelnemen aan frontend code reviews

• kun je eenvoudige interfaces zelf implementeren/wijzigen

• de API-integratieproblemen aan zowel de frontend- als backendzijde volgen.

Daarna, naargelang de behoefte, zou je kunnen uitbreiden naar frameworks zoals React/Vue en build/bundling (Webpack, Vite, SWC, enz.).