25 de las mejores API de JavaScript

Aquí está nuestra selección de las mejores API de JavaScript que existen en este momento, además de una guía para comenzar a usarlas. Estos le ayudarán a agregar nuevas e interesantes funciones a sus sitios y aplicaciones. Una advertencia: muchas de estas API todavía están en desarrollo, así que asegúrese de verificar la compatibilidad del navegador antes de comenzar a usarlas y proporcione alternativas cuando sea necesario.

Para explorar más complementos increíbles, eche un vistazo a nuestras guías sobre los mejores API HTML y API de Google . O para construir un sitio desde cero (sin código) use un Creador de sitios web . Además, es vital considerar su elección de alojamiento web service, para asegurarse de que su sitio funcione como usted desea.

01. Modificar la configuración del navegador

Si bien el navegador suele estar 'por encima' de cualquier código que se ejecute en él, una API derivada de Mozilla permite un acceso limitado de JavaScript a la configuración del navegador. Piense en aspectos como leer la página de inicio del usuario, cómo se manejan los marcadores y dónde aparecen las nuevas pestañas.

02. API de archivos

El manejo de grandes cantidades de datos persistentes siempre fue un problema para las aplicaciones web. La API de archivos W3C combina algunos de los conceptos utilizados por varios proveedores; tenga en cuenta que generalmente no se otorga acceso completo al sistema de archivos, principalmente por razones de seguridad.

03. Servicios cognitivos de Microsoft

API de JavaScript: servicios cognitivos de Microsoft

(Crédito de la imagen: Microsoft)

La inteligencia artificial requiere cantidades extremas de datos de entrenamiento; lógicamente, los proveedores no están motivados para proporcionar estos modelos a sus clientes. En cambio, los desarrolladores pueden enviar cargas útiles a un servidor, que luego se analiza en línea.

Si bien todos los grandes proveedores de la nube ofrecen servicios de inteligencia artificial más o menos sofisticados, Microsoft destaca por su enfoque en las funciones de inteligencia artificial. Las ofertas de API se incluyen bajo el término servicios cognitivos; puede acceder a funciones como los servicios avanzados de reconocimiento de imágenes. Por ejemplo, la instantánea que acompaña a este cuadro muestra la IA que se utiliza para reconocer al CEO de Microsoft a partir de una foto de prensa; otras características están relacionadas con el video, la escritura a mano y el reconocimiento y transcripción de sonido.

Si bien la calidad de la salida suele ser muy alta, tenga en cuenta que el uso continuo es casi económico: a medida que pasa el tiempo, los cargos por uso pueden acumularse. (Si tiene archivos multimedia para respaldar, use el mejor almacenamiento en la nube .)

04. API de gobierno abierto

Los representantes elegidos democráticamente suelen mostrar una gran habilidad para transformar el dinero. El concepto de gobierno abierto significa que los resultados de estos trabajos están disponibles a través de API (generalmente abiertas), lo que permite a los desarrolladores externos realizar todo tipo de magia de recolección de datos.

Un área especialmente interesante se refiere al transporte: los servicios de transporte público tienden a proporcionar a las API ubicaciones en vivo de sus vehículos y las frecuencias que se ven en la red de rutas.

Esto no se hace por puro altruismo: cuando se hace bien, una aplicación de 'tráfico local' para una ciudad o pueblo específico puede escalar rápidamente en las filas de la tienda de aplicaciones local. El gobierno no necesita invertir recursos en la creación del servicio, mientras que el desarrollador, generalmente, gana mucho dinero vendiendo espacios publicitarios debido a la audiencia local limitada.

Además de estas API, los desarrolladores también suelen dejarse llevar por otras cosas. El gobierno francés, por ejemplo, proporcionará capacidades relativamente detalladas para buscar direcciones.

05. API de mapeo AQUÍ

API de JavaScript: AQUÍ

(Crédito de la imagen: AQUÍ)

La competencia, por definición, es buena. Esta es la antigua división de mapas de Nokia y ofrece a los desarrolladores una alternativa de 'terceros' a los servicios de mapas de los tres grandes. Un aspecto interesante es la API extremadamente simple, que facilita la descarga de mosaicos.

06. API de OpenStreetMap

OpenStreetMap no proporciona mapas listos para mostrar. En su lugar, se necesitará un servicio de renderizado, como CartoType. Cuando se trabaja en un sitio web, crear un sistema de renderizado dedicado es un poco complicado: MapBox proporciona una alternativa conveniente de pago por uso.

07. Maestría en lingüística

Los programas que se ocupan de contenido generado por el usuario pueden obtener puntos extra si ofrecen un servicio de traducción integrado. Un cliente de Twitter o Gab podría, por ejemplo, traducir textos del inglés al ruso para que sean más fáciles de manejar para esa audiencia.

Si bien los 'sistemas de traducción basados ​​en máquinas' se encuentran entre los campos de investigación más antiguos en TI, desarrollar un traductor automático que funcione a mano es difícil. La API de traducción de Microsoft se actualizó recientemente a la versión 3.0 y es una ventanilla única para todos los problemas de alcance de bebé. Además de realizar traducciones entre pares de idiomas, el servicio también se puede utilizar para averiguar en qué idioma se encuentra un texto específico. Luego, puede usar estos datos para configurar API menores, como el corrector ortográfico.

Por último, los modismos y las palabras individuales también se pueden enviar a una consulta de diccionario. La información devuelta depende de la situación; en algunos casos, Microsoft puede incluso devolver docenas de modismos para ayudar a comprender.

08. API de lienzo fuera de la pantalla

Los desarrolladores alguna vez usaron una técnica llamada doble búfer para renderizar gráficos sin parpadeo. Google ha introducido algo similar: crea una ventana fuera de la pantalla donde los gráficos se pueden 'organizar' con un alto rendimiento.

09. NASA

API de JavaScript: NASA

(Crédito de la imagen: Microsoft)

La decisión de Microsoft de proporcionar a los usuarios de Windows Phone 7 un fondo de pantalla seleccionado ocasionalmente generó repercusiones en la industria. Dado que las imágenes del espacio siempre son populares, ¿por qué no ir directamente a la fuente y tomar algunas de la tienda interminable de la NASA?

10. Obtén datos de Slack

Slack se estableció como la herramienta de referencia para la 'gestión de proyectos moderna'. Si alguna vez tiene ganas de usar datos contenidos en un proyecto de este tipo, consiga un token de API y piratee. Cuando se hace correctamente, su aplicación web puede incluso integrarse en la GUI de Slack.

11. API de YouTube

API de JavaScript: YouTube

(Crédito de la imagen: Microsoft)

Un canal de YouTube es tan bueno como los análisis que lo respaldan. Es posible que la API de datos de YouTube de Google no sea particularmente elegante, pero proporciona, entre otras cosas, información valiosa sobre el comportamiento de su audiencia.

12. API de solicitud de pago

API de JavaScript: API de solicitud de pago

La primera API de JavaScript que estamos viendo es la API de solicitud de pago. Al crear un sitio web de comercio electrónico , se piensa mucho en mejorar el flujo de pago para asegurarse de que la experiencia sea lo más fluida y sin dolor posible. La introducción de los datos de pago sigue siendo un proceso repetitivo. Si algún campo es levemente incorrecto, todo el proceso se interrumpe y debe iniciarse nuevamente. Por parte del desarrollador, asegurarse de que se realicen las comprobaciones de validación correctas para cada método de pago es un proceso que requiere mucho tiempo.

La API de solicitud de pago elimina esta parte de la experiencia de pago. La página puede solicitar la información que necesita y el navegador proporciona al usuario los campos para ingresar.

El usuario solo necesita ingresar sus datos una vez y se pueden usar en diferentes sitios web y transacciones. Dependiendo del dispositivo, incluso pueden utilizar los métodos de pago vinculados a la cuenta del usuario, como Google y Apple Pay.

|_+_|

El objeto toma algunos parámetros que describen el pago que debe realizarse. El primero detalla los métodos de pago aceptados. Estos pueden ser diferentes tipos de tarjetas de pago, así como detalles para integrarse con otras soluciones de pago de terceros. Incluso existe la posibilidad de incluir otra aplicación web como método de pago mediante el uso de la API del controlador de pagos.

El segundo es un desglose de lo que se compra. Esto puede tener cualquier formato que tenga sentido para la transacción. Esto también incluye opciones para los costos de envío, que se pueden calcular en función de otros factores, como la dirección de entrega. También hay un tercer argumento opcional para especificar cualquier información adicional que deba recopilarse, como una dirección de correo electrónico o un número de contacto.

13. API de diseño CSS

API de JavaScript: API de diseño CSS

Como regla general, su diseño del sitio web debe dejarse en CSS. Con JavaScript, el manejo de cambios en el diseño tiende a un bajo rendimiento y mucho mantenimiento manual. Pero, ¿qué sucede si un sitio requiere un diseño no estándar? La ubicación tradicional en forma de cuadrícula que proporciona CSS puede no funcionar para ideas de diseño más creativas.

La API de diseño permite a los desarrolladores crear sus propios módulos de diseño, al igual que la cuadrícula existente o los módulos flexibles que se utilizan en la actualidad. Al definir las reglas con las que debería funcionar, la API puede colocar elementos en cualquier lugar dentro de su elemento contenedor. Es la segunda API de Houdini que llega a los navegadores.

Houdini introdujo el concepto de 'worklets', que funcionan de manera similar a los trabajadores web, pero están altamente especializados en una actividad. La API de diseño funciona a través de un worklet de diseño específico. Estos se registran en el navegador, lo que les permite ser recogidos en CSS.

|_+_|

Un worklet de diseño tiene un método llamado composición , que se ocupa del posicionamiento de elementos. Se ejecuta como una función de generador, lo que le permite ejecutarse en paralelo con el resto de la página para que todo funcione sin problemas.

El primer parámetro es una referencia a los elementos secundarios inmediatos del que se aplica el diseño. Los datos de tamaño están disponibles en el segundo y tercer parámetro. Uno proporciona información de posición y dimensión sobre el elemento que se está diseñando, y el otro define las restricciones dentro de las que debe trabajar el elemento. El parámetro final describe el resto de los estilos del elemento, incluidas las propiedades personalizadas que le pueden interesar.

|_+_|

Se aplica un módulo personalizado utilizando el habitual mostrar propiedad en un elemento. Utiliza el composición función, junto con el nombre del worklet.

14. API de gestión de credenciales

API de JavaScript: API de gestión de credenciales

En lugar de tener que recordar muchos detalles de inicio de sesión individuales, los usuarios pueden iniciar sesión con las credenciales almacenadas en el navegador. De esa manera, los usuarios de varios dispositivos pueden hacer que sus datos los sigan sin necesidad de iniciar sesión cada vez.

Si bien la función de autocompletar de un navegador puede reducir la fricción al ingresar la contraseña, la API de administración de credenciales puede iniciar sesión automáticamente a un usuario tan pronto como ingrese a la página. También puede iniciar sesión utilizando otras formas de autenticación, como una clave pública o mediante un proveedor de autenticación como OpenID.

15. API de pintura CSS

API de JavaScript: CSS Paint API

CSS y JavaScript a menudo se ven como partes separadas de un sitio web, solo que se unen en pequeñas formas, como agregar un nombre de clase. Los desarrolladores tienen pocas oportunidades de cambiar la forma en que el navegador decide representar una página que no sea la actualización directa del DOM.

Todo eso está listo para cambiar el próximo año a medida que un nuevo conjunto de especificaciones comience a aterrizar en los navegadores. Proporcionan acceso a la canalización de procesamiento en el navegador a través de JavaScript, para ayudar a los desarrolladores a ajustar con precisión las acciones del navegador a sus necesidades.

El grupo de trabajo de Houdini está compuesto por un grupo de personas de empresas de tecnología y navegadores. Tienen el objetivo de abrir la forma en que todo se representa en el navegador de una manera que lo haga fácilmente accesible para los desarrolladores. Esto incluye diseños, fuentes y animaciones.

La primera especificación que ya llega a los navegadores es la API de pintura de CSS (también conocida como pintura personalizada de CSS). Esta API le permite generar una imagen mediante programación siempre que una propiedad de CSS lo espere. Use JavaScript para generar fondos dinámicos, bordes y máscaras de imagen y aplíquelos en CSS sin un gran impacto en el rendimiento. Está a punto de habilitarse de forma predeterminada en Chrome Stable.

|_+_|

La API de Paint utiliza un worklet de pintura para definir lo que debe hacer el navegador cada vez que necesita actualizar la pantalla. Cada pintura puede usar una nueva versión del worklet, lo que significa que cualquier dato persistente debe almacenarse en otro lugar.

los pintura El método de devolución de llamada obtiene tres valores. El primero es el contexto, que funciona de manera muy similar a un contexto de lienzo. Se puede utilizar de la misma manera y tiene la mayoría de las mismas capacidades, pero como esto se puede llamar varias veces por segundo, debe mantenerse simple.

El segundo valor proporciona información sobre el elemento que se está pintando, como su altura y ancho. Esto se puede usar para asegurarse de que el resultado final se ajuste perfectamente cada vez que se use.

El valor final contiene todas las propiedades de estilo del objeto. Esto incluye las propiedades personalizadas de entrada definidas dentro del captador. Estos utilizan el Modelo de objetos con tipo, otra nueva característica de Houdini que hace que los valores CSS sean más fáciles de digerir en JavaScript.

La última llamada registra el worklet con el navegador y lo abre en el lado de CSS.

|_+_|

Para usar dentro de CSS, involucra una función de una línea. El valor pasado es el nombre del efecto proporcionado al registrar el worklet. La API y su worklet asociado están disponibles en Chrome y Opera, mientras que sigue siendo un foco clave para los navegadores de Internet Safari, Firefox y Samsung. Si bien la especificación está a punto de completarse, espere verla pronto en esos navegadores.

Las iteraciones posteriores de la especificación proporcionan un mecanismo para proporcionar argumentos contra la función CSS, similar a cómo se definen actualmente los gradientes. Esto permite una personalización más sencilla sin tener que aplicar propiedades personalizadas. También se están considerando otras opciones, como definir un canal alfa para las capas.

16. API de animaciones web

API de JavaScript: API de animaciones web

La animación con JavaScript históricamente ha tenido mala reputación. Mover elementos cambiando los valores de posición provoca muchos repintados y da como resultado un rendimiento deficiente. Animaciones CSS son la mejor opción, pero son difíciles de manipular sobre la marcha.

La API de animaciones web proporciona acceso al mismo motor de animación que impulsa el lado de CSS.

|_+_|

Cada elemento tiene un Animado método, que toma una serie de fotogramas clave más un objeto de configuración o una duración. Esto devuelve un objeto de animación, que luego se puede actualizar para reproducir, pausar y ajustar la velocidad de reproducción.

Hay un beneficio adicional proveniente de Houdini, con worklets de animación. Estos funcionan con una sintaxis similar a la API, pero permiten un control más preciso. Se pueden controlar mediante entradas distintas del tiempo, como el desplazamiento o la posición táctil. Esto todavía está en desarrollo; para obtener más información, diríjase al Blog para desarrolladores de Chrome

El soporte para la API de animaciones web en sí es pequeño, pero está creciendo rápidamente. Al utilizar la detección de funciones, aquellos que tienen soporte pueden sentir los beneficios de inmediato.

17. API de archivos grabables

API de JavaScript: API de archivos grabables

El objetivo a largo plazo de las aplicaciones web es lograr que estén al mismo nivel que sus contrapartes nativas. Sin embargo, sigue faltando alguna funcionalidad, especialmente en lo que respecta a la gestión de archivos locales.

Actualmente, escribir archivos implica crear una descarga y guardarlos en un directorio específico. Guardar iteraciones sobre un archivo específico creará múltiples copias, lo que no siempre es una buena experiencia.

La API de archivos grabables proporcionará a los desarrolladores más flexibilidad y permitirá a los usuarios decidir dónde se deben almacenar los archivos. Esto abre la puerta a proyectos más completos en la web, como un editor de código en línea o aplicaciones gráficas complejas.

Esta API es actualmente parte de Proyecto de capacidades de Google . Actualmente se encuentra en el proceso de recopilar comentarios sobre funciones potenciales antes de que llegue al navegador en una prueba de origen. Los problemas relacionados con la seguridad y el tipo de archivos que se pueden escribir y dónde deben resolverse antes de que la API pueda hacerse oficial.

18. API de sensor genérico

Los sensores de los dispositivos que llevamos todos los días son una excelente manera de brindar un beneficio adicional a una aplicación. El uso del entorno físico, como con un acelerómetro, puede proporcionar una inmersión adicional para la experiencia creativa.

Si ya tenemos eventos para este tipo de cosas, ¿por qué hay una nueva API? Los dispositivos cambian constantemente y se agregan sensores nuevos y variados. Para evitar tener que crear nuevas API para cada sensor nuevo que aparece, la API de sensor genérico crea una interfaz simplificada para todos ellos.

Si bien la API aún está en desarrollo, Chrome y Firefox la incluyen detrás de banderas para jugar. Otros navegadores lo tienen en consideración para el futuro.

19. API de tiempo de pintura

API de JavaScript: Paint Timing API

El rendimiento es un gran enfoque este año. Reducir el tamaño de los archivos puede ayudar, pero el rendimiento implica más que lo que se descarga en el navegador. El navegador 'pinta' su contenido en pantalla cada vez que algo cambia. Hasta que suceda la primera pintura, los usuarios se quedarán mirando una pantalla en blanco. Cuando se bloquea en otros detalles, como descargar activos o procesar JavaScript, el tiempo para esa primera pintura puede llevar más tiempo.

La API Paint Timing mantiene información detallada sobre dos eventos: la primera pintura y la primera pintura 'con contenido', que se refiere a algo más que un simple estilo, como texto o una imagen.

los PerformanceObserver La interfaz describe qué hacer cuando ocurren estos eventos. Esto se puede utilizar para enviar los datos a un servidor para su análisis más adelante.

En este momento, esto solo está disponible en Chrome y Opera, pero otros navegadores como Edge y Safari han mostrado interés y posiblemente lo incluyan en el futuro.

20. API de voz web

Esta API consta de dos partes: síntesis y reconocimiento. La síntesis de voz tomará el texto que se le proporcione y lo leerá en la voz elegida por el usuario. los Síntesis del habla El objeto proporciona acceso a todas las diferentes opciones, incluido lo que debería decir. El reconocimiento implica tomar una entrada de micrófono y comprender las palabras que se dicen. los Reconocimiento de voz El objeto se utiliza para detectar el habla, lo que generará un 'resultado' con lo que cree que dijo el usuario y qué tan seguro está.

El lado de síntesis de la API es compatible con todos los navegadores principales. La compatibilidad con el reconocimiento de voz está actualmente limitada a Chrome con un prefijo o Firefox con una bandera habilitada.

Hay discusiones para expandir el lado del reconocimiento para incluir otras entradas, incluido WebRTC para proporcionar transcripciones en tiempo real de videoconferencias. Si bien aún se encuentran en las primeras etapas, podrían ayudar a que los seminarios web y las presentaciones en línea sean más accesibles y fáciles de consultar en el futuro.

21. Observador de intersecciones

Esta API de JavaScript se puede utilizar para comprender la visibilidad y la posición de los elementos DOM (conocidos como 'objetivos') en relación con un elemento contenedor (la 'raíz'). Úselo para disparar una devolución de llamada cada vez que un elemento entra y sale de un área determinada. Esta API es la mejor para cargas diferidas o efectos de desplazamiento infinito.

22. Observador informante

Como parte de la API de informes, los observadores de informes observan algunos tipos de informes de JavaScript. Úselos para recibir una notificación cuando el navegador tenga que intervenir, por ejemplo, si tiene que proporcionar un respaldo para una fuente de carga lenta.

23. OffscreenCanvas

Dibujando a un es una tarea cara para un navegador. Esta nueva API le permite renderizar gráficos del hilo principal, sin tocar el DOM.

24. Internacionalización de API

Conocido por el espacio de nombres Intl , la API de internacionalización ECMAScript proporciona comparación de cadenas sensible al idioma, formato de números y formato de fecha y hora. Úselo para evitar el envío de bibliotecas pesadas y mostrar fechas, números y cadenas en un formato que tenga sentido en la ubicación del usuario.

25. GraphQL

Si bien esta no es una API en el sentido más estricto, GraphQL es algo que siempre merece una mención cuando se habla de API.

El método de la locura se relaciona con las consultas que se ejecutan en servidores que contienen un almacén de objetos. En lugar de obligar a los desarrolladores a crear una API de acceso para todos y cada uno de los elementos, se establece un lenguaje de consulta 'genérico'. El desarrollador de una API debe proporcionar una descripción estandarizada de los objetos contenidos en:

|_+_|

En el siguiente paso, realice una o más consultas contra estas descripciones formalizadas. Un ejemplo contra una base de datos humana (ficticia) se vería así:

|_+_|

Los servidores capaces de GraphQL reaccionan devolviendo un objeto JSON que contiene los campos deseados. Debido a las limitaciones de espacio, no podemos elaborar más este tema: este tutorial Sin embargo, proporciona una interesante descripción general.

Esta es una versión editada de artículos que aparecieron originalmente en Diseñador web revista.

Leer más: