Construcción de Plataformas con Web Components
Contenido del curso
Carlos Eduardo Gomez García
Hector Antruejo
Carlos Eduardo Gomez García
Samuel Pérez Bacilio
Juan Isidro Mejía Peña
Analía Río
Carlos Rafael Córdova Flores
Roberto Medina
Victor Marquez
Martin Mendez
Luis Daniel Hernández Guevara
Salvador Santander Gutiérrez
Paolo Joaquin Pinto Perez
Diego Andres Cardenas Caro
Sebastian Moreno Olivera
Johanna Marcela Orjuela Flórez
Matias Ezequiel Rivero
Bryan Figueroa
Jairo Andrés correa
Luis E. Gama Ramirez
Kenneth Angulo L
Jorge Méndez Ortega
Alejandra Sarahí Monroy Vélazquez
Cristian Nicolai Hernandez Rios
Juan David Murillo Giraldo
Jeison David Gonzalez Lopez
Andrés Pérez Díaz
Hmmm, vale... me pareció un gran curso, sobre todo para aprender sobre Web Components que es una tecnología nativa del navegador, de hecho tengo cierto hype por eso xD, sin embargo... No todo es color de rosa:(, Web Components está genial para cuando quieres trabajar con cosas nativas del navegador y quieres dividir en componentes sin tener que usar librerías externas, pero (al menos hablando con lo que vimos este curso), tiene unas cuantas desventajas que creo que es importante que todos sepan: .
. En resumen, siento que los Web Components están ok, pero no sería algo que use para un proyecto profesional por la desventaja del non SEO friendly y porque hay librerías que ofrecen mucho más y la parte de componentes solo hace parte de un todo, por ejemplo, Vue te ofrece reactividad, básicamente es una forma fácil de actualizar el contenido de un componente cuando el valor de una variable cambia, sin que tú tengas que hacer nada, te ofrece un router y te ofrece una forma sencilla de hacer SPA's (y sí, ya sé, no todo son SPA's), pero está ahí la posibilidad, además de que tiene la posibilidad de usar Server Side Rendering (lo cual quita el problema del non SEO friendly, es decir, al momento de cargarse la página sí carga todo el contenido de una vez y al dar click en "ver código fuente de la página" sí sale impreso todo el contenido, que es justamente lo que ven los robots de búsqueda). . Incluso, hay tecnologías directamente en el servidor como Laravel Blade que también te permite manejar componentes, y esto ya no es JavaScript, es directamente PHP que tu servidor se encarga de compilar y al ser desde el servidor, el SSR ya viene incluido 🤔. . Así que por todas estas razones y teniendo mejores opciones que son más avanzadas, te dan mejores features y ya resolvieron los problemas que Web Components tienen... yo no elegiría usar Web Components para un proyecto en producción 🤔. . Y ojo, no estoy diciendo nada negativo del curso (que sé que algunos lo interpretarán así ¬¬), el curso está excelente, me encantó conocer sobre Web Components y de hecho quiero hacer proyectos de práctica usando Web Components xD, pero hay que poner todo en una balanza y no solo ver el lado positivo, sino también ver las desventajas que traen, ya que tener estas dos visiones y conocer estas desventajas puedes ayudarte a decidir con qué tecnología trabajar a la hora de hacer un nuevo proyecto que será dedicado a producción :D
No es correcto lo que comentas, hay un monton de paginas que la primera carga es por ajax y el contenido de las páginas se indexada correctamente en los buscadores.
Para más informacion podeis buscar en la documentación de google por ejemplo https://developers.google.com/search/docs/guides/javascript-seo-basics?hl=es
y respecto al segundo punto te pongo un ejemplo de la potencia de los web components, Puedes crear un web componente para que renderice X elemento con una funcionalidad concreta, pero puedes hacer que use vue, y mañana en vez de vue use react sin necesidad de cambiar todas las llamadas al componente. La potencia que tiene es increible.
Un saludo.
Aunque lo que dices es cierto, no es la mejor práctica, ya que provocará que tu web sea más lenta para los buscadores. Siempre tenemos como objetivo lograr que nuestra página aparezca entre los primeros resultados, si le hacemos más difícil el trabajo a los crawlers de búsqueda entonces mal vamos. Es mejor que le des todo ya servido a los robots en lugar de pedirles que hagan un paso extra solo para poder indexar tu página. . Tal como lo dice el mismo enlace que pasaste, es posible, pero se sigue prefiriendo que el contenido ya llegue renderizado (además que no todos los crawlers soportan JavaScript): .
Ya nos descubriste!!
Jajajjaaj, esa soy yo 😂
Hice un product card y lo subí a npm para probar. si lo quieren instalar aquí dejo el LINK
Hola:
Dejo mi proyecto del curso, le faltan varias cosas pero como primera versión esta funcional, muestra varios tipos y marcas de tenis. . https://robmvsk.github.io/001-webComponents/Proyecto/index.html .
Mi primer componente componente creado con los conocimientos de este curso.
class myComponent extends HTMLElement{ constructor(){ super(); this.attachShadow({mode:"open"}); } static get observedAttributes(){ return["img", "title", "p", "svg", "span", "strong", "a", "button", "cancel"]; } attributeChangedCallback(attr, oldVal, newVal) { if (attr === "img") { this.img = newVal; } if (attr === "title") { this.title = newVal; } if (attr === "p") { this.p = newVal; } if (attr === "svg") { this.svg = newVal; } if (attr === "span") { this.span = newVal; } if(attr == "strong"){ this.strong = newVal; } if(attr = "a"){ this.a = newVal; } if(attr = "button"){ this.button = newVal ; } if(attr = "cancel"){ this.cancel = newVal ; } } getTemplate(){ const template = document.createElement("template"); template.innerHTML = ` <main> <div class="card-container"> <figure class="card-img"> <img src="${this.img}" alt="" srcset=""> </figure> <div class="card-body"> <h3>${this.title}</h3> <p> ${this.p} </p> <div class="card-price"> <img src="${this.svg}" alt=""> <span><strong>${this.strong}</strong><br>${this.span}</span> <a href="">${this.a}</a> </div> <button class="card-button">${this.button}</button> <p class="cancel">${this.cancel}</p> </div> </div> </main> ${this.getStyles()} `; return template; } getStyles(){ return` <style> :host{ --Pale-blue: hsl(225, 100%, 94%); --Bright-blue: hsl(245, 75%, 52%); --Very-pale-blue: hsl(225, 100%, 98%); --Desaturated-blue: hsl(224, 23%, 55%); --Dark-blue: hsl(223, 47%, 23%); } *{ box-sizing: border-box; margin: 0%; padding: 0%; } main{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding-top: 71px; font-family: 'Red Hat Display', sans-serif; background-color: hsl(225, 100%, 94%); } .card-container{ width: 327px; height: 567px; background-color: white; margin-top: 71px; border-radius: 24px; } .card-img{ width: 100%; height: 160px; display: flex; justify-content: center; align-items: center; flex-direction: column; } .card-img img{ width: 100%; height: 100%; object-fit: cover; background-color: azure; border-radius: 24px 24px 0px 0px; } .card-body{ width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } .card-body h2{ font-weight: 900; font-size: 20px; color: var(--Dark-blue); margin-bottom: 18px; margin-top: 38px; } .card-body p{ font-size: 16px; color: var(--Desaturated-blue); text-align: center; } .card-price{ width: 279px; height: 82px; background-color:var(--Very-pale-blue) ; border-radius: 15px; display: flex; align-items: center; justify-content: space-around; margin-top: 39px; } .card-price strong{ color: var(--Dark-blue); } .card-price span{ color: var(--Desaturated-blue); } .card-button{ width: 279px; height: 50px; margin-top: 24px; border-radius: 14px; border: none; background-color: var(--Bright-blue); font-size: 16px; font-weight: 700; color: var(--Very-pale-blue); } .cancel{ font-weight: 700; margin-top: 28px; } </style> `; } render(){ this.shadowRoot.appendChild(this.getTemplate().content.cloneNode(true)); } connectedCallback() { this.render(); } } customElements.define("my-component", myComponent);
Habrá curso de creadores de web components como stencil o lit element?
Uno de lit element porfavor
Si, por favor, un curso de lit
Gran curso, ya falta poco para los frameworks y librerias. :D
Hoy es muy comun encontrar sitios web trabajando con distintos frameworks, conviviendo en la misma aplicacion. De hecho he visto proyectos profesionales funcionando con web coponents + SSR. Son una tecnologia que cada vez coge mas fuerza. Me gusto el curso. Dejo mi resultado del proyecto trabajado por aca.
Wow, muchas gracias por este curso, ya siento el upgrade con cada curso de la escuela, muy pronto iré a por React.
Hola comunidad, les comparto el proyecto realizado a partir del curso. Algo curioso (como siempre aporta Retax) es que también podemos insertar estilos personalizados desde los atributos (al igual que hacemos con la información). Espero que no sea una mala práctica, y si lo es, espero que puedan detallar los motivos. Cualquier comentario va ser bienvenido.
Link del proyecto
Repositorio Github
Gran curso sinceramente, ahora si a empezar con react!
muy buen curso introductorio, con estas bases ya se puede comenzar a crear cosas geniales. porsupuesto que aún se puede profundizar mucho más pero ya depende de cada uno.
Gran curso, sobre esto de los web Components.
Me parece que son como un buen complemento, para cuando se utilicen para algo, sin embargo creo que no siempre son utiles.
Que alguien me corrija si me equivoco en eso.
¿Por qué es mejor evitar proyectos monolíticos?
Porque un proyecto monolítico se vuelve completamente insostenible a medida que crece y evoluciona. Imagina tener un archivo index.html de miles de líneas y un style.css global donde un pequeño cambio en el color de un botón rompe accidentalmente el diseño de otra sección debido a problemas de especificidad. Al dividir la complejidad usando Web Components, aislas el comportamiento, la estructura y los estilos de cada pieza de tu interfaz gracias al uso del Shadow DOM. Cada componente actúa como una caja negra independiente y segura. Esto significa que múltiples desarrolladores pueden trabajar en distintas partes de la plataforma simultáneamente sin causar conflictos en el código del otro, facilitando enormemente la escalabilidad, la detección rápida de errores y la creación de arquitecturas mucho más robustas.
Yo tengo una gran duda revisando no sé cómo podemos modificar los atributos directamente de un WebComponente por ejemplo.
// Gemero la referencia al webcomponent const $WEB_COMPONENT = document.querySelector("poke-card"); // Después genero el cambio de alguna propiedad name por ejemplo $WEB_COMPONENT.setAttribute("name", "nuevo nombre") // esto genera el cambio, pero no lo muestra en el componente
Lo cambia en el webComponent pero nunca internamente comentaban que hay que renderizar de nuevo, pero al hacer eso se duplica el Componente. alguien tiene un ejemplo donde si se genere el cambio de propiedad?
Hola, es como en el curso, hacemos uso de attributeChangedCallback() este se dispara cuando un atributo cambia y está observándose el atributo. Esto se hace mediante el método static get observedAttributes() dentro de la clase - este debería devolver un array que contiene los nombres de los atributos que se deben observar.
¿ Donde encontraré un curso avanzado de esto ? Consumo de API's
¿Cuál es el estándar para manejar un estado global con WebComponents?
en php en aluguna vez usaba los includes para evitar repetir el header y foooter en otras paginas
Debo decir que los web components me volaron la cabeza. Excelente curso!
