Lección 16: Componentes

Es común, cuando desarrollamos un App o sitio web, encontrarnos con repeticiones de bloques HTML cuyas funcionalidades son clónica. Para simplificar el desarrollo, y centralizar la lógica, se tiende a crear componentes. Un técnica de arquitectura donde divides las funcionalidades en fragmentos reutilizables formado por la triada de HTML, CSS y JavaScript.

Con la llegada de los módulos, que hemos aprendido en la lección anterior, nos permite crear componentes nativamente (Vainilla) sin recurrir a frameworks externos como ReactJS, VueJS o Angular. Se denomina Custom Elements.

Custom Elements o Componentes personalizados

A partir de la siguiente etiqueta que he inventado, con un atributo para indicar la cifra, puedo formatear un precio con un doble decimal y el símbolo del euro.

<price-component amount="34.2"></price-component>

34.20 €

¿Cómo es posible? En JavaScript solo necesito crear una clase que herede de HTMLElement y registrarlo con customElements.

// Clase del componente
class PriceComponent extends HTMLElement {

    constructor() {
        super();
        this.render();
    }
    
    render() {
        this.textContent = `${parseFloat(this.getAttribute("cantidad")).toFixed(2)} €`;
    }
}

// Al registrar definimos el nombre del componente, que siempre debe estar formado por dos palabras como mínimo.
customElements.define("price-component", PriceComponent);

Puedes crear todos los que haga uso tu sitio para todo tipo de funcionalidades: filtrado, formateo, cálculos, conexiones asíncronas… Aunque estamos limitados a la hora de incluir HTML. Para ello incluiremos una plantilla HTML.

Componentes personalizados con plantilla HTML

En el siguiente ejemplo puedes ver como se ha declarado un componente con el objetivo de representar algunas fichas de personales históricos. Son totalmente configurables a partir de sus atributos y hacen uso de una plantilla para definir la estructura HTML.

<card-component
                name="Lope de Vega"
                country="Spain"
                avatar="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Lope_de_vega.JPG/640px-Lope_de_vega.JPG"
                ></card-component>

<card-component
                name="Francisco de Quevedo "
                country="Spain"
                avatar="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Retrato_de_Francisco_de_Quevedo%2C_after_an_original_attributed_to_John_Vanderham.jpg/640px-Retrato_de_Francisco_de_Quevedo%2C_after_an_original_attributed_to_John_Vanderham.jpg"
                ></card-component>

<template id="card">
    <div>
        <div class="card">
            <h2 class="card__name"></h2>
            <h3 class="card__country"></h3>
            <p>
                <img class="card__avatar" src="" alt="Avatar">
            </p>
        </div>
    </div>
</template>

Escritores en escritores

La única diferencia es que en el momento de renderizar capturaremos el contenido de la plantilla e iremos modificando las etiquetas que nos haga falta.

class CardComponent extends HTMLElement {

    constructor() {
        super();
        this.render();
    }

    render() {
        // Obtenemos el contenido de la plantilla
        const template = document.querySelector("template#card").content
            .firstElementChild;
        // Modificamos el HTML de la plantilla
        template.querySelector(".card__name").textContent = this.getAttribute(
            "name"
        );
        template.querySelector(
            ".card__country"
        ).textContent = this.getAttribute("country");
        template
            .querySelector(".card__avatar")
            .setAttribute("src", this.getAttribute("avatar"));
        // Insertamos el HTML modificado
        this.innerHTML = template.innerHTML;
    }
}

customElements.define("card-component", CardComponent);

Sobre la base que hemos definido, ya podemos construir componentes a medida todo lo complejo que se nos pase por la cabeza.

16-1 16-2

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario