10 nativních webových API místo JS knihoven

Nativní webové API: 10 alternativ k populárním knihovnám JavaScriptu

Fetch nahrazuje Axios, jQuery.ajax a podobné knihovny. Je dostupný od roku 2017 ve všech prohlížečích, podporuje promisy, streamování a všechny HTTP metody.

Příklad s 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');

Nativní verze:

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

Pro zrušení se používá AbortController:

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

Kdy použít knihovny: v velkých projektech s interceptory, logikou opakování a centrální autentizací.

FormData pro serializaci formulářů

FormData automaticky sbírá data formulářů, včetně souborů, bez ručního zpracování. Dostupné od roku 2015.

Místo ručního parsování:

const formData = new FormData(form);

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

Programatické vytvoření:

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

Prohlížeč automaticky nastaví multipart/form-data s boundary.

Omezení: žádná validace ani správa stavu vícekrokových formulářů – tam jsou potřeba React Hook Form nebo Formik.

URL a URLSearchParams pro parsování odkazů

Nativní třídy URL a URLSearchParams nahrazují regex a knihovny jako URL.js. Plná podpora od roku 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());

Vytvoření query stringu:

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

Automatické kódování/dekódování vylučuje chyby při parsování.

Popover API pro vyskakovací prvky

Od ledna 2025 (Chrome 114+, Firefox 125+, Safari 17+) Popover API implementuje tooltips, dropdowny a popovers bez Floating UI nebo Tippy.js.

HTML rozložení:

<button popovertarget="my-popover">Zapnout popover</button>
<div id="my-popover" popover>Obsah popoveru</div>

Programatické řízení:

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

Stylizace:

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

Vnitřní podpora top layer, light dismiss (Esc/klik mimo), fokusový trap a navigace klávesnicí.

popover="auto" – automatické zavření, popover="manual" – explicitní zavření.

Kdy jsou knihovny lepší: vyžaduje se přesné pozicionování s middleware (flip, shift).

Výhody nativních API

Přechod na vestavěné rozhraní nabízí:

• Nulová velikost balíčku – API jsou součástí engine
• Výkon – provádění mimo hlavní thread tam, kde je možné
• Podpora – aktualizace od výrobců prohlížečů
• Kompatibilita – funguje i v Node.js (kde je dostupné)
• Méně zranitelností – žádný externí kód

Co je důležité

• Nativní API pokrývají 80–90 % běžných úkolů, snižují závislosti
• Fetch + AbortController plně nahrazuje základní HTTP klienta
• FormData řeší 95 % scénářů nahrávání formulářů bez knihoven
• URLSearchParams vylučuje chyby regex při parsování
• Popover API standardizuje UI prvky s přístupností

Tyto rozhraní umožňují optimalizovat projekty střední a pokročilé úrovně bez ztráty funkčnosti.

— Editorial Team