📚 Tutorial Lit desde cero ¡CREA WEB COMPONENTS de forma declarativa y reactiva! ⚛️
ฝัง
- เผยแพร่เมื่อ 21 ธ.ค. 2024
- Lit es una biblioteca de Google que te permite crear Web Components de forma rápida y sencilla mientras mantiene un rendimiento brutal y mejora la experiencia de desarrollo gracias a añadir reactividad y ser declarativo.
En algunos casos recuerda un poco a React, especialmente cuando se trabajaba con clases, pero tiene su propio camino. Especialmente porque está muy basado en Web Components.
▶ No te pierdas más directos en: / midudev
Por cierto midu, trabajo para ING españa como outsourcing, y efectivamente, están empezando a migrar a Lit. Yo conozco Lit desde polymer 2 y fue mi primer framework front incluso antes que angular y react
Así se habla, ni en los tiempos antiguos en guerra se mata al mensajero! xd, buen video hermano éxitos.
Gran contenido, coincido: lit es una gran promesa, a más contenidos, que es por acá. Abrazo desde Arg.
Inicio de TH-cam y sale esta belleza. Tremendo video 💥
Desde que salió LitElement he seguido el proyecto de cerca. Realmente siento que puede definir el futuro de ES.
Ahhh Mil gracias por este video. Es lo que estaba esperando. Eres uno de Los mejores tutores del mundo 🙏👌👍
Acabo de ver este tutorial y la explicación es grandiosa espero profundices Lit y sigan haciendo contenido :D
Midu, extremadamente claro tus primeros minutos. Gracias!
Gracias!
Muchas gracias, Midu. Espero más adelante nos compartas más contenido sobre Lit y Web Components! 😄
Excelente tutorial, como te decía, yo llevo conociendo esta librería desde que era polymer 2, y este vídeo me ha ayudado a refrescar el conocimiento!
genial tutorial , en el min 43:40 el simbolo "!" es para decirle al compilador que no es null, el opcional es el "?", sos gigante midu saludos!!
Lo conocí hace poco y lo comencé a usar y me ha gustado mucho, es muy interesante y mas creando monorepos
Súper interesante 👌🏻
Me viene genial para reemplazar un componente en diferentes codebase sin tener que hacerlo para cada una por separado 🔥
Midu explica muy bien, tiene el don, gracias
Me encantó esta librería, sin bromas, dan ganas de aprenderla. 🔥
Eso digo yo!
Justo lo que andaba buscando!! Genial; porque la verdad React o Angular están bien...pero es mucho código. (Habría que ver el tema de escalado). Cómo era de esperar, tienes que codificar un poco más que con React o angular; precisamente porque es muy limpio.
Muy útil. Llevo ya unos años trabajando con Vue y echo en falta algo que sea 100% JavaScript y no tan "framework".
Spring framework trabaja similar con anotaciones aunque se usa para el back y es muy potente así que le veo futuro a lit, me parece que crecerá muy rapido
muy interesante esta tecnología. me parece que integra el trabajo de backend con frontend como un todo.
Cómo? 😕
Partial templates es una nomenclatura que viene de antes: Backbone y Handlebars/Moustache
Gracias... eres el mejor... una sugerencia para otro video... me encantaría saber sobre three.js [creo que es el futuro de la web (el 3D)] por cierto (no he visto nunca a nadie escribir con tanta facilidad como a ti).... sigue así ...
excelente haber la utilizare para hacer un landing page.
Cuando hagas esa "landing page", te recomiendo vigilar la ortografía ;)
¿Haras mas videos sobre lit, o algun curso extra?
Hola al dia de hoy con la salida de Lit 2 ya esta full soportado full SSR (server side rendering) ya se estan haciendo muchisimas cosas con esto
Como explico varias veces en el vídeo, la funcionalidad está en beta: www.npmjs.com/package/@lit-labs/ssr
Si tuvieras que elegir entre lit y react para un proyecto tipo "just-eat" por cual te decidirias? ventajas / desventajas?
lit, el wc es nativo a diferencia de react que viene siendo un super wc inmenso porque al final lo inyecta en un div root
se puede usar lit como "microfrontends", para mezclarlo con equipos con angular y react?
Está muuuuy interesante 🙌
Totalmente, Pablo! Y creo que las últimas versiones lo han hecho todavía mejor!!
Me gusta la idea de los web components y el planteamiento de Lit, lo que no me gusta es la utilización de class tanto en web components como en Lit, al final las clases en JavaScript solo son azucar sintáctico y no aportan nada.
Por eso me gusta más en enfoque de Hybrids, que busca solo la utilización de objetos y funciones, y nada de clases.
Una comparativa con sveltekit? Me gusta más o se me hace más fácil sveltekit
41:00 no entedi esa parte, en el ejemplo de la documentacion del 2023 usan el spread operator como propagador
Y ese proyecto crack, le damos jeje 🤪
Hola midu te sigo desde hace ya un tiempo, gracias a tus posts en Linkedin. Eres muy bueno en lo que haces, primeramente felicitaciones! segundo, al final hiciste el comentario que habia posibilidades de hacer un proyecto con esta tecnologia la llegaste a realizar?
Me gusto esa librería... Cuando hacemos una app
Pero lit usa un empaquetador como webpack o vite?
Has echo curso de lit ????
Me pasas el enlace please
Una joya de video
Muchas gracias!!!
podrias hacer un tutorial de adapt framework (y toma tu like prro)
Excelente tu aporte
excelente tutorial gracias por compartir
google tiene angular y tira por lit?
Sería posible utilizar algún preprocesador de CSS?
Si con webpack o rollup todo es posible…
esto es lo mismo que litElement?
Sí, le han cambiado el nombre
este video de Midu se titula: The boy who lived .... to javascript⚡🤓
🤣
De diez
Siempre me pregunte porque el html se le pasaba una String literal así tan feo sin paréntesis, y resulta que se llaman template tags 🤯🤯🤯🤯
midu salio la versión 3... face falta un videooo
Has un video sobre alpine js, saludos
La falta de una versión estable de SSR compromete gravemente su uso en prod
Por el momento seguimos con react 🤓
jajaja yes!!!
@@kevinrivas802 x2 me quedo con React Native, la verdad se me hace muy cómodo? Incluso más que React puro, para hacer apps móviles y web. De hecho ya hasta hay un Fork de Microsoft para hacer Apps de escritorio tanto macOS como Windows.
En cambio otros frameworks son muy enredados como Angular y otras
qué versión de lit es esto?!
Cool :)
Gracias!
Me recuerda muchísimo a Angular, pero me parece un poco más complicado. Nunca me ha gustado tener los template dentro de los archivos de typescript.
Al reves... yo te diria que es mas sencillo. Esta bueno, no creo que llegue al nivel de Vue y React pero esta bueno
Hace poco lit element en una empresa pidiendo developers con experiencia en el :) jejeje
jajajajaja 10 años de experiencia
A mi no lo personal no me gusto lit no lo volvería usar, hice un proyecto para una empresa y me costo aprenderlo no hay mucha documentación en la web.
Se parece a Angular en varias cosas
También!!
son buenísimo tus videos.. y entiendo que tenes el super monitor, pero yo con mi monitor de 20 pulgadas y mi ceguera no veo nada.
la mayoria de los youtubers dan por echo que todos lo ven igual que el.. pero no es asi.. una pena.
Definitivamente prefiero Svelte sobre otros frameworks de JS para webcomponents. ¿Porqué?
1) Puedo utilizar lo que conozco de JS, HTML5 y CSS3 para construir un webcomponent sin saber del framework Svelte.
2) No necesito mezclar el HTML en el JS para generar código HTML que sea adaptable al componente. El template HTML es una cosa y el código para renderizarlo no debería verlo como desarrollador (como desafortunadamente funciona en React o Lit)
Svelte no funciona de forma nativa, tiene un proceso de compilación
Lit funciona nativamente con WC, no puedes usas componentes de svelte en otros framework (te casas con svelte)
En lit podes básicamente copiar un pegar todo un html y css tal cual sin modificar de algo nativo, el js lo agregas en el firstUpdated y listo, sin modificar nada, podes colocar todo por aparte, solo es es estilo de código
Adobe usa Lit y próximamente Google Chrome y varios proyectos de Google, el Internet eventualmente estará en webcomponents
Conozco un codigo que ya hacia eso desde hace 10 años.
Como sabes tanto 😟😟
Tengo 15 años de experiencia. No te compares.
@@midulive hooo entonces espero ser igual o mejor a ti un día. Gracias, sigue a si me gustan tus videos
@@midulive Que humilde 🙄
space x usa lit element ojo, Lit element fue al espacio XD
Yo sólo amo angular xd
hoy a muerto angular señores
que feas las clases, lindo un lit with hooks XD