Introducción a Web Components sin Utilizar FRAMEWORKS

[@hdeleonnet]

Si te ha gustado el video puedes apoyarme comentando y dejando un Pulgar Arriba 💻 CURSO de Patrones de Diseño en C# y ASP .Net: www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970 Enlace para seguimiento: hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/ Cuenta de twitter: twitter.com/powerhdeleon Github: github.com/powerhdeleon/100DaysAsAFrontendDev

[@AndresVanegasShy]

JS puro y duro. Componentes desde cero. Excelente explicación💪.

[@gabrielalfonsomartinezmora6457]

Excelente explicación faltaría el método static observedAttributes, el attributeChangeCallback que permite observar las propiedades de los componentes en caso de cambios y para poder emitir eventos puedes usar event listener usando el API CustomEvents con eso tienes un componente funcional de entrada y salida de datos hacia el padre

[@dejerzvods5705]

Excelente explicación mi hermano, muchísimas gracias! No me habían explicado este tema tan bien antes

[@normanejm]

Increible. Gracias hector y fácil de entender. Solo una duda. Entiendo que es para funcionanlidad. Pero para SEO? Si no sirve. verdad?

[@sebastianmedina5106]

Muchas gracias por el video !

Gracias excelente aporte

[@elCOMPAiler]

Buen video y explicado excelente, había usado componente s en angular y no sabía cómo crearlos desde cero, estaría bueno explicar un tipo ngModule o routing con puro JS. Creo es lo que les pasa a la mayoría, que utilizamos porque así es el framework pero no sabemos lo que hay detrás. Gracias, aprendí algo nuevo 🤟

[@kevyyar]

Me encantaría trabajar con el paradigma de clases para todos mis proyectos. Pero es un poco complicado entender este concepto para mi. Que me recomiendas campeón?

[@gamuro6977]

me gusta que identas las etiquetas como funciones en vez de como en html xD

[@cvieille]

Hola, muy bueno el video. En mi equipo de desarrollo justamente estábamos hablando de hacer esto hace pocos días atrás. Quisiera saber como haces para pasar un token cuando consumes una api con seguridad???

[@DannyFJhonstonB]

Excelente tema.

[@danilu84]

Me encantan tus videos siempre aprendo cosas nuevas

[@juancarlosmontanoalvarez4443]

Comentario para el algoritmo excelente video...

[@davjmz5847]

que buenos videos, eres el metalero más cool que he conocido :v

[@yeyodev]

Bastante bueno el video crackkk

[@konycatstudio9762]

Es esto parecido a la forma en que funciona react js?

[@dlerma1987]

Si, pero sin usar frameworks de terceros, como React Js, Angular, etc Simplemente usa lo nativo de HTML y Javascript

[@gustavomaranook]

Esto es con lo que está hecho ReactJS o cualquier otro framework JS.

[@benedictt29]

El puto amo! Gracias bro

[@bag082]

Excelente video y explicación!

[@agustinklenuk5053]

Vamos pibe

[@carlos9484]

Muy bueno bro 💪🏻💪🏻

[@MauricioGalaviz]

Excelente 👌

[@MARIO78513]

Hola bro, duda, y cómo se implementaría con un api que se requiera una key? Lo proceso primero en el back y luego muestro con js. Saludos!!

[@Bravenap]

Muy interesante los web components. Aunque me parece que difumina la separación entre back y front e incita, una vez más al hacerlo todo más fácil, a trasladar lógica al front

[@ryfr1702]

a pelo, como tiene que ser! :-)

[@LocalGhost_8080]

En el trabajo estamos experimentando con web components. El tema para cargar datos de un componente a otro (mostrar el detalle de un elemento de una tabla al darle click a la fila p. e.) lo estoy solventando con un eventBus. Ustedes cómo le harían?

[@johangarzonjc3376]

Muy Pro

[@hugobravo7173]

👍

[@albertocruz1907]

Hola Hector.. Como siempre las gracias infinitas hacia tu persona, nos aportas mucho a la cominidad de latam con todos tus contenidos. Tengo un error en el ejemplo y es cuando agregas las las etiquetas div de este manera. ' ${element.name} ' Mi vs code me marca esto como algo erroneo, con error: Unterminated string literal. Literal de cadena sin cerrar.. Mas sin enbargo no es asi, lo tengo igual que tu ejemplo y no lo quiere asumir, incluso cuando diste formato al title Lista de Usuario para que se viera en negrita tampoco lo quiso asumir. Que podria ser esto Hno, gracias mil..

[@hdeleonnet]

La comillas correcta es está ` no está '

[@williamprogramer4168]

⭐⭐⭐⭐⭐

[@cristoferalbertiibarra9711]

Se ve que te gusta Pantera:))

[@shanealma612]

hola, disculpa, soy nuevo en la programación, pero tengo una duda, no se podría hacer ésto mismo con una función?, simplemente agregaríamos los items con appendChild o es más, crearíamos el 'div' con un createElement, y de la misma manera, podríamos usarlo en cualquier parte de nuestra web, o de esta manera como tú nos enseñas el código se genera más rápido?, buen día.👍.

[@alvarohrv]

tengo la misma dudo, voy a indagar trabajar con objetos, pero en mi mente esta trabajar a punta de funciones y manipulacion del DOM

[@andresfelipeyanquen7194]

Se podría hacer pero en ese caso el componente no sería reutilizable

[@gustavomaranook]

Si se puede, y es reutilizable. Solo que tenés que tener en cuenta de utilizar un ID o NAME (o algún atributo custom que hagas) para diferenciarlos en el etiquetado HTML si es que cada uno debe mostrar cosas diferentes. Los uso así como mencionas, pero creo (tendría que reanalizar mi código) que de esta forma que se muestra en el vídeo es más intuitivo y más prolijo.

[@marcelopuppio7174]

[@josel4484]

Que satisfactorio es crear templates con código nativo

[@jesusvazquez527]

Te ganaste una cheve

[@ichsistemas5326]

¿Se podra hacer rutas (url) con Vainilla JS?

[@LocalGhost_8080]

Creo que no mi buen. Yo lo que hice fue levantar un mini server express para servir los archivos html. De esa manera me quedó mucha flexibilidad con el enrutamiento. Aunque bueno. Yo quería evitar el uso de node pero fue la manera que encontré

[@SofiDev]

2:46 Te salta el idoma a cada rato porque no estableciste la propiedad lang en la etiqueta html: 'lang="es"' '' Esta etiqueta ayuda a los navegadores en que idioma está tu sitio web. Y al no tenerla pues se vuelve loca XD