No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Conclusiones

22/22
Recursos

Aportes 28

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

  1. No es SEO Friendly: Como vimos en el curso, todos los Web Components necesitan de JavaScript para poder ser renderizados, y de hecho dejan la etiqueta personalizada del componente ahí después de ser renderizado. Los robots de búsqueda (aquellos que se encargan de indexar tus páginas en los buscadores) no interpretan JavaScript (o de repente algunos sí), pero si nos quedamos en el caso de que no interpretan JavaScript (que es lo más común), tu página no sería indexada porque no encontraría nada dentro de ella, ya que todo se renderiza con JavaScript. Si quieres ver lo que vería un robot de búsqueda, te recomiendo que des click derecho sobre tu página y le des a “Ver código fuente de la página”, como ves, no hay nada de información ahí, simplemente etiquetas HTML pero no tienen nada de contenido, entonces estos robots no encontrarían nada de contenido en tu página y no te indexarian.
    .
    Claro, surgen algunas alternativas para esto, de hecho se me hace curioso ver que existe tecnologías de Server Side Rendering para web components 🤔, les recomiendo darse un paso por estos enlaces que hablan sobre ello:
    .
    https://github.com/WICG/webcomponents/issues/500
    dev punto to/steveblue/server-side-rendering-web-components-320g
    .
  2. Solo manejan la parte de modularización de componentes: Los Web Components son útiles para dividir todo en componentes y poder tener un código más organizado, sin embargo, solo se limitan a eso, a diferencia de frameworks como React o Vue que trabajan muchas más features que solo usar componentes.

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

![]()

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
.

.
Saludos 😃

Hice un product card y lo subí a npm para probar.
si lo quieren instalar aquí dejo el LINK

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">
              <h2>${this.title}</h2>
              <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);

Gran curso, ya falta poco para los frameworks y librerias.
😄

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.

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!

muchas gracias Diego, es un maravilloso curso.

Muchas gracias, profe por el curso. Quedó padre el curso. Saludos.

es excelente curso pero creo que falto la parte de generar un post me hubiera gustade que se mostrara una parte de como mostrar y ocultar partes del componente creado para hacer aun mas reutilizable los componentes.

Este curso es una maravilla!

Me gusto mucho este curso, ya quiero empezar a usar este conocimiento en mis futuros proyectos. Gracias Diego.

¿alguien ha hecho implementaciones sobre fetch de datos y manejo de eventos?
También quisiera saber si alguien ha implementado bootstrap. No logro encontrar información muy acertada al respecto 😕

Me surge la idea del proyecto de rick y morty(Proyecto realizado en SPA con vanilla javascript), hacerlo con webComponents y hasta usar componentes de terceros.

Buen curso profe Diego

b

Gracias Maestro

Personalmente creo que los frameworks js resuelven de mejor manera el hecho de crear algo de buena calidad en menor tiempo (Lo que todos queremos). Sin embargo creo que las opciones “nativas” en este caso Web Componentes siempre serán la mejor opción. No es lo mismo hacer un PHP con 10-15 lineas para consultar algo a tener capas y capas de abstracción que trae un framework (siempre hay ventajas y desventajas).

Al igual que alguien más menciono en otro comentario, no me animo a utilizarlo en un proyecto “real” (al menos por ahora) pero veo Web Components como la oportunidad de comenzar a compartir código de manera más abierta y desligada de si tu amigo/conocido que trabaja en otra empresa usa react, vue o angular.