Creación y Uso de Web Components Reutilizables
Contenido del curso
Carlos Eduardo Gomez García
Yohan Olmedo Bello Trejos
Markin Piero Pulache Guarniz
Fernando Quinteros Gutierrez
Yohan Olmedo Bello Trejos
Frank Casanova
Andres Felipe Pinchao Ramirez
Andres Menchaca
Luis Felipe Medina Rodriguez
Brian Domínguez Vázquez
Oscar Fuentes Esteves
Rodrigo Martinez
Kenneth Angulo L
Jorge Méndez Ortega
Zedovius .
Roberto Medina
Jimmy Buriticá Londoño
Kenneth Angulo L
Seba Cardoso
Jefred Bedoya
Daniel Andres Rojas Paredes
Rodrigo Andre Gutierrez
Guillermo Castaño Vèlez
José Alberto Ramírez Quiroz
José Alberto Ramírez Quiroz
Oscar Gomez
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 :D
.
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> :D
Buen aporte
buen aporte
⚙️ ¿Qué son los Web Components?
Los web Components son primitivos de bajo nivel que te permiten definir tus propios elementos HMTL
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
Muy buen aporte
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
Tremendo!
melo caramelo
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;
<broma> Solo entendí que si sé Web Components puedo comprarme un Bugatti. </broma>
"DROPED THE MIC" 🤣
¿Cómo logra el Shadow DOM encapsular estilos?
El Shadow DOM actúa como un campo de fuerza invisible alrededor de tu componente. En el desarrollo web tradicional, el CSS es global, lo que significa que una clase mal nombrada puede arruinar el diseño de toda tu página. El Shadow DOM resuelve esto creando un sub-árbol del DOM completamente aislado. Es como tener una habitación insonorizada dentro de una casa: lo que sucede adentro no afecta al exterior, y el ruido del exterior no penetra hacia adentro. Gracias a esta API nativa, puedes definir estilos genéricos como h1 { color: red; } dentro de tu componente con la total tranquilidad de que solo afectará al título de ese elemento específico, manteniendo el resto de tu aplicación a salvo de colisiones de estilos y comportamientos inesperados.
Sobre este tema tiene tiempo que lo vie por otro lado, pero tengo una pregunta que es lo que se muestra en SEO o en HTML semanticolas arañas de los vuscadores son capaces de entender estas estructuras?
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 :)
Que buen post
¿Qué pasa si combino componentes de frameworks?
Si intentas tomar un componente nativo de Angular y pegarlo directamente en un proyecto de React, el sistema colapsará porque cada framework habla un idioma distinto y tiene su propio motor de renderizado. Es como intentar encajar una pieza de un rompecabezas tradicional en un set de bloques de construcción. Sin embargo, si envuelves esa lógica o creas la interfaz utilizando Web Components, el navegador actúa como un traductor universal. Al estar construidos sobre las Web APIs estándar, el navegador simplemente ve etiquetas HTML comunes. Esto te permite tener una arquitectura de micro-frontends donde diferentes partes de una misma página web pueden estar construidas con tecnologías completamente distintas, pero conviviendo en perfecta armonía y compartiendo los mismos elementos visuales.
Gracias
Concepto Fundamental: Los Web Components como Legos Reales
A diferencia de los componentes de frameworks (React, Angular, Vue), los Web Components son verdaderamente reutilizables. Funcionan como piezas de Lego universales: puedes extraer un componente de una aplicación y usarlo en otra, sin importar la tecnología base, porque son estándares nativos del navegador.
¿Qué son técnicamente?
Las 4 APIs fundamentales
<template>.se podrian crear web components con un preprosesador de csss? que pasa con la accesibilidad de los web components? tengo que seguir practicas especificas para que sean accesibles? b
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"