¿Qué son los Web Components?

De hecho, la construcción de un sitio web basado en componentes es algo que se ha venido trabajando últimamente, y es que es increíble, imagina que tú tienes un widget en tu página web. Ese widget puede fácilmente ser un componente, y tú no vas a programar ese widget cada vez que quieras usarlo (y mucho menos copiar y pegar código), tú simplemente vas a encapsularlo como un componente y a usarlo cuando quieras 😄
.
Es una filosofía similar a la Programación Orientada a Objetos, ya que permite la reutilización de código, y sí, con WebComponents tú puedes tener una etiqueta llamada: <mi-super-etiqueta> 😄

⚙️ ¿Qué son los Web Components?

• Los webs components son como piezas de lego
  • Son partes de código las cuales se pueden reutilizar para obtener un gran resultado
• Estan creados para ser re utilizables
  • Encapsulando código para poder reutilizar en un proyecto o incluso diferentes proyectos sin necesidad de repetir el código
• Todos los frameworks dicen tener la filosofía de ser como piezas de lego
  • Los webs components logran cumplir el objetivo completo
    • Por qué se puede implementar web components en cualquier proyecto

Los web Components son primitivos de bajo nivel que te permiten definir tus propios elementos HMTL

• Te permiten:
  • Generar etiquitas HTML
  • Utilizar Web Standards para construirlos
• Las Web API’s para utilizar web components son
  • HTML Templates
  • Custom Elements ⇒ Define la etiqueta
  • Shadow DOM ⇒ Encapsula el código
  • ES Modules ⇒ Módulos para importar y exportar código entre archivos JS

RESUMEN: Los web components son fragmentos de código frontend los cuales se pueden usar en cualquier circunstancia sin importar las librerías o frameworks que uses. Para realizar este objetivo están compuestos por una serie de web API’s

esto se pone muy interesante, ya empiezo a sentir el poder!!

MY NOTES WHAT ARE THE WEB COMPONENTS

Los web components están hechos para ser reutilizables, encapsulamos cierto código que podemos reutilizar en diferentes partes de nuestra aplicación o diferentes aplicaciones, sin tener que repetir el código.

El hecho de que son como piezas de lego no es algo tan literal ya que porque no se puede reutilizar los componentes, pero los web components si pueden ser reutilizados son hechos para eso y para no solo reutilizarlo en tu aplicación si no que en otras tecnologías también seria compatible.

Los web components son primitivos de bajo nivel que te permiten definir tus propios elementos HTML

Una vez tienes un componente listo es como si tuvieras una etiqueta de html ya lista para ser usada

Los web components están construidos con web apis

• HTML Templates : etiquetas
• Custom Elements: algo que nos ayuda a definir una etiqueta que se convierte en una etiqueta estándar después
• Shadow DOM: es lo que nos ayuda a encapsular
• Es Modules: Los módulos que nos ayudan a importar cierto código de js a otro código de js y reutilizar ciertas cosas

Resumen
Los Web Components son similares a las piezas de Lego ya que el conjunto de todas ellas pueden desarrollar una gran aplicación. En resumen los Web Components son código encapsulado que se puede reutilizar en cualquier parte de tu página.

" Los Web Components son primitivos de bajo nivel que te permiten definir tus propios elementos HTML " - Utilizamos Web Standards para construirlos.

Para todo esto utilizamos Web APIs;

• HTML Templates.
  • Es una etiqueta.
• Custom Elements.
  • Esto nos ayuda a definir nuestra etiqueta para que se convierta en un estándar.
• Shadow DOM.
  • Aquí es donde se produce el encapsulamiento.
• ES Modules.
  • Aquí es donde utilizamos el importar y exportar código de JavaScript.

<broma>
Solo entendí que si sé Web Components puedo comprarme un Bugatti.
</broma>

“DROPED THE MIC” 🤣

Aquí distraído viendo la ISS de Lego que tiene Diego de decoración

Hola:

Una aportación complementaria:
https://www.todojs.com/web-components-pasado-presente-y-futuro/

Saludos 😃

genialísimo.
si se siente como magia entonces no sabemos bien lo que estamos haciendo o cómo funciona realmente la herramienta, método o tecnología que estamos usando.

Esto no es del todo cierto … existe los micro front-ends. Falta un cursito de esto en Platzi

Los Frameworks y Librerias en vez de ser como piezas de lego son como rompez cabezas 😃

Problema que resuleve?

El ecosistema de Js es sumamente toxico, puesto que entre tantos Frameworks y librerias que existen ahi muchos que no se llevan del todo bien con el otro tomemos el ejemplo de Angualar el inicio y escalabilidad del sitio debe ser mayoritariamente con todos los recursos que se rodeen de Angular

Usar web componets resulve esto usando vanilla js y sus estandares que son totalmente agnosticos de cualquier framework o libreria

Veo la palabra clave de los Web Components como “Compatibilidad”

Parece magia 😮 ! jeje

.

Son como piezas de lego reutilizables para poder armar cosas. Encapsulamos código para utilizarlo
en diferentes partes. Los frameworks y librerías NO son así.

Los Web Components son primitivos de bajo nivel que permiten definir tus propios elementos HTML.

Los Web Components están contruidos con APIs que existen en el navegador (conocidas como Web APIs),
estas son:

• HTML Templates
• Custom Elements
• Shadow DOM (la magia)
• ES Modules