Creación de SPA con Vanilla JavaScript y Parcel

¿Cómo construir la lógica de nuestro proyecto con Parcel y Vanilla JavaScript?

Para los desarrolladores web, es esencial comprender cómo optimizar la carga y el rendimiento de un proyecto. Parcel, una herramienta de empaquetado web, nos permite centrarnos en la lógica del proyecto sin preocuparnos demasiado por configuraciones complejas. Con esto en mente, construiremos una aplicación utilizando HTML, CSS y JavaScript, aprovechando al máximo lo que Parcel tiene para ofrecer.

¿Cómo estructuramos la función principal con async/await?

Iniciaremos creando una función asincrónica llamada main que contendrá la lógica para:

1. Manipular elementos del DOM: Permitiendo la interacción dinámica de la página.
2. Hacer llamadas a la API: Utilizaremos fetch y async/await para gestionar respuestas de forma ordenada.
3. Mantener la aplicación simplificada: Usaremos Vanilla JavaScript, brindándonos una comprensión más clara sin frameworks.

¿Cómo hacemos la llamada a la API y transformamos datos a JSON?

Para interactuar con los datos de la API, debemos entender y probar su estructura en un entorno seguro. Una vez dentro de nuestra función main, haremos lo siguiente:

const main = async () => {
  const response = await fetch('URL_DE_LA_API');
  const products = await response.json();
};

• fetch: Nos permite obtener datos de la API de manera eficiente.
• await response.json(): Transformamos los datos obtenidos a formato JSON para manipularlos fácilmente.

¿Cómo creamos un template con los productos obtenidos?

Una vez con los datos JSON, debemos generar un HTML dinámico que se injertará en el DOM. Para esto:

1. Iteramos sobre los productos: Usaremos map para tratar cada artículo.
2. Creamos una plantilla HTML: Con template literals y handlebars para integrar datos.
3. Inyectamos en el DOM: Usando appendChild.

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

const newItem = document.createElement('section');
newItem.classList.add('items');
newItem.innerHTML = output;
document.getElementById('app').appendChild(newItem);

• map y join: Nos permite transformar y unir nuestros datos en un solo string HTML.
• template literals: Facilitan la construcción de cadenas de texto dinámicas.

¿Cómo gestionar el despliegue y compilación local con Parcel?

Finalmente, nuestro proyecto necesita ser compilado y verificado en un servidor local. Añadiremos scripts y configuraciones para esto, pero primero nos aseguraremos de que nuestra lógica principal funcione correctamente llamando a main:

main();

Estaremos listos para configurar scripts que faciliten la compilación y despliegue, habilitando la visualización y pruebas en tiempo real en nuestro entorno de desarrollo.

Este enfoque no solo fortalece nuestra habilidad de crear aplicaciones eficientes sin necesidad de frameworks complejos, sino que también subraya la importancia de dominar las bases del desarrollo web con tecnologías fundamentales. ¡Continúa practicando y explorando para desarrollar proyectos cada vez más sofisticados!