Backend-Entwickler müssen letztendlich verstehen, dass das „Ergebnis“ im Browser läuft.
Es ist nicht notwendig, sich professionell mit dem Frontend auseinanderzusetzen, aber wenn man mindestens die grundlegende JavaScript-Syntax und Methoden kennt, wird:

  • das Auffinden von Fehlerursachen viel einfacher

  • die Kommunikation mit Frontend-Kollegen besser

  • man kann einfache Bildschirme selbst anpassen.

In diesem Artikel werden die 5 besten Frontend-JavaScript-Methoden, die auch Backend-Entwickler kennen sollten, zusammengestellt.

1. fetch – HTTP-Anfragen im Browser

Commandbox 광고

Warum ist das wichtig?

Das vertrauteste Konzept für Backend-Entwickler sind HTTP-APIs.
Im Frontend werden diese APIs häufig mit fetch aufgerufen.
Bereits das Verständnis, wie Anfragen gesendet werden und wie man Antworten/Fehler behandelt, erleichtert das Debugging erheblich.

Grundlegende Verwendung

// Beispiel für GET-Anfrage
fetch('https://api.example.com/users/1')
  .then((res) => {
    if (!res.ok) throw new Error('HTTP-Fehler ' + res.status);
    return res.json(); // JSON parsen
  })
  .then((data) => {
    console.log('Benutzer:', data);
  })
  .catch((err) => {
    console.error('fetch-Fehler:', err);
  });

POST + JSON Beispiel

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-Fehler ' + res.status);
    }

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

Punkte

  • Durch das Überprüfen von res.ok, res.status kann man Serverfehler unterscheiden

  • Das Muster JSON.stringify, res.json() kann man wie ein Template lernen

  • Wenn ein CORS-Fehler auftritt, ist es hilfreich, sich anzugewöhnen, zu überprüfen, wie die fetch-Anfrage im Browser-Konsolenprotokoll aussieht.

2. Promise und async/await – Grundlagen asynchroner Logik

Warum ist das wichtig?

Das Frontend arbeitet größtenteils asynchron.

  • UI-Events

  • HTTP-Anfragen

  • Timer, WebSocket usw.

Die Schlüsselkonzepte zur Bearbeitung dieser Aspekte sind Promise und async/await.
Wenn man asynchrone I/O im Backend schon verwendet hat, sind die Konzepte ähnlich.

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

Mit async/await lesbarer

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

Parallele Aufrufe (ein häufig verwendetes Muster im 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);
}

Punkte

  • API basierend auf Promise lässt sich entweder mit .then().catch() oder async/await gut lesen

  • Wenn mehrere Anfragen gleichzeitig gesendet werden, sollte man das Muster Promise.all kennen

3. Die drei Array-Methoden: map, filter, reduce

Commandbox 광고

Warum ist das wichtig?

Im Frontend behandelt man ebenfalls Daten.

  • JSON-Listen, die vom Server empfangen wurden, in ein Format für die Anzeige umwandeln

  • Nur Daten mit bestimmten Kriterien filtern

  • Summen/statistische Werte berechnen

Hierbei nutzt man häufig Array-Methoden. Das Konzept ist dasselbe wie bei der Sammlung im Backend.

map – Elemente des Arrays „transformieren“

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

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

filter – Nur übereinstimmende Elemente behalten

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

reduce – Alle Werte in einem Ergebnis zusammenfassen

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

Beispiel für Chaining

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

Punkte

  • Wenn man Frontend-Code sieht, der nur aus „for“-Schleifen besteht, erkennt man bald potenzielle Refactoring-Punkte mit map/filter/reduce

  • Wenn man die Sammlungslibraries im Backend (Java, Kotlin, Python, Go usw.) kennt, kann man sich schneller zurechtfinden

4. Wichtige DOM-Methoden: querySelector, addEventListener, classList

Warum ist das wichtig?

Selbst wenn man Frameworks (React, Vue usw.) verwendet, muss man während der Debugging-Phase letztendlich direkt auf den DOM zugreifen.
Einfache Adminseiten oder interne Tools werden manchmal sogar nur mit Vanilla JS entwickelt.

Elementauswahl – querySelector

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

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

Es wird die CSS-Selektorsyntax verwendet.

  • #id

  • .class

  • button.primary

  • div > span usw.

Ereignis-Handler – addEventListener

saveBtn.addEventListener('click', () => {
  console.log('Speichern-Button geklickt!');
});

Stil-/Zustandswechsel – classList

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

saveBtn.classList.add('loading');     // Klasse hinzufügen
saveBtn.classList.remove('primary');  // Klasse entfernen
saveBtn.classList.toggle('hidden');   // Wenn vorhanden entfernen, wenn nicht hinzufügen

Wenn man nur diese Kombination kennt:

  • „Warum kann der Button nicht gedrückt werden?“ → Überprüfen, ob das DOM-Element korrekt erfasst wird und ob ein Ereignis registriert ist

  • „Warum ist dieses div nicht sichtbar?“ → Mit classList herausfinden, welche Statusklassen angewendet werden

Punkte

  • Das Verständnis der DOM-API gibt einem mehr Sicherheit beim Verständnis der internen Abläufe in Frameworks

  • Es ist wichtig, sich an die Gewohnheit zu gewöhnen, document.querySelector(...) direkt in der Browser-Konsole auszuprobieren

5. ES-Module – Grundlagen von import / export

Warum ist das wichtig?

Frontend-JavaScript verwendet jetzt standardmäßig ES Module (ESM).

  • Der Code wird in Dateieinheiten aufgeteilt

  • Es wird nur das importiert, was benötigt wird

  • Selbst ohne Webpack/Babel/Bundler kann der Browser ESM direkt verstehen

Da auch im Backend (Node.js) immer mehr ESM verwendet werden, sind auch hier die Kenntnisse von Vorteil.

Module exportieren – export

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

export const PI = 3.14;

// Standardexport – der Wert/funktion, der das Modul repräsentiert
export default function mul(a, b) {
  return a * b;
}

Module importieren – 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 } : benannte Exporte importieren

  • mul : Standardexport importieren

Beispiel für die Verwendung von Modulen im Browser-Skript

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

Wenn man dies deklariert, kann man die import / export-Syntax innerhalb von main.js verwenden.

Punkte

  • Das Konzept der „Modularität“ ist sowohl im Frontend als auch im Backend dasselbe

  • Wenn man die Importpfadregeln (./, ../, absolute Pfade, Aliase pro Bundler usw.) kennt, kann man die Frontend-Build-Konfiguration einfacher lesen

Backend-Entwickler, der JS-Code schreibt

Abschluss – Das Minimum für „Backend-Entwickler, die auch Frontend können“

Zusammenfassend sollten Backend-Entwickler, die Frontend-JS verstehen wollen, mindestens Folgendes wissen:

  1. fetch – HTTP-Aufrufe im Browser und JSON-Verarbeitung

  2. Promise / async/await – Verständnis der Struktur asynchroner Logik

  3. Array-Methoden (map, filter, reduce) – Datenumwandlung/Filtern/Aggregation

  4. DOM-Grundlagen (querySelector, addEventListener, classList) – Auswahl von Bildschirmelementen, Ereignisse, Statuswechsel

  5. ES-Module (import / export) – Verständnis der modulare Code-Struktur

Sobald man mit diesen fünf vertraut ist:

  • Kann man an Frontend-Code-Reviews teilnehmen

  • Einfachere Bildschirme selbst umsetzen/anpassen

  • API-Integrationsprobleme gleichzeitig sowohl im Frontend als auch im Backend verfolgen.

Darüber hinaus kann man je nach Bedarf den Fokus auf Frameworks wie React/Vue oder Build/Bundling (Webpack, Vite, SWC usw.) erweitern.