Comprender cuándo usar funciones síncronas y cuándo asíncronas es fundamental para construir aplicaciones eficientes en JavaScript. A través de una aplicación que consume la API de Colombia, se explica con claridad cómo organizar el código en capas separadas: comunicación con la API, presentación visual y utilidades reutilizables.
¿Cómo se comunica la app con una API externa?
El archivo api.js tiene una sola responsabilidad: hablar con la API externa [0:18]. Dentro de él se definen tres constantes clave: la URL base de la API, la URL del país y la URL de los departamentos.
La función getJSON recibe una URL y devuelve los datos en formato JSON. Si ocurre algún error, se maneja internamente. Esta función es asíncrona porque necesita esperar a que la API responda, y la palabra reservada await gestiona esa espera [0:42].
Después están fetchCountry y fetchDepartments, que traen la información del país y los departamentos respectivamente, transformándola en objetos JSON.
¿Por qué usar promise.all para llamadas en paralelo?
La función fetchDashboardDataParallel es una función async que, en lugar de ejecutar las peticiones en secuencia, lanza ambas promesas al mismo tiempo usando Promise.all [1:05]. Las dos llamadas viajan en paralelo y await espera a que ambas terminen.
- Si se ejecutaran en secuencia, tardarían el doble.
- Con
Promise.all, el tiempo total es el de la petición más lenta.
- Es mucho más eficiente que encadenar las llamadas una tras otra.
Este patrón resulta esencial cuando se necesitan múltiples datos independientes de una API.
¿Qué hace la capa de presentación en UI.js?
El archivo UI.js se encarga del renderizado visual en el DOM y contiene tres funciones principales [2:00]:
renderCountry: pinta la tarjeta del país con nombre, capital, población, superficie, prefijo y una breve descripción de Colombia.renderStats: muestra estadísticas generales como el total de departamentos (33), la población acumulada (51 millones), el top tres de municipios y el top tres por población [2:28].renderDepartments: genera dinámicamente las tarjetas de cada departamento usando un template de HTML con nombre, capital, población y municipios [2:50].
¿Por qué estas funciones no son asíncronas?
Ninguna de estas funciones necesita await porque trabajan con datos que ya están en memoria [3:00]. No van a buscar información a ningún servidor ni esperan respuesta de un archivo o base de datos.
La regla es simple:
- Si la función puede responder ahora mismo, es síncrona.
- Si necesita ir a buscar algo o esperar algo externo, es asíncrona.
Este archivo actúa como la capa de presentación, separando la lógica de visualización del resto del código. Recibe datos y los convierte en HTML visible en la página.
¿Qué funciones de utilidad complementan la aplicación?
El archivo utils.js contiene funciones auxiliares que no se relacionan directamente con la API ni con la interfaz, pero que son muy útiles en distintas partes de la aplicación para evitar repetir código [3:38].
setStatus: actualiza el texto de un nodo del DOM para mostrar mensajes al usuario y opcionalmente aplica un estilo de error.truncate: recorta textos largos añadiendo puntos suspensivos al final [3:55]. Como reto, se propone agregar un botón de "Leer más" que muestre el texto completo al hacer clic.formatNumber: formatea números grandes añadiendo puntos de separación de miles.- Una función de reset que limpia el contenido HTML de las tres secciones principales del DOM, útil para refrescar la interfaz antes de pintar nuevos datos [4:20].
En conjunto, este archivo funciona como la capa de asistentes: pequeñas funciones sin dependencias que hacen el resto del código más limpio y legible.
Todas las aplicaciones combinan funciones síncronas y asíncronas. La clave está en identificar si los datos ya están disponibles o si se necesita esperar una fuente externa. ¿Ya identificas en tus proyectos cuáles funciones deberían ser async? Comparte tu experiencia en los comentarios.
