Una Nueva Web con WebComponents

Marcela Gotta

Expert Frontend Developer, Sngular

¡Bienvenidos!

Vamos a embarcarnos en esta aventura

Una nueva web con Webcomponents

01. Presentación e introducción

Hola! soy Marcela Gotta

Expert Software Developer en Sngular con más de 10 años de experiencia en el desarrollo de aplicaciones trabajando para empresas como BBVA, ING, Carrefour, Mapfre o el Corte Inglés, entre otras. Amante del desarrollo Front-end y el diseño UX, especialista en JavaScript con experiencia trabajando con las tecnologías más destacadas de su ecosistema, como Angular, React, Vue.js, Node.js y LitElement. Me encanta enseñar y ayudar a construir este nuevo ahora.

Contenido

Introducción y presentación
HTML, CSS, JS y La Web
Componentes y su arquitectura
Problemas que enfrenta el Frontend
WebComponents ¡Al rescate!

Contenido

Creando un WebComponent
Conclusión y ¿Ahora qué?
Sesión de preguntas

La revolución de la Web

WebComponents
PWA
WebRTC
WebXR
WebAssembly

La web hoy en día está más preparada para la batalla que nunca.

WebSocket
WebWorkers
ServiceWorkers
WebGL
¡Y mucho más!

Nuestro protagonista: Webcomponents

Piezas reutilizables que nos facilitan el desarrollo y mantenimiento de nuestro código

¡Muchas preguntas!

¿Qué son WebComponents?

¿Qué es la Web?

¿Cómo funciona la Web?

¿Son los WebComponents el Futuro?

¿Quiénes somos?

¿Dónde estamos?

Antes de nada empecemos por el principio...

Una nueva web con Webcomponents

02. HTML, CSS, JS y la Web

¿Qué es la web?

Es un sistema que funciona en los navegadores e internet a través de hipervinculos y conexión entre servidores

Los tres mosqueteros de la web

HTML

Javascript

CSS

Son las tres tecnologías top en el mundo web.

Son los materiales necesarios para construir tu aplicación.

Gracias a ellos y los avances que han tenido estas tecnologías, la web es como la conocemos.

¿Qué es HTML?

HTML, siglas en inglés de HyperText Markup Language (‘lenguaje de marcas de hipertexto’).
Es un estándar a cargo de la W3C
Es la estructura de nuestra web, los huesos.
Se basa en el uso de elementos, <etiquetas> y atributos.

¿Qué es CSS?

Es un lenguaje que describe estilos de una página HTML y cómo sus elementos deben ser mostrados.
CSS está diseñado para marcar la separación del contenido del documento y la forma de presentación de este.
Una hoja de estilos consiste en una serie de reglas.
Cada regla consiste en uno o más selectores, y un bloque de declaración.

¿Qué es Javascript?

Es un lenguaje de programación interpretado

Se define como:

Orientado a objetos
Basado en prototipos
Imperativo
Débilmente tipado y dinámico

Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web!

Un claro ejemplo

En un principio todo era oscuro

En el inicio de la web solo era una herramienta que permita acceder a diferentes archivos a través de hipervinculos e internet. Javascript ni CSS existían y HTML casí no tenía funcionalidades.

¡Y se hizo la luz!

La web se hizo más popular y con más características, css y javascript aparecieron también la web 2.0 interconectada entre ordenadores y servidores.

Apareció la web 2.0

La era de los frameworks JS

Una nueva web con Webcomponents

03. Componentes y su arquitectura

Introducción a la Arquitectura Frontend

¡La web ya NO es como antes!

Los avances en el área hace importante la arquitectura.

Gracias a los avances que han tenido estas tecnologías, la web es como la conocemos!

Crear sitios web se complica

Construimos nuestra casa virtual

Conectamos la casa para darle vida.

Planificamos qué es lo mejor para el tipo de casa que queremos ;)

Las piezas de la casa son reutilizables.

Construimos la estructura con estas piezas

¿Qué son componentes?

Una pieza de código independiente.
Es personalizado
Es reutilizable
Su comportamiento es 100% configurable.

Arquitectura basada en componentes

Nuestros componentes son piezas reutilizables

Estas piezas están encapsuladas y pueden ser

Se encargan de pintar nuestros componentes sin tener que preocuparse de alguna lógica de negocio.

Se encargan de transformar la lógica de negocio, construir cómo mostrar nuestras piezas y manejar el estado.

Visuales

Lógicos

Tecnologías Frontend Basadas en Componentes

Angular

React

Vue

Una nueva web con Webcomponents

04. Problemas que enfrenta el Frontend

1. Ecosistema tecnológico extenso

Existe una alta oferta de librerías y frameworks en Javascript. Una heladería con muchos sabores.

2. El desarrollo web se complica

Al haber tantas ofertas con diversos pro y contras es complicado aprender y especializarse en alguna de ellas.

3. Los frameworks son dependientes

Al ser librerías y frameworks de externos, los componentes dependen de ella, así que cada vez que quieras cargar un componente de una librería que no tengas agregada, deberás hacerlo, lo que agregará tamaño al proyecto.

4. Debemos elegir un solo stack

Por eso se tiende a elegir un solo framework por proyecto o aplicación, de esta manera los componentes serán creados en una sola tecnología por lo que si deseas hacer otro proyecto con otra tecnología tendrás que rehacer parte del código.

Una nueva web con Webcomponents

05. WebComponents ¡Al rescate!

¿Qué son WebComponents?

Son un conjunto de características que permite la creación de widgets o componentes independientes y reutilizables en documentos y aplicaciones web de forma nativa.

Componentes vs WebComponents

Los webcomponentes son un tipo de componentes que cumplen ciertas espeficaciones y funcionan bajo un entorno nativo.

Tecnologías WebComponents

Custom Elements

HTML Templates

Shadow DOM

ES Modules

Ventajas de los WebComponents

Reutilización: Don’t Repeat Yourself (you only have to build it once)
Legibilidad: Hace más fácil a los demás entender el código. Mejor semántica.
Mantenibilidad: Se mantienen de forma individual.
Natividad: Los frameworks y librerías no están hechos para existir fuera de su ecosistema. Los Web Components sí.
Consistencia: Al ser reutilizables y nativos, ya no tendrás que crear los mismos componentes en diferentes frameworks o librerías.

Desventajas de los WebComponents

Cuando se trata de desarrollar web complejas, necesita complementarse con otras herramientas para llegar a ser un entorno de trabajo íntegro, como puede ser Angular, Vue o React.
El código generado dificil de leer. Aun así existen librerías como Lit-element o Stencil JS que te permiten tener una estructura más limpia.
Necesita de un Polyfill para ser compatible con todos los navegadores.

Escenarios para su Uso

Los web componentes son ideales para librerias UI o sistemas de diseño
Para desarrollar una app compleja, seguramente necesite ser complementado con un framework.
Ciertos frameworks trabajan muy bien junto con WebComponents

Una nueva web con Webcomponents

06. Creando un WebComponent

Cosas a tener en cuenta

Conocimientos de HTML, CSS y Javascript.
Antes de empezar crear, ten un diseño a mano.

Nuestro WebComponent

En esta ocasión vamos a crear un componente de tipo botón.

Hola! Soy un botón

Partes de un WebComponent

Classes

Properties

Attributes

Methods

Events

Template

Template HTML

let myTemplate = `
<button>
    <slot></slot>
</button>
`;

Propiedades y atributos

<mars-button value="hello world" name="my name"></mars-button>

static get observedAttributes() {
    return ["value"];
}

attributeChangedCallback(name, oldVal, newVal) {
  if (oldVal === newVal) {
    return;
  }

  if (name === "value") {
    this.value = newVal;
    this.updateValue();
  }
}

Enviar y capturar eventos

  connectedCallback() {
    this.element.addEventListener("click", () => {
      this.dispatchEvent(
        new CustomEvent("on-click", {
          bubbles: true,
          composed: true,
          detail: {
            value: this.value || this.innerHTML,
          },
        })
      );
    });
  }

Ciclo de vida de un WebComponent

constructor()

connectedCallback()

attributeChangedCallback()

disconnectedCallback()

adoptedCallback()

Estilos de nuestro WebComponent

Podemos agregar estilos CSS:

Estilos en linea
Agregando un bloque css dentro del mismo componente.
Librerías que facilitan esto

let myTemplate = `
<style>
    button {
        border: none;
        background-color: #5f3993;
        cursor: pointer;
        outline: none;
        color: white;
        padding: 10px;
        border-radius: 5px;
        font-size: 1rem;
    }

    button:hover {
        background-color: ##9f7fcd;
    }

    button:active, button:focus {
        background-color: #472b6e;
    }
</style>

<button style="background-color: red;">
    <slot></slot>
</button>
`;

Código de nuestro WebComponent

let myTemplate = `
<style>
    button {
        border: none;
        background-color: #5f3993;
        cursor: pointer;
        outline: none;
        color: white;
        padding: 10px;
        border-radius: 5px;
        font-size: 1rem;
    }

    button:hover {
        background-color: ##9f7fcd;
    }

    button:active, button:focus {
        background-color: #472b6e;
    }
</style>

<button>
    <slot></slot>
</button>
`;

export class MarsButton extends HTMLElement {
  static get observedAttributes() {
    return ["value"];
  }

  constructor() {
    super();
    let template = document.createElement("template");
    template.innerHTML = myTemplate;
    // attach to the Shadow DOM
    const root = this.attachShadow({ mode: "open" });
    root.appendChild(template.content.cloneNode(true));
    this.element = root.querySelector("button");
    this.slotNode = this.element.querySelector("slot");
  }

  connectedCallback() {
    this.element.addEventListener("click", () => {
      this.dispatchEvent(
        new CustomEvent("on-click", {
          bubbles: true,
          composed: true,
          detail: {
            value: this.value || this.innerHTML,
          },
        })
      );
    });
  }

  get value() {
    return this.getAttribute("value");
  }

  set value(data) {
    this.setAttribute("value", data);
  }

  attributeChangedCallback(name, oldVal, newVal) {
    if (oldVal === newVal) {
      return;
    }

    if (name === "value") {
      this.value = newVal;
      this.updateValue();
    }
  }

  updateValue() {
    if (this.slotNode) {
      this.slotNode.innerHTML = this.value;
    }
  }
}

Definir nuestro WebComponent

Para agregar un WebComponent debes definirlo en el documento HTML de tu página web.

import { MarsButton } from "./src/MarsButton.js";

window.customElements.define("mars-button", MarsButton);

Publicar WebComponents

Crear un package.json
Tener cuenta de npm y publicarlo con comandos.

{
    "name": "@devcast/mars-button",
    "description": "Webcomponent mars-button following open-wc recommendations",
    "license": "MIT",
    "author": "mars-button",
    "version": "0.0.0",
    "main": "index.js",
    "module": "index.js",
    "scripts": {
      "analyze": "cem analyze --litelement",
      "start": "web-dev-server"
    },
    "dependencies": {
      "lit": "^2.0.2"
    },
    "devDependencies": {
      "@custom-elements-manifest/analyzer": "^0.4.17",
      "@web/dev-server": "^0.1.25"
    },
    "eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "rules": {}
    },
    "customElements": "custom-elements.json"
}