Primeros pasos con Lit

Подписаться 145 тыс.

Просмотров 6 тыс.

50% 1

Aprende a usar Lit en un proyecto desde cero, donde crearemos nuestro primer componente.
Lit es una librería para el desarrollo de Custom Elements del estándar de Web Components. Con Lit podemos mejorar el estándar con una librería, o mejor dicho: micro-librería, porque su peso ronda los 5 Kb. Esto nos permite una experiencia de desarrollo mucho más amistosa de los componentes, aportando binding, un potente sistema de templates, sincronización entre atributos y propiedades y mucho más.
Verás como crear un proyecto Javascript, instalar Lit y crear tu primer componente.
El código y explicaciones adicionales en este artículo desarrolloweb....

Опубликовано:

10 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 31

@nicoux9581 2 года назад

Genio Miguel 👏 Siempre con ejemplos para aprender y buena documentación. Muchas gracias

@midesweb 2 года назад

Muchas gracias Nico! :)

@javierfuertes487 8 месяцев назад

Buenisima explicación! Un componente sencillo pero que ayuda a aprender los conceptos basicos muy rapidamente :)

@deswebcom 7 месяцев назад

Gracias!!

@isanchezd 2 года назад

Para mi esta librería debería de tener mucha más visibilidad. La estoy usando en mis proyectos personales y no veo que tenga nada que envidiar a vue o a react (salvo por el ecosistema de librerías y frameworks) Tenéis mi like :)

@midesweb 2 года назад

Gracias Ivan!! de verdad que es fantástica sí... gracias por el like!

@martinemanuel8239 2 года назад

Hola es posible utilizar sass , bootstrap?? Tuve problemas también utilizando @import en css

@JoseQR 2 года назад

Gracias por el contenido, estoy incorporando esta tecnología con typescript en mis proyectos pero aún tengo mucho por aprender.

@midesweb 2 года назад

Gracias José por comentar!!

@arj171 Год назад

Excelente introducción, gracias por el conocimiento

@deswebcom Год назад

Genial, espero que le saques partido a Lit!

@gustavoarmitano2786 Год назад

Excelente, muchas gracias.

@deswebcom Год назад

Genial! Espero que puedas unirte al movimiento Web Components!!! cualquier duda estamos por aquí!

@tiagomantilla6614 2 года назад

Gracias por el.video...

@MerovingioMerv 2 года назад

Buen video.

@FrankGP.com. 2 года назад

mucha gracias

@borisbarzotto5785 Год назад

@GierIbac 11 месяцев назад

Me gustaria saber si con lit puedo hacer routing para cambiar lo que renderice y dar permisos a diferentes usuarios

@deswebcom 11 месяцев назад

Hola, la librería sirve para hacer componentes web. Nada te impide hacer un componente de routing, pero generalmente sería más lógico que te apoyes en otras librerías. Puedes usar el sistema de routing de los PWA-Helpers, que es lo que uso yo para aplicaciones sencillas, o cualquier otro que quieras usar. El equipo de Lit está trabajando en un router que está aquí www.npmjs.com/package/@lit-labs/router lo que pasa es que usa una característica que solo está en algunos navegadores, por lo que no pasa de ser algo experimental todavía.

@MrLeafar01 2 года назад

El mio ha sido el Like 100... así que ya podéis seguir con este curso sobre Lit

@deswebcom 2 года назад

Gracias por avisar Rafael!! Publicaremos el siguiente vídeo pronto!!

@deswebcom 2 года назад

Mira, acabo ver que ya publicamos la continuación de este vídeo, incluso antes de haber llegado a los 100 likes jajaja La tienes en ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9cA7zucG6Eg.html dentro de poco espero llegaremos a los 100 likes en el segundo vídeo para publicar la tercera parte.

@mikehurtado4772 Год назад

Cómo lo pasas a producción?

@deswebcom Год назад

Bueno, ahora uso Vite que lo hace extremadamente simple. Antes usaba Webpack que daba más trabajillo. Te recomiendo conocer Vite ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5O9mdl4s1l0.html

@SebastianPerezG 2 года назад

Vas a continuar el tutorial de Phaser , porque me interesa bastante , gracias !!!

@midesweb 2 года назад

claro!! cuando lleguemos a los likes en el último video!! has visto el manual de desarrolloweb que está mas avanzado?

@v4ldevrr4m47 2 года назад

bueno veo que dentro de la clase vas haciendo lo que se suele hacer en un archivo .svelte solo que en svelte no tienes que llamar ninguna funcion ni definir clases solo escribir html css y js normal. Podria decirse que todo esto queda embebido al ser un file .svelte. tal como mencionas la ventaja es poder reutilizar esto en cualquier otro proyecto aun de otros frameworks adicionando solo esos 5k . Solo que faltaria ver estos tipos de proyecto en que se atreva uno a realizar tales mezclas .

@deswebcom 2 года назад

No he probado Svelte, pero si está basado en Web Components es una buena opción seguro. Lo probaré para poder decirte algo. De todos modos, con Lit estás absolutamente pegado al estándar, si mañana quitas Lit el Custom Element nativo sería prácticamente el mismo código. Creo que esto es importante a la hora de elegir una librería para Web Components. Además, las partes de Lit como la parte de los templates dinámicos las están evaluando para incorporar al estándar de Javascript, lo que nos permitirá depender menos de librerías y quedarnos más con lo que el navegador permite... lo que queda claro es que poco a poco las librerías son menos necesarias para conseguir la experiencia y ventajas de abstracciones de componentes viejas como React. Ahí sí que no hay discusión.