10 native Web-APIs statt JS-Bibliotheken

Native Web APIs: 10 Alternativen zu beliebten JS-Bibliotheken

Fetch ersetzt Axios, jQuery.ajax und ähnliche Bibliotheken. Seit 2017 in allen modernen Browsern verfügbar, unterstützt es Promises, Streaming und alle HTTP-Methoden.

Beispiel mit Axios:

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
});

const { data: users } = await api.get('/users');

Native Alternative:

const BASE_URL = 'https://api.example.com';

const res = await fetch(`${BASE_URL}/users`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const users = await res.json();

const res2 = await fetch(`${BASE_URL}/users`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Marvel', role: 'developer' })
});
const newUser = await res2.json();

Zum Abbrechen verwenden Sie AbortController:

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal });
controller.abort();

Wann Bibliotheken sinnvoll sind: In großen Projekten mit Interzeptoren, Wiederholungslogik oder zentraler Authentifizierung.

FormData für die Serialisierung von Formularen

FormData übernimmt die Sammlung von Formulardaten – inklusive Dateien – ohne manuelle Parsing. Verfügbar seit 2015.

Statt manueller Handhabung:

const formData = new FormData(form);

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  await fetch('/api/upload', {
    method: 'POST',
    body: formData
  });
});

Programmatische Erstellung:

const formData = new FormData();
formData.append('name', 'Marvel');
formData.append('avatar', fileInput.files[0]);

Der Browser setzt automatisch multipart/form-data mit einem Grenzzeichen.

Einschränkungen: Keine integrierte Validierung oder Zustandsverwaltung bei mehrstufigen Formularen – hier sind React Hook Form oder Formik sinnvoll.

URL und URLSearchParams für die Link-Auswertung

Die nativen Klassen URL und URLSearchParams ersetzen Regex und Bibliotheken wie URL.js. Vollständige Unterstützung seit 2018.

const url = new URL('https://example.com/search?q=web+apis&page=2&sort=recent#results');

url.hostname; // 'example.com'
url.searchParams.get('q'); // 'web apis'

url.searchParams.set('page', '3');
url.searchParams.append('filter', 'new');
console.log(url.toString());

Erzeugung von Abfragezeichenketten:

const params = new URLSearchParams({ q: 'hello world', page: '1' });
params.toString(); // 'q=hello+world&page=1'

Automatische Kodierung/Entkodierung vermeidet Parsing-Fehler.

Popover-API für schwebende Elemente

Ab Januar 2025 (Chrome 114+, Firefox 125+, Safari 17+) ermöglicht die Popover-API Tooltips, Dropdowns und Popovers ohne Floating UI oder Tippy.js.

HTML-Markup:

<button popovertarget="my-popover">Popover öffnen</button>
<div id="my-popover" popover>Inhalt des Popovers</div>

Programmatische Steuerung:

const popover = document.querySelector('#my-popover');
popover.showPopover();
popover.hidePopover();

Styling:

#my-popover:popover-open {
  animation: fadeIn 0.2s ease-out;
}
#my-popover::backdrop {
  background: rgba(0, 0, 0, 0.15);
}

Integrierte Unterstützung für oberste Ebene, leichte Schließung (Esc / Klick außerhalb), Fokusfalle und Tastaturnavigation.

popover="auto" – automatisches Schließen, popover="manual" – explizites Schließen.

Wann Bibliotheken besser sind: Wenn präzise Positionierung mit Middleware (flip, shift) erforderlich ist.

Vorteile nativer APIs

Der Wechsel zu eingebauten Schnittstellen bringt folgende Vorteile:

• Keine Bundle-Größe – APIs sind Teil der Browser-Engine
• Leistung – Ausführung wo möglich außerhalb des Hauptthreads
• Wartung – Updates durch Browser-Hersteller
• Kompatibilität – Funktioniert in Node.js (sofern verfügbar)
• Weniger Sicherheitslücken – Kein Drittanbieter-Code

Was zählt

• Native APIs decken 80–90 % der gängigen Aufgaben ab und reduzieren Abhängigkeiten
• Fetch + AbortController ersetzen grundlegende HTTP-Clients vollständig
• FormData bewältigt 95 % aller Formular-Upload-Szenarien ohne Bibliotheken
• URLSearchParams beseitigt Fehler durch Regex-basiertes Parsen
• Popover-API standardisiert zugängliche Benutzeroberflächen-Komponenten

Diese Schnittstellen ermöglichen die Optimierung von mittel- bis senior-level-Projekten ohne Funktionalitätseinbußen.

— Editorial Team