No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Conclusiones

22/22
Recursos

Aportes 27

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淰er 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鈥檚 (y s铆, ya s茅, no todo son SPA鈥檚), 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 鈥渧er 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.

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.

Debo decir que los web components me volaron la cabeza. Excelente curso!

muchas gracias Diego, es un maravilloso curso.

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

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!

Aqu铆 les dejo mis apuntes del curso, espero les sirvan 馃槂
https://www.notion.so/Curso-de-Web-Components-con-JavaScript-a833f1a3748848c294aa445de22dbc9b

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 鈥渘ativas鈥 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 鈥渞eal鈥 (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.