¡Los componentes web son increíbles!

Rate this content
Bookmark

¿Alguna vez te has preguntado cómo al colocar "video" o "audio" en tu HTML obtienes un reproductor multimedia con controles incluidos? ¿O cómo, dependiendo del atributo de tipo, "input" puede ser un botón, un lugar para ingresar texto, seleccionar una fecha o archivo, selector de color y más? ¿Qué tal si pudieras crear tu propio elemento? La respuesta: ¡Componentes web! 🤯 En esta charla, veremos qué son los componentes web, cómo crear uno e incluirlo en una aplicación.

10 min
16 Jun, 2022

Video Summary and Transcription

Los componentes web te permiten crear tus propios elementos HTML que pueden hacer cualquier cosa que desees, y son compatibles con todos los navegadores modernos. Muchas empresas, incluyendo YouTube y GitHub, utilizan componentes web para mejorar sus sitios web. Existen herramientas y bibliotecas extensas disponibles para el desarrollo de componentes web. El componente web Model Viewer permite mostrar modelos 3D en realidad virtual y aumentada sin necesidad de conocer las tecnologías subyacentes. Los componentes web se pueden utilizar con varios frameworks y bibliotecas, y existen recursos disponibles para ayudar con la compatibilidad.

Available in English

1. Introducción a los Componentes Web

Short description:

Hola, soy Dwayne, un defensor del desarrollo de JavaScript en Vonage, y estoy aquí para argumentar a favor de los componentes web. Los componentes web te permiten crear tus propios elementos HTML que pueden hacer cualquier cosa que desees. Son compatibles con todos los navegadores modernos y muchas empresas ya los están utilizando. Por ejemplo, YouTube y GitHub utilizan componentes web para mejorar sus sitios web. Personalmente, utilizo componentes web para ahorrar tiempo al crear sitios web y para agregar funcionalidades como mostrar datos y crear temporizadores de cuenta regresiva. La herramienta para desarrollar componentes web es amplia, con muchas bibliotecas y frameworks disponibles.

me han dado 10 minutos para argumentar por qué creo que 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.

2. Desarrollo de Componentes Web y Recursos

Short description:

¿Quieres usar TypeScript o JSX? Echa un vistazo a WebComponents.dev para obtener plantillas que te ayuden a comenzar con el desarrollo de Componentes Web. Open Web Components proporciona pautas y mejores prácticas para un desarrollo consistente. Explora WebComponents.org para encontrar soluciones existentes y añadir las tuyas propias. Crea fácilmente aplicaciones WebXR sin necesidad de tener un amplio conocimiento de tecnologías subyacentes como 3JS y Unity.

¿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.

3. Componente Web Model Viewer

Short description:

El Componente Web Model Viewer me permite mostrar modelos 3D en Realidad Virtual y Aumentada sin necesidad de conocer las tecnologías subyacentes. Creé un juego de Tic-Tac-Toe WebXR con chat de voz utilizando este componente. Echa un vistazo a la demo en xoxr.games.

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.

4. Usando Componentes Web con Frameworks y Bibliotecas

Short description:

Los Componentes Web se pueden utilizar en tu framework favorito o por sí mismos. Consulta custom-elements-everywhere.com para ver qué tan compatibles son los Componentes Web con varios frameworks y bibliotecas. He creado un conjunto de Componentes Web para el SDK de Cliente Vonage, que se pueden utilizar independientemente del framework. Puedes incluirlos en tu aplicación y darles estilo para que coincidan con tu diseño. Encuentra más información en mi serie de blogs sobre Componentes Web.

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í.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Day Berlin 2022React Day Berlin 2022
34 min
It's Time to De-Fragment the Web
Top Content
Over the past few years, the number of web frameworks available to us has exploded. In some ways, the breadth of choice is a clear win for our ecosystem. However, for many of us, it also comes with harsh drawbacks: - Have you ever used a popular open-sourced component built for framework A, and wished it existed in framework B? What about a design system library? - Does your company have frontends built in different frameworks, and your web teams are frustrated about the wasted hours needed to achieve a consistent design system? - Does your team build SDKs for web frameworks, and must manually re-write them for each framework? The solution to all 3 of these problems exists today. To fully understand it, we must first examine today’s web frameworks, re-think what a component should look like, and introduce a new Intermediate Representation of our components. This is what we have done at Builder.io when we created Mitosis, and we’re excited to share it with everyone.
JSNation 2023JSNation 2023
29 min
The Good, The Bad, and The Web Components
There has been no shortage of both fair and unfair criticism toward Web Components from a wide range of folks that build for the web, including but not limited to JavaScript Framework authors in supposed competition with the platform. In this talk I'll show you how to navigate and simplify the multifaceted landscape of web components, satisfying common criticisms and showing how you can Use the Platform most effectively today.
JSNation Live 2021JSNation Live 2021
28 min
Web Components, Lit and Santa 🎅
Get started with Web Components – enabling you to define new HTML elements that work everywhere regular HTML does. This talk will focus on Lit, a suite from Google that helps you create WCs with features you'd expect like data-binding and declarative definitions. It'll also cover how we've used them to build one of the web's jolliest sites, Google's Santa Tracker 🎅
React Summit US 2023React Summit US 2023
21 min
Authoring HTML in a JavaScript World
 In this talk, Tony shows how an authoring and semantic HTML-first approach to JSX template work leads to more readable, maintainable, and accessible UI components. He demonstrates how to think through implementing a UI prototype in a semantic way, authoring HTML before visuals. He shows how accessible markup improves performance, reduces DOM size, minimizes time spent on CSS, and reduces cognitive load not only for developers, but also for all our users, no matter how they consume our sites and applications.
JSNation 2022JSNation 2022
20 min
Immutable Web Apps
Resolving dependencies when they are all bundled together is easy. Resolving dependencies when they are in being loaded via script tags is much more challenging. The goal of this talk is to explain how Meltwater handles dependency resolution when building native Web Component based applications that rely on packages published by many different teams.
React Advanced Conference 2021React Advanced Conference 2021
32 min
Let's talk about Web Components
Before the dawn of some of the most popular frameworks (read: React and Vue), there was Web components. Web Components take one of the best parts of these frameworks (reusable components) and combine it with the best parts of web development (native browser support and not needing to set up a build process). As if that's not enough, web components allow you use the same functions across any framework.If at this point, you're wondering "If web components are so awesome, why haven't I heard about them before?", then you're in luck because that's exactly what this talk is about.In this presentation, we'll take a look at what web components are, why web components are awesome, why web components can be a pain and how we can use web components both as a standalone tool and together with frameworks.

Workshops on related topic

JSNation Live 2021JSNation Live 2021
184 min
Web Components in Action
Workshop
The workshop extends JavaScript programming language knowledge, overviews general software design patterns. It is focused on Web Components standards and technologies built on top of them, like Lit-HTML and Lit-Element. We also practice writing Web Components both with native JavaScript and using Lit-Element. In the end we overview key tooling to develop an application - open-wc.