Lógica de API con Vanilla JS y Parcel

Curso de Introducción a Empaquetadores Web

Contenido del curso

No sé dónde empezar

Introduccion

Webpack

Parcel

ESBuild

Rollup

Vite

22
Cómo crear tu primer proyecto con Vite
10:02 min

Conclusiones

23
Empaquetadores JavaScript: Ventajas y Desventajas
04:49 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:35

Lógica de API con Vanilla JS y Parcel

Curso de Introducción a Empaquetadores Web

Clase 12 de 23

Clase 12 / 23

Recursos

Construir una Single Page Application con Vanilla JavaScript y Parcel es posible sin frameworks ni librerías externas. Aquí aprenderás a estructurar la lógica base, consumir una API con fetch y async/await, y renderizar productos en el DOM usando template literals, todo optimizado por Parcel.

¿Cómo se estructura la función main con async en JavaScript?

La lógica arranca dentro del archivo index.js con una arrow function llamada main. Esta función concentra la manipulación del DOM y el llamado a la API, por lo que se declara como async para poder esperar la respuesta antes de transformarla.

js const main = async () => { // lógica aquí }

Usar async te habilita la palabra reservada await, que pausa la ejecución hasta que la promesa se resuelva. Así puedes encadenar el fetch, transformar la respuesta a JSON y luego construir el template sin caer en callbacks anidados.

¿Qué significa vanilla JavaScript? Es JavaScript puro, sin frameworks ni librerías. Te permite entender las bases del lenguaje y darte cuenta de que muchos proyectos no necesitan herramientas adicionales para funcionar bien.

¿Cómo consumir una API con fetch y await en una SPA?

Dentro de main, la primera tarea es traer los datos. Se crea una constante response que guarda lo que devuelve fetch apuntando a la URL de la API, y luego una constante products que transforma esa respuesta a JSON.

js const response = await fetch(API) const products = await response.json()

Antes de llegar a este punto, conviene haber probado la API en una herramienta como Insomnia. Eso te permite entender la estructura de los datos en un entorno seguro y descubrir qué campos vas a usar después.

Al inspeccionar la respuesta en la pestaña Network del navegador, encontrarás una estructura más legible: un campo title para el nombre, un price para el precio y un images que viene como array de strings. Saber esto antes de codear te ahorra errores.

¿Cómo renderizar productos en el DOM con template literals?

Con los datos en mano, se construye una constante output que aplica map sobre products. Aquí entra el optional chaining con products?.map para evitar que la app falle si los datos aún no están disponibles.

Dentro del map, cada producto entra a una arrow function que retorna un bloque HTML armado con template literals (las comillas francesas). Esto permite intercalar variables dentro del HTML usando el símbolo de pesos y handlebars.

js const output = products?.map((product) => { return <article class="card"> <image src="${product.images[0]}" /> <h2>${product.title} <small>$${product.price}</small></h2> </article> }).join('')

El join('') al final es clave: elimina las comas que map añadiría entre cada elemento del array al convertirlo a string. Sin él, verías comas sueltas dentro del HTML renderizado.

¿Para qué sirve el optional chaining en map? Evita que el código falle si la variable aún no tiene valor. Si products es undefined, products?.map simplemente no se ejecuta en lugar de romper la app.

¿Cómo insertar el output en el DOM con createElement y appendChild?

Una vez listo el template, se crea un nuevo elemento section con document.createElement, se le añade la clase items con classList.add, y se le inyecta el output mediante innerHTML.

js let newItem = document.createElement('section') newItem.classList.add('items') newItem.innerHTML = output app.appendChild(newItem)

Finalmente, app.appendChild(newItem) cuelga la sección del contenedor principal. Al cerrar la función con main(), toda la lógica se ejecuta y los productos aparecen en pantalla.

¿Por qué usar Parcel en lugar de un framework?

Parcel optimiza la compilación, el servidor local y el real time reload sin pedirte configuraciones largas. Eso significa que puedes enfocarte en construir la lógica del proyecto mientras la herramienta se encarga del bundling y los assets.

Compila HTML, CSS y JavaScript sin archivo de configuración.
Levanta un servidor local con recarga automática.
Prepara el proyecto para despliegue en producción.

Apoyarte en el editor también suma. Visual Studio Code marca errores comunes, como confundir una coma con un punto y coma dentro de un template, y eso evita que rompas la lógica antes de ejecutar.

En la siguiente clase añadirás los scripts para compilar, levantar el entorno local y desplegar el proyecto. ¿Ya probaste la API en Insomnia antes de empezar a codear? Cuéntame en los comentarios cómo te fue.

Introduccion

Empaquetadores Web: Herramientas y Evolución para Desarrolladores

Qué es un empaquetador de módulos JS

Webpack, Parcel, Rollup y Vite comparados

Qué hacen los empaquetadores de módulos en JS

Webpack

Configura tu primer proyecto con Webpack

webpack.config.js con plugins esenciales

Creación de una Landing Page con JavaScript y Tailwind CSS

Manipulación del DOM con map y template literals

Despliegue en GitHub Pages con Webpack

Parcel

Cómo crear un proyecto con Parcel desde cero

Estructura base de un proyecto con Fake Store API

Lógica de API con Vanilla JS y Parcel

Configuración y Uso de Parcel para Proyectos Web

ESBuild

Configurar Svelte con React y TypeScript

Estructura de un proyecto React con TypeScript

useState y useCallback en un contador React

Servidor local con esbuild desde cero

Rollup

Configura Rollup con plugins desde cero

Configurar plugins de Rollup para producción

Manipulación del DOM sin frameworks con Rollup

Servidor local en Rollup con Web Dev Server

Vite

Cómo crear tu primer proyecto con Vite

Conclusiones

Empaquetadores JavaScript: Ventajas y Desventajas

Lógica de API con Vanilla JS y Parcel