Web Components con LitElement
HTML-код
- Опубликовано: 4 фев 2019
- LitElement es la clase base para el desarrollo de componentes. Con LitElement puedes crear tus elementos personalizados, del estándar Javascript de Web Components, para usarlos allí donde necesites.
En este vídeo aprenderás a usar LitElement desde un proyecto desde cero, creando un primer componente, creando su template, usando propiedades y eventos.
LitElement es la evolución de Polymer, creada bajo su filosofía "Use the platform", que se apoya al máximo en las características más modernas de los navegadores. 
Наука
Excelente. Gracias
Muy buena explicación y un ejemplo conciso y práctico para entender la librería. Muchas gracias!
Gracias a ti!
Muy buen video, y muy bien explicado crack. Ojalá hubiera más videos y personas como este hombre en YT.
Gracias!!
Sensacional! Gracias! :^)
Bien vídeo
saludos desde 2021. me gusta como explicas
Gracias Jeferson!! saludos!
muchas gracias , muy bien explicado!
Me alegro que te haya gustado!
Excelente video, se parece mucho a React. :)
Tienes razón. Se está pareciendo cada vez más a React. La tanda de métodos de ciclo de vida que tienen los componentes de LitElement me recuerda un montón también.
Al irse actualizando javascript en las funcionalidades que hacen los frameworks estos tendran a ir desapareciendo....
Miguel Angel: Porque usar LitElement pudiendo hacer WebComponents solo con Vanilla Javascript?
LitElement ofrece diversas mejoras encima de Web Components: permite un desarrollo declarativo y reactivo, sincronizando los templates con las propiedades del componente, permite sincronizar los atributos de la etiqueta con propiedades del componente, agrega métodos de valor en el ciclo de vida. Todo ayuda bastante a la hora de desarrollar y permite una experiencia mucho más agradable para el programador, mejora la mantenibilidad del código, etc. Todo ello en 7KB (Gzipped). Yo creo que las mejoras que ofrece son muy relevantes y merecen la pena para el peso que agregas. Además, con LitElement el código y estilo de desarrollo es extremadamente similar al del estándar, por lo que tus componentes están muy pegados a VanillaJS, lo que me gusta también bastante.
LitElement es el siguiente paso sobre Polymer? Me refiero a si sera algo así como lo que paso con Angular 1 y Angular 2, si ya no vale la pena invertir tiempo en Polymer.
Es que yo creo que nos estamos equivocando al hacer ese raciocinio. LitElement es Web Components. Está íntimamente ligado al estándar Javascript. Pesa 6Kb, por lo que usarlo no representa una carga para cualquier proyecto web. Cuando tú usas LitElement estás usando Web Components y es lo que todo el mundo debería de pensar y usar, en lugar de librerías como React que cargan innecesariamente al navegador para hacer cosas que éste ya sabe realizar de manera nativa. Usar React, es como usar jQuery. Es mejor hacer las cosas con Javascript nativo. jQuery o React no te aporta nada que no tengas ya en el navegador. Lo que hay que usar son Web Components y ya corre a tu elección usar LitElement o cualquier otra librería basada en Web Components. Yo personalmente pienso que, por el poco peso de LitElement y las cosas que te aporta, es muy conveniente usarlo en cualquier proyecto, además que el rendimiento de LitElement está muy por encima del de React.
@@midesweb ok, entiendo a lo que te refieres de los frameworks como React. Pero mi pregunta es sobre que pasará con Polymer. Si hoy tuviese que empezar un proyecto con Web Components, deberia pasar por alto a Polymer e ir directamente por LitElements ?
@@ZarateAdriel coloquialmente llamamos "Polymer" a "Polymer Library". Supongo que te refieres a eso. Esa es la primera apuesta para el desarrollo de web components del equipo de Polymer, que está en fase de mantenimiento. Todavía lo usan empresas muy importantes como los bancos BBVA, ING, o el propio Google, por lo que me figuro que mantendrán el soporte durante mucho tiempo. No obstante, para las personas que empiecen a usarlo, yo sin duda recomendaría LitElement, también creado por el equipo de Polymer. No solo porque es más nuevo y nos asegura la incorporación de todos los próximos avances que están por llegar, sino por la radical rebaja de peso y aumento del rendimiento, así como la adopción de más estándares nativos de Javascript y de la web. De todos modos, para que nos entendamos, se trata de simples clases base para crear componentes, por lo que en realidad superficialmente pueden ser bastante parecidos.
@@midesweb hahaha te mamaste con el primer comentario.. el hombre preguntando una cosa y le respondes otra haha, muchas gracias por hombre.
todo bien pero que pasa cuando subimos a un hosting nuestro proyecto? si nosotros tenemos el polymer-cli en local como sabra el navegador que hacer?
El Polymer CLI no deja de ser un servidor web en local con herramientas para desarrollo y llevar a producción el sitio. En el Hosting no te hace falta, ya que el propio hosting está sobre un servidor web. Lo que te hace falta es llevar a producción los archivos. De todos modos, hoy te recomiendo otras herramientas para llevar a producción un proyecto y desarrollarlo, una de ellas es Open Web Components open-wc.org/ o cualquier bundler como Webpack, que es el que se usa para React y otros sistemas. Incluso si quieres simplicidad Snowpack. Te recomiendo este vídeo para conocer algo más. ruclips.net/video/uhJCBYQ1XTs/видео.html