¡Los componentes web son increíbles!

Entonces, ¿qué son los componentes web? ¿Alguna vez has utilizado las etiquetas video, audio y/o details de HTML? ¿Alguna vez te has preguntado cómo, simplemente colocando la etiqueta con algunos atributos y propiedades, obtienes interfaces de reproductores multimedia completamente funcionales con controles de volumen, botones de reproducción y pausa, y más? ¿O un menú desplegable que funciona de inmediato? Ahora, imagina crear tu propio elemento HTML que haga lo que quieras.

¿Cómo es el soporte de los navegadores? Todos los navegadores modernos tienen soporte para los componentes web. Puede que estés pensando, suena genial y todo, pero ¿los componentes web ya son una realidad? Afortunadamente, es un sitio web. Y la respuesta es sí, eso es todo. Solo bromeo. Este sitio enumera algunas empresas que utilizan componentes web. Y como ejercicio para todos los que están viendo, a medida que hago scroll, si hay una empresa o un logotipo que reconozcas, di Ding. Aquí vamos. Es una lista larga. ¿Has visto algo ya? La lista sigue y sigue. Hay bastantes. Y esto es solo una parte de ellas. ¿Cuántas veces has dicho Ding hasta ahora? Sigue y sigue. Ahí vamos.

Ahora, aquí tienes un par de ejemplos específicos. Si ves el código fuente de YouTube, verás muchas etiquetas HTML que comienzan con YTD. YTD no es un prefijo normal para un elemento HTML, así que eso es una buena pista de que es un componente web. Ahora, cuando haces cosas como crear un repositorio, hacer push de cambios y/o fusionar PR en GitHub, puedes ver cuánto tiempo ha pasado desde tu última actividad. Esos son componentes web, y GitHub los ofrece para que todos los utilicen en sus propios proyectos. Ahora, me gusta hacer sitios web, muchos sitios web. Para cada uno, me gusta tener una página de `Acerca de` que explique quién, qué y por qué hice el sitio. Ahora, crear la página una y otra vez se convirtió en una tarea tediosa, así que creé un componente web llamado dwayne-made. Puedo obtener los datos sobre el sitio desde un punto final en el proyecto y pasarlo al componente web, y dwayne-made sabe cómo mostrar esos datos. Me ahorra mucho tiempo para centrarme en la aplicación en sí. Otra característica increíble es que un componente web puede tener múltiples usos. Por ejemplo, ¿no es genial cómo el humilde elemento HTML de entrada puede hacer tantas cosas diferentes con solo cambiar el atributo de tipo? Siguiendo esa línea, creé dwayne-timer porque estaba lidiando con muchas fechas y horas en proyectos personales y no quería lidiar con eso una y otra vez. No solo puede mostrar una fecha y hora local para el visitante del sitio, sino que también puede ser un temporizador de cuenta regresiva solo con agregar una propiedad al componente web. Ahora, las herramientas para desarrollar componentes web son bastante increíbles. Hay muchas bibliotecas y frameworks para crear componentes web.

¿Quieres usar TypeScript? Hay varias bibliotecas que puedes utilizar. ¿Estás más familiarizado con JSX? No hay problema. Un buen recurso para probar estas herramientas sin tener que descargarlas es WebComponents.dev. Ahora, WebComponents.dev puede hacer muchas cosas, pero también puede proporcionarte plantillas para que puedas comenzar rápidamente con un Componente Web y ver si te gusta en cuanto a la codificación.

En este momento, hay 64 plantillas que puedes utilizar. Si estás en un equipo y quieres asegurarte de tener consistencia en todos los Componentes Web que construyas, existe Open Web Components, que proporciona pautas, recomendaciones y mejores prácticas al crear Componentes Web. También tienen una herramienta de línea de comandos (CLI) que generará la estructura de archivos y carpetas de un proyecto para que todos los Componentes Web tengan la misma estructura, lo que facilita que cada miembro del equipo se ponga al día con un componente que nunca antes haya visto, sabiendo dónde buscar.

El hecho de que haya tantas personas trabajando en Componentes Web significa que probablemente ya haya algo construido que sea similar a lo que estás buscando. No es necesario empezar desde cero, lo cual es genial. WebComponents.org es un buen lugar para comenzar a ver qué hay disponible e incluso añadir tus propios componentes a la lista. Soy un gran fan de WebXR, la Realidad Aumentada y Virtual en la Web, y siempre he querido crear una aplicación, pero no tenía suficiente experiencia para crear algo desde cero sin estudiar una larga lista de diferentes tecnologías como 3JS, software de modelado 3D como Unity y mucho más.

Aquí es donde entra en juego el Componente Web Model Viewer. Hace todo lo que necesito para mostrar un modelo 3D en Realidad Virtual y Aumentada y más, sin necesidad de conocer las tecnologías subyacentes que se utilizaron para hacerlo funcionar. Con él, pude crear un juego de Tic-Tac-Toe WebXR con chat de voz en aproximadamente una semana. Aquí tienes una demostración rápida. Ahora, como puedes ver, en el portátil de la izquierda, tengo la versión 3D del Componente Web, el tablero real de Tic-Tac-Toe. A la derecha, tengo la versión aumentada de él, y puedo pasar los movimientos de un lado a otro utilizando las APIs de Vonage. Además, puedo habilitar chats de audio, y eso también se hace a través de las APIs de Vonage. Así que podemos ver que los movimientos se están jugando de un lado a otro, y al final, cuando hay un ganador, hay algunos confeti. Así que si quieres probarlo, puedes jugar una o dos partidas. Lo he implementado en xoxr.games. Espero añadir más juegos WebXR a él en el futuro.

Ahora, otra cosa increíble acerca de los Componentes Web es que puedes usarlos en tu framework favorito o por sí mismos. Este sitio, custom-elements-everywhere.com, muestra qué tan compatibles son los Componentes Web con varios frameworks y bibliotecas. Así que echemos un vistazo. Solo un rápido desplazamiento. Ahora, toma nota de tu... verifica si tu framework o biblioteca favorita está aquí y qué tan bien funcionan con los Componentes Web. Es una lista bastante larga. Hay muchas bibliotecas y frameworks diferentes que este sitio web utiliza y prueba. Muy bien. Eso es suficiente. Puedes visitar el sitio web mismo si quieres ver si tu framework favorito está ahí.

Ahora, he creado un conjunto de Componentes Web para ser utilizados con el SDK de Cliente Vonage. Cada uno sabe qué eventos escuchar y qué eventos enviar cuando sea necesario. Por lo tanto, son una forma sencilla de utilizar el SDK de Cliente Vonage independientemente del framework que elijas. Ahora, he escrito una serie de publicaciones de blog sobre cómo usarlos con Angular, Vue y React, y pronto habrá más. No solo puedes incluirlos en tu aplicación, sino que también puedes darles estilo para que se vean como parte de tu aplicación. Aquí tienes un ejemplo. Este es el campo de texto VC de la interfaz de usuario del SDK de Cliente que mencioné anteriormente. Así es el estilo predeterminado. Y si comento esto, verás que cambia a un estilo completamente diferente, lo cual es bastante genial, creo. Y eso me parece increíble.

Bueno, ahí lo tienes. Solo algunas de las cosas que creo que hacen que los Componentes Web sean increíbles. Gracias por escuchar. Espero que también pienses que los Componentes Web son increíbles. Ahora aquí tienes un enlace a mi serie de blogs sobre Componentes Web. Mi información de contacto está en mi sitio web, life-long.dev, si deseas hablar sobre Componentes Web o cualquier cosa relacionada con Vonage. Consulta nuestras APIs si deseas agregar comunicaciones en tiempo real a tu aplicación a través de video, voz, texto, SMS y mucho más. Si los encuentras increíbles y deseas obtener más información, puedes consultar nuestras APIs. Una vez más, gracias por escuchar y que tengas un excelente resto de la conferencia. Nos vemos por ahí.