Curso de Lit
HTML-код
- Опубликовано: 10 июл 2024
- Primera clase del Curso de Lit de EscuelaIT
En esta clase explicamos qué son los Web Components, qué es Lit y luego haremos una introducción práctica al desarrollo de componentes usando esta librería basada en el estándar Javascript de Web Components.
Puedes encontrar más información en el Curso de Lit escuela.it/cursos/curso-lit 
Наука
Excelente clase!!!!, muchas gracias por compartir esta información
Gracias a ti! siempre es un placer!
Buen vídeo, a mí personalmente me gusta mucho AtomicoJS la librería de Matias Trujillo, ese enfoque funcional y más declarativo.
Matias es un crack!! buena elección!
De curioso llegue hasta aquí , gracias Freddy por mencionar Atomico JS 👏 ¿Miguel cuando un video juntos?
@@uppercod pues yo encantado siempre, ya lo sabes. te escribo!
Uhh eso estaría genial, sería de los primeros en ver ese vídeo, AtomicoJS ha cambiado bastante desde el primer vídeo que tiene en el canal de Desarrollo Web.
Saludos a los dos 🖖
@@falvarador gracias por el apoyo!!
Muy bueno como siempre. Recuerdo que desde hace años apostaste por esto... ¡Y ahora está maduro!
Desde luego! siempre creí en que es el camino! gracias!!
No estaba muerto, estaba de parranda
Adobe tiene unos elementos muy chulos
Demonios! que curso mas util! felicitaciones y muchas gracias! Este es un canal es espectacular! no se que pasa con las visitas???
Gracias por tu mensaje 😊
Yo tampoco sé lo que pasa con las visitas... no voy a quejarme pero ojalá youtube nos tratase con más cariño 😉
yo creo q lo hará, animo no mas!
Excelente explicación Miguel adicional más adelante vendrá el ciclo de vida de lit? En lo personal creo que es algo complejo de entender directamente en la documentación pero con tu experiencia y explicación estoy seguro que será lo más fácil del mundo. Saludos desde México 🇲🇽🙌
si claro tenemos una clase donde lo veremos.
Buen día Miguel. ¿Aún sigue vigente el curso de pago de Lit?
excelente video ultimamente me he visto todos los videos de lit y tambien eh hecho los ejercicios, pero hay algo que no comprendo ya van 2 tutoriales en los que usted usa el "getelementbyid" y el "addeventlistener " , sin embargo ustedes lo usan en lo que es el archivo index.html, para un navegador o en este caso los componentes, pero como puedo utilizar el "getelementbyid" y el "addeventlistener dentro de la estructura lit, es decir dentro de un archivo .js, por que al momento de hacerlo en un .js me sale que TypeError: Cannot read properties of null (reading 'addEventListener'), muchas gracias por estos videos
Hola! Sí que puedes. De hecho muchas veces es necesario porque quieres suscribirte a eventos que no dependen de los elementos que tienes en el template, sino por ejemplo del documento o de la ventana. Tendría que ver tu código para saber dónde está el problema, pero por el error parece que podrías estár intentando acceder a un elemento del template por su id y necesitas apoyarte en el shadowRoot. Pero es solo una suposición. Podrían ser mil cosas...
Se puede usar con tailwind? Y como se usaría solo un componente sin npm?
Podrías usar con Tailwind. La solución simple sería usar el denominado "light dom" para que no use shadow dom, lo que configuras seteando una propiedad del componente. Pero hay personas que lo han conseguido integrar. De todos modos, el uso de estilos globales no es muy habitual cuando trabajamos con web components, por lo que en la práctica no le veo demasiado sentido.
El día que el framework deje de utilizar tags de html mezclado en el código JS será un día inolvidable.
Existe la etiqueta de html y desde javascript se lo puede manipular sin mezclar javascript con html. Creo que este tipo de "herramientas" como Lit lo único que hace es agregar otra capa de complejidad a un proyecto. Eso de embeber html en javascript me parece una técnica muy de aprendices.
Para empezar no es un framework. Es una librería y, si me apuras, sería hasta más adecuado llamarla micro-librería. Si quieres puedes poner los templates en archivos separados, pero no lo considero necesario. Tener que editar un componente abriendo tres archivos, uno para el HTML, otro para el CSS y otro para el JS es un incordio, más aún cuando los componentes nunca son demasiado grandes, sino suelen ser archivos con muy poquito código, ya que si es algo complejo generalmente usarás la composición. De todos modos, a tu apreciación habría que comentar además que lo importante es la separación de responsabilidades y la librería lo separa correctamente, js, html y css van por separado, aunque sea el mismo archivo.
continuara el curso? excelente felicidades~!
Bueno, el curso completo lo tienes en EscuelaIT. En youtube hay una playlist donde voy compartiendo cosas con Lit: ruclips.net/video/XpmfpuUDxRI/видео.html
increible clase, pero tengo una pregunta, cómo podría pasar las propiedades de un componente a otro mediante un evento personalizado que lo escuche otro componente? hay algún vídeo que lo explique bien? muchas gracias
Creo que el tema de eventos y la interoperabilidad no lo he explicado en vídeos en RUclips, lo tienes en el curso en EscuelaIT escuela.it/cursos/curso-lit , o en el manual de desarrolloweb desarrolloweb.com/manuales/manual-lit
donde se puede acceder al curso completo de lit
Hola, disculpa no contestar antes... lo tienes todo en escuela.it/cursos/curso-lit
Me pasa que no me deja importar componentes de la librería WiredJS. Al guardar el import, desaparece. ¿A alguien más le pasa?
No entiendo muy bien tu problema... prueba si quieres con otro catálogo de componentes. Por ejemplo nosotros hemos desarrollado los dile-components dile-components.polydile.com/ y por ej otro catálogo q te recomiendo es shoelace.style/
como podrias editar el estilo de otro componente creado por ejemplo de c-button
return html`
NAV EXAMPLE
`;
}
Generalmente si el componente lo han creado bien habrán creado una serie de custom properties de css para personalizar el estilo. Seguramente esto te aclare cosas: desarrolloweb.com/articulos/variables-css-personalizar-estilo-componentes
Y lo de pasar a producción cómo va?
Depende un poco de cómo desarrolles, tu stack de tecnologías, etc. Mi recomendación actual es usar Vite, que facilita las cosas muchísimo. Te recomiendo ver este vídeo para que te aclares mejor: ruclips.net/video/NrXfZyvhGjA/видео.html o incluso si tienes un poco más de tiempo te recomendaría ver este otro vídeo: ruclips.net/video/5O9mdl4s1l0/видео.html
@@deswebcom Hablas de Lit en ese video de Vite?
@@mikehurtado4772 En el vídeo corto no lo sé, en el largo se muestra cómo se instalan y se usan componentes, y cómo se llevaría a producción una app.
acepten paypal :( quiero subscribirme y ver todos los cursos de lit..
Hola, Si escribes a contacto@escuela.it pueden ayudarte seguro. Gracias!!