Manipulación del DOM sin frameworks con Rollup

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:0012:34

Manipulación del DOM sin frameworks con Rollup

Curso de Introducción a Empaquetadores Web

Clase 20 de 23

Clase 20 / 23

Recursos

Construir una aplicación web desde cero con JavaScript vanilla te enseña a manipular el DOM sin atajos. Aquí vas a montar la lógica de un proyecto que consume la Fake API de Platzi, genera el HTML de forma dinámica e inserta cada elemento en el documento usando solo las APIs nativas del navegador.

Este recorrido es ideal si ya jugaste con Parcel y quieres dar el salto a Rollup, entendiendo cómo se importan estilos, imágenes y cómo se arma una función main con async/await.

Qué recursos necesitas antes de escribir la lógica

Antes de tocar JavaScript, prepara dos archivos base que tu proyecto necesita para verse bien y cargar correctamente.

Un archivo styles.css dentro de la carpeta styles, con los estilos que se comparten en los recursos de la clase.
Una imagen .png (puede ser tu logo personal) dentro de la carpeta assets, que más adelante vas a copiar y optimizar.

¿Por qué importar el CSS sin asignarle un nombre? Porque no lo referencias dentro del documento, pero Rollup detecta el import y, gracias a un plugin de CSS, lo minifica y lo prepara para producción o desarrollo.

Cómo configurar la API y los imports iniciales

La estrategia es declarar primero las constantes que no cambian y luego construir la lógica encima. Empieza capturando el body del documento, porque ahí vas a inyectar todo el contenido.

js const body = document.querySelector('body'); const API = 'https://api.escuelajs.co/api/v1/products?offset=5&limit=10';

import logo from './assets/logo.png'; import './styles/styles.css';

El endpoint usa dos parámetros de paginado importantes: offset=5 te posiciona en el producto número cinco, y limit=10 te entrega los siguientes diez productos a partir de ahí. Conocer la API a fondo te da ventaja en este proyecto y en cualquier otro que construyas después.

El logo sí lleva nombre porque lo vas a usar como referencia visual dentro del DOM. Los estilos no necesitan nombre porque solo le avisan al bundler que existen.

Cómo construir la función main con async await

La función principal centraliza la lectura de la API, la transformación de los datos y la inyección al DOM. Se declara como una arrow function asíncrona.

js const main = async () => { const response = await fetch(API); const products = await response.json();

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

Aquí pasan tres cosas clave. Primero, await fetch(API) espera la respuesta del servidor. Segundo, response.json() transforma esa respuesta en algo iterable. Tercero, products.map recorre cada producto y devuelve un nuevo array con plantillas HTML construidas con template literals.

¿Para qué sirve .join('') después de un map? Une todos los elementos del array en un solo string sin comas ni espacios extra, dejándolo listo para insertarlo como HTML.

Por qué accedemos a product.images[0]

La Fake API de Platzi devuelve images como un array de URLs por cada producto. Para mostrar solo la imagen principal, accedes a la posición cero del array. Si intentaras imprimir product.images directo, verías un texto raro con corchetes y comillas.

Cómo manipular el DOM con createElement y appendChild

Con el HTML ya generado en la variable output, el siguiente paso es crear los nodos reales y colgarlos del documento. Esto es manipulación pura del DOM, sin frameworks.

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

const newHeader = document.createElement('header'); const newImage = document.createElement('img'); newImage.src = logo; newHeader.appendChild(newImage);

body.appendChild(newHeader); body.appendChild(newItem);

Fíjate en el patrón: creas el elemento, le agregas clases o atributos, y luego lo cuelgas del padre con appendChild. Es el mismo patrón que abstraen Angular, React, Vue o Svelte, pero aquí lo ves al desnudo.

¿Qué es JavaScript vanilla? Es JavaScript puro, sin librerías ni frameworks. Manipulas el DOM directamente con APIs nativas como document.createElement, querySelector o appendChild.

Entender ambos mundos, el nativo y el de los frameworks, te hace un desarrollador más completo. Cuando un framework falla o necesitas optimizar, vuelves a estas bases.

Cómo se ejecuta la función main al final del script

Declarar main no la ejecuta. Tienes que invocarla explícitamente al final del archivo para que dispare toda la cadena: fetch, transformación, creación de nodos e inyección al DOM.

js main();

Con esa línea, tu aplicativo cobra vida. El siguiente paso es probar el compilado y levantar un entorno de desarrollo local para verlo en el navegador. ¿Ya tienes tu logo y tu CSS listos para arrancar? Cuéntame en los comentarios qué API estás conectando con tu propio proyecto.

Rubén Ernesto Aragón Gil

Hace 4 años

const $body = document.querySelector('body');
const API = "https://api.escuelajs.co/api/v1/products/?offset=5&limit=10";
import logo from "./assets/logo.png";
import './styles/style.css';

const main = async () => {
    const response = await fetch(API);
    const products = await response.json();
    const output = products.map((products) => {
        return `
        <article class="Card"> 
            <img src="${product.images[0]}" />
            <h3>
                ${product.title} <small>Precio $${product.price}}</small>
            </h3>
        </article>
        `;
    }).json('');
    const newItem = document.querySelector('section');
    newItem.classList.add('Items');
    newItem.innerHTML = output;

    const newHeader = document.createElement('header');
    const newImage = document.createElement('img');
    newImage.src = logo;

    newHeader.appendChild(newImage);
    $body.appendChild(newHeader);
    $body.appendChild(newItem
        )
};

main();

Donovan RM

Hace 3 años

Ojo el codigo tiene errores: Acá estan las correcciones:

const $body = document.querySelector("body");
const API = "https://api.escuelajs.co/api/v1/products/?offset=5&limit=10";
import logo from "./assets/logo.png";
import './styles/style.css';

const main = async () => {
    const response = await fetch(API);
    const products = await response.json();
    const output = products.map((product) => {
        return `
        <article class="Card"> 
            <img src="${product.images[0]}" />
            <h3>
                ${product.title} <small>Precio $${product.price}}</small>
            </h3>
        </article>
        `;
    }).join('');
    const newItem = document.createElement("section");
    newItem.classList.add('Items');
    newItem.innerHTML = output;
    
    const newHeader = document.createElement('header');
    const newImage = document.createElement('img');
    newImage.src = logo;

    newHeader.appendChild(newImage);
    $body.appendChild(newHeader);
    $body.appendChild(newItem);
};

main();

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

Manipulación del DOM sin frameworks con Rollup