){kind=small}
Introducción a los componentes web
Tiempo de lectura: 10 minutos
Todos estamos de acuerdo en que hay muchos frameworks y librerías JavaScript. Angular, React, Vue, Svelte... la lista parece crecer cada año. Pero, ¿qué tienen todos ellos en común? La respuesta es que se utilizan para construir aplicaciones en la web, y proporcionan la capacidad de crear componentes reutilizables.
¿Y si se pudieran crear componentes basados en los estándares web existentes, componentes que no dependieran del marco de trabajo o de la biblioteca utilizada para unir todo en una aplicación? Aquí es donde entran en juego los Web Components.
He aquí algunas empresas de las que quizá haya oído hablar y que aplican Web Components:
Logos of companies using Web Components. Google, Salesforce, Electronic Arts, Twitter, YouTube and GitHub
Google: muchas propiedades, incluido el marco de componentes web AMP (fuente)
Salesforce: Componentes web Lightning (fuente)
Twitter: Tweets incrustados (fuente)
GitHub: El "Actualizado hace" (fuente)
YouTube: El sitio está construido utilizando Web Components (fuente)
Profundicemos en cómo Electronic Arts (EA) utiliza los Web Components. (fuente)
EA es una de las mayores empresas de videojuegos, con más de 22 estudios y 10.000 empleados en 30 lugares de todo el mundo. No hace falta decir que lanzan un montón de juegos (NBA Live, Star Wars, Los Sims, Battlefield, etc.).
Al principio, el equipo web adoptó el enfoque de diseñar y desarrollar el sitio web de cada juego de forma independiente, un sitio a la vez. Como se puede imaginar, esto provocó que los usuarios no tuvieran una experiencia coherente al navegar por todos los juegos que EA ofrece. También era difícil para los diseñadores y desarrolladores que trabajaban en los sitios. Dedicaban el 80% de su tiempo a la "Commodity Web" (es decir, navegación, pies de página y galerías multimedia) en lugar de crear experiencias personalizadas para cada título de juego.
Para invertir esa relación, se creó el Network Design System (NDS). Con el NDS, fueron capaces de tomar los componentes de Commodity Web y añadir:
Capacidades temáticas
Capacidad de integración con cualquier lenguaje y framework
Apoyo a su arquitectura de micrositios
Interfaz de usuario como servicio (UIaaS)
¿Y sabe quién más ha utilizado probablemente Web Components?
Usted. Alguna vez te has preguntado cómo es posible que puedas simplemente establecer el atributo 'src' en un archivo <video> o <audio> y tener un reproductor totalmente funcional con botones, control de volumen, barra de progreso, temporizador y otras opciones? Componentes Web.
Veamos un ejemplo que es igual de fácil de usar, pero en el que ocurren muchas más cosas entre bastidores. visor de modelos desarrollado por Google.
Este es el código necesario para visualizar un modelo 3D:
<!-- Import the component -->
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">https://unpkg.com/@google/model-viewer/dist/model-viewer.js</a>
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js</a>
<!-- Use it like any other HTML element -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>Con una simple etiqueta HTML, puede incrustar un modelo 3D sin necesidad de conocer WebGL y la API de dispositivos WebXR.
Aquí está el Web Component modelo-visor implementado dentro y sin un framework / librería:
Esperemos que al ver lo que se puede crear con Web Components y quién lo está utilizando, te hayan entrado ganas de saber cómo crear los tuyos propios.
Como ya se ha dicho, los componentes web se basan en estándares web. Estas API de bajo nivel consisten en:
Elementos personalizados
DOM en la sombra
Plantillas HTML
API de elementos personalizados: Permite registrar un elemento personalizado en la página.
Debe incluir un guión/guión (en mayúsculas), es decir, mi-elemento-personalizado. No se permiten elementos de una sola palabra para evitar conflictos de nombres.
Es un objeto de clase que define su comportamiento.
También determina qué elementos incorporados, si los hay, amplían los elementos personalizados, es decir, entrada (HTMLInputElement), botón (HTMLButtonElement), etc.
API DOM en la sombra: Facilita un método para adjuntar un DOM independiente a un elemento.
Proporciona encapsulación para mantener el estilo, la estructura y el comportamiento separados del código exterior. Ayuda a "...contener lo bruto" - Paul Lewis (fuente)
Permite la reasignación de eventos, es decir, convertir un evento de clic en algo más significativo.
API de plantillas HTML: Crea una plantilla flexible que se insertará en el DOM de sombra de los elementos personalizados.
el contenido del elemento
<template>no se renderiza inmediatamente. Definimos la estructura HTML por adelantado y la clonamos cuando es necesario mediante JavaScript.Utilizado para renderizar eficientemente HTML y actualizarlo cuando el usuario interactúa con nuestro componente web.
Para plantillas más complejas, puede ser más fácil utilizar una biblioteca, un marco de trabajo o una herramienta.
Aquí hay un ejemplo de Web Component que escribí con comentarios para ayudar a explicar lo que está pasando.
Si se pregunta por la compatibilidad con los navegadores, los Web Components son compatibles con los navegadores modernos.
Table showing browser support for Web Components.
Para navegadores más antiguos, puede utilizar polyfills: https://www.webcomponents.org/polyfills
En Vonage, estamos creando Web Components para construir un sistema de diseño como el de Electronic Arts mencionado anteriormente. Nuestro objetivo es que los usuarios puedan ensamblar fácilmente componentes para crear cosas como aplicaciones de chat sin tener que preocuparse de lo que ocurre entre bastidores.
Aquí tiene algunos recursos para obtener más información sobre los componentes web:
El ejemplo de Web Component que hice era sencillo. A medida que la complejidad de un componente crece, el uso de una herramienta puede facilitar el desarrollo. En la próxima entrada del blog, compararemos diferentes frameworks y herramientas que crean Web Components.