5 APIs de JavaScript que Todo Desarrollador Frontend Debería Conocer

Las cinco APIs nativas del navegador que más vale la pena aprender ahora mismo son IntersectionObserver, ResizeObserver, AbortController, la Clipboard API y la View Transitions API: cada una reemplaza una dependencia común con una primitiva de plataforma disponible en todos los navegadores actuales.

La mayoría de nosotros lo aprendemos a las malas: incorporamos una librería entera para un botón de copiar, o perdemos una tarde entera con un campo de búsqueda que sigue pintando resultados desactualizados, solo para descubrir después que el navegador ya tenía la solución. Si ya usas fetch, localStorage y el DOM, pero aún no has explorado los observadores y las APIs utilitarias más recientes, esta es la lista corta que te permitirá eliminar una o dos dependencias. Todo lo que se describe a continuación es una API nativa de la plataforma web, no un servicio REST externo como TMDB o Unsplash, por lo que no necesitas ninguna clave, ningún servidor y no hay coste en tiempo de ejecución más allá del navegador que ya tienes como objetivo. Cada entrada incluye una definición en una sola línea, un fragmento de código mínimo y funcional, un caso de uso real y una nota honesta sobre compatibilidad.

IntersectionObserver: la API web que reemplaza los listeners de scroll

IntersectionObserver informa de forma asíncrona cuándo un elemento objetivo entra o sale del viewport (o de cualquier ancestro), lo que te permite implementar lazy-loading, scroll infinito y analítica de visibilidad sin un solo listener de scroll. Lleva siendo Baseline en todos los navegadores desde marzo de 2019. Los listeners de scroll se disparan decenas de veces por segundo en el hilo principal y te obligan a calcular la geometría manualmente; el observer agrupa ese trabajo fuera de la ruta crítica y te notifica únicamente cuando la visibilidad cambia de verdad.

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src; // cargar solo cuando sea visible
      observer.unobserve(entry.target);
    }
  }
});

document.querySelectorAll('img[data-src]').forEach((img) => observer.observe(img));

Este código implementa lazy-loading de imágenes a medida que las filas se desplazan hacia el viewport. La misma comprobación con isIntersecting sirve para los centinelas de scroll infinito y para la analítica de elementos “vistos”. Las grabaciones de sesión en feeds largos hacen evidente el beneficio: las imágenes fuera de pantalla y los eventos de seguimiento se resuelven solo cuando sus filas entran en el viewport, no todas a la vez durante la carga. Reemplaza a react-intersection-observer y al cálculo manual de scroll en la mayoría de los casos. (Nota: la opción trackVisibility sigue siendo experimental y no es Baseline. Usa únicamente isIntersecting.)

ResizeObserver: reacciones a cambios de tamaño a nivel de elemento

Usa ResizeObserver en lugar del evento resize de window siempre que un componente deba reaccionar a su propio tamaño: informa de los cambios en el content-box y el border-box a nivel de elemento, lo que hace posibles los componentes que responden a su contenedor. Un handler de window.resize te indica que el viewport cambió; no dice nada sobre un panel que se redujo porque se abrió una barra lateral.

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { width } = entry.contentRect;
    entry.target.classList.toggle('is-narrow', width < 400);
  }
});

ro.observe(document.querySelector('.card'));

Aquí la tarjeta cambia a un diseño compacto en función de su propio ancho: una container query implementada en JavaScript. Es Baseline en los navegadores actuales y reemplaza librerías como element-resize-detector. Si ves una advertencia en la consola con el mensaje ResizeObserver loop, en la mayoría de los casos es inofensiva e indica que estás mutando el tamaño dentro del callback.

AbortController: cancela peticiones fetch y corrige race conditions

AbortController es la solución estándar para las race conditions en React: pasa controller.signal a fetch, llama a controller.abort() en la limpieza de tu efecto, y una respuesta obsoleta nunca podrá sobreescribir la UI actualizada tras una navegación rápida. AbortSignal ha estado disponible en todos los navegadores desde abril de 2018.

useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/results?q=${query}`, { signal: controller.signal })
    .then((res) => res.json())
    .then(setResults)
    .catch((err) => {
      if (err.name !== 'AbortError') throw err;
    });
  return () => controller.abort(); // cancelar al desmontar o con una nueva consulta
}, [query]);

El bug clásico que esto elimina es el que una grabación de sesión evidencia con claridad: el usuario escribe rápido, una respuesta lenta anterior llega la última, y los datos obsoletos sobreescriben la vista actual. Abortar la petición en vuelo durante la limpieza hace que eso sea imposible. Para timeouts específicamente, puedes prescindir del controller manual. AbortSignal.timeout() funciona en todos los navegadores desde abril de 2024 y aborta con un TimeoutError, mientras que un abort iniciado por el usuario lanza un AbortError, por lo que un solo bloque catch puede distinguirlos:

fetch(url, { signal: AbortSignal.timeout(5000) });

Esto reemplaza los flags isMounted y axios.CancelToken.

Clipboard API: copiar al portapapeles sin el truco de execCommand

navigator.clipboard.writeText() es el reemplazo moderno basado en promesas del truco document.execCommand('copy'). Solo ten en cuenta que únicamente funciona en un contexto seguro (HTTPS o localhost).

copyBtn.addEventListener('click', async () => {
  await navigator.clipboard.writeText(snippet);
  copyBtn.textContent = '¡Copiado!';
});

Este es el botón de “copiar fragmento de código” que aparece en todos los sitios de documentación. La escritura es Baseline y fiable; la lectura es de mejor esfuerzo. readText() resuelve con una cadena vacía cuando el portapapeles no contiene texto, y Firefox la restringe con más rigor que la escritura, por lo que copiar es la vía fiable y la lectura del portapapeles debe tratarse como mejora progresiva. Reemplaza a clipboard.js.

View Transitions API: anima cambios de estado del DOM de forma nativa

View Transitions anima las transiciones entre estados del DOM con document.startViewTransition(() => updateDOM()), y dado que degrada de forma elegante (sin animación, pero el DOM se actualiza igualmente en navegadores sin soporte), es seguro publicarla hoy mismo tras una comprobación con if (document.startViewTransition). Las transiciones en el mismo documento alcanzaron el estado Baseline Newly available el 14 de octubre de 2025, y funcionan en Chrome 111+, Edge 111+, Firefox 144+ y Safari 18+.

function updatePage(newContent) {
  if (!document.startViewTransition) {
    render(newContent); // fallback: actualización instantánea, sin animación
    return;
  }
  document.startViewTransition(() => render(newContent));
}

Úsala para cambios de pestaña, navegaciones de lista a detalle y cambios de filtro: los crossfades y las morfosis de elementos compartidos para los que, de otro modo, incorporarías Framer Motion. La comprobación de startViewTransition() garantiza que los navegadores sin soporte apliquen el cambio de forma inmediata. Ten en cuenta que las transiciones entre documentos tienen un soporte más limitado: Chrome 126+, Edge 126+ y Safari 18.2+, pero aún no están disponibles en Firefox, así que no confundas ambos casos.

APIs adicionales: structuredClone y la particularidad de fetch

Elige una de estas APIs en tu próximo ticket y elimina la dependencia que reemplaza: cambia un listener de scroll por IntersectionObserver, o envuelve un fetch de búsqueda en un AbortController. Una mención honorífica que conviene tener a mano: structuredClone() realiza copias profundas de objetos sin el rodeo de JSON.parse(JSON.stringify(...)) y preserva Dates, Maps, Sets y typed arrays, aunque lanza DataCloneError con funciones y nodos del DOM, por lo que es para datos, no para objetos en uso (Baseline desde marzo de 2022). Y si fetch sigue siendo tu punto de partida, recuerda que su promesa no rechaza en HTTP 404 o 500, solo ante fallos de red, así que comprueba response.ok por tu cuenta.

Preguntas Frecuentes

¿Cuál es la diferencia entre IntersectionObserver y ResizeObserver?

IntersectionObserver informa cuándo un elemento entra o sale del viewport o de un ancestro, por lo que impulsa el lazy-loading, el scroll infinito y la analítica de visibilidad. ResizeObserver informa de los cambios en las dimensiones del content-box o border-box propios de un elemento, por lo que impulsa los layouts que responden al contenedor. IntersectionObserver responde a '¿es esto visible?', ResizeObserver responde a '¿qué tamaño tiene este elemento?'. Son preguntas distintas, y ninguna reemplaza el rol a nivel de viewport del evento resize de window.

¿Debo usar AbortSignal.timeout() o un AbortController manual para cancelar peticiones fetch?

Usa AbortSignal.timeout() cuando solo necesites un timeout fijo, ya que aborta automáticamente tras los milisegundos indicados con un TimeoutError y no requiere ninguna variable controller. Usa un AbortController manual cuando la cancelación la desencadena un evento que tú controlas, como la limpieza de un efecto de React al desmontar o al navegar, donde llamas a controller.abort() tú mismo. Los dos lanzan errores distintos, TimeoutError frente a AbortError, por lo que un único bloque catch puede distinguirlos.

¿Por qué falla navigator.clipboard.writeText() en mi sitio de desarrollo local?

navigator.clipboard.writeText() solo funciona en un contexto seguro, es decir, HTTPS o localhost. Si accedes a un servidor de desarrollo mediante una dirección HTTP simple, como una IP local o un hostname que no sea localhost, el navegador bloquea las escrituras en el portapapeles y la promesa rechaza. Usa localhost o sirve el contenido mediante HTTPS. La lectura con readText() está restringida de forma aún más estricta, especialmente en Firefox, así que trata la escritura como la vía fiable y la lectura del portapapeles como mejora progresiva.

¿Es seguro usar la View Transitions API si algunos navegadores no la soportan?

Sí, porque degrada de forma elegante. Protege la llamada con if (document.startViewTransition) antes de invocarla; en los navegadores que no tienen soporte, la actualización del DOM se ejecuta igualmente, solo que se aplica de forma inmediata sin animación. Las transiciones en el mismo documento alcanzaron el estado Baseline Newly available el 14 de octubre de 2025, en Chrome 111+, Edge 111+, Firefox 144+ y Safari 18+. Las transiciones entre documentos tienen un soporte más limitado: Chrome 126+, Edge 126+ y Safari 18.2+, y aún no están disponibles en Firefox.