> Canales > # LitElement

Eventos anteriores en #LitElement

Primeros pasos con Lit

Veremos cómo comenzar un proyecto Javascript y cómo crear tu primer componente con Lit, la evolución de LitElement.

En este vídeo vamos a realizar una presentación práctica con los primeros pasos para desarrollar un componente con Lit. Veremos cómo crear un proyecto básico frontend para poder ejecutar los ejemplos y luego nos pondremos con el desarrollo de un componente sencillo.

El componente que vamos a desarrollar tendrá simplemente una vista, con un marcado y un estilo CSS que se aplicará sobre ese marcado. Es todo, un ejercicio bastante elemental para dar los primeros pasos!

Clase desarrollo PWA con Web Components y LitElement

Hoy tenemos una clase dedicada al desarrollo de aplicaciones fronten modernas y PWA, basadas en Web Components y LitElement.

Para desarrolladores web en general y entusiastas de los estándares abiertos, tenemos una clase hoy donde vamos a explicar cómo se desarrollan las aplicaciones basadas en Web Components. Con Web Components, el estándar Javascript, puedes desarrollar componentes o Custom Elements, realizando cualquier cosa que se te ocurra para extender el HTML. Puedes tener componentes sencillos y complejos, e incluso componentes que implementan el desarrollo de una aplicación completa.

En esta clase explicaremos cómo comenzar el desarrollo de una aplicación progresiva de una manera cómoda y cómo realizar el proceso desde cero, pero apoyado en distintas herramientas que nos permitirán mayor agilidad. Veremos además cómo desarrollar los componentes iniciales de aplicación, con las distintas pantallas que vamos a incorporar en el sistema, intercambiando vistas para mostrar cada una de ellas, y cómo integrar componentes de terceros para poder realizar un trabajo más rápido y productivo, con una mejor presencia.

Web Components: no esperes más y aprende en #programadorIO

Es el momento de aprender Web Components y beneficiarte de la mayor revolución del desarrollo Frontend.

En DesarrolloWeb.com llevamos años divulgando los Web Components. Hemos creído en ellos desde el principio y animado a miles de personas a usarlos.

Quizás hasta ahora no todos habían prestado la debida atención. Si es tu caso no hay más tiempo que perder. Debes saber que hoy Web Components ya tiene soporte TOTAL en los navegadores! Sí, en todos los navegadores, incluido Edge en su versión de desarrollo!

Así que, si no los usas, estás perdiendo el tiempo y desaprovechando la revolución más importante del desarrollo frontend de la historia. Qué es Web Components y en qué consiste esta revolución Web Components es Javascript estándar y por tanto una capacidad nativa de los navegadores. Son una serie de especificaciones, estándares de la W3C, que ofrecen todo lo necesario para extender el HTML y crear nuevos componentes (como nuevas etiquetas) capaces de hacer cualquier cosa que necesites. Con Web Components acabó la necesidad de usar frameworks frontend, ya que permite crear los componentes con capacidades nativas de Javascript, existentes en navegadores, y nada más. Por eso, es inevitable que Web Components entierre librerías como React o incluso frameworks como Vue o Angular, igual como ocurrió con jQuery en los últimos años. Al menos todos estos productos tendrán que evolucionar para adaptarse a los estándares, algo que puedes hacer tú ya. Pero si quieres seguir usando frameworks tampoco hay problema, ya que Web Components es compatible con todos: Angular, Vue, React... Por fin tenemos una herramienta transversal, que hará que nunca tengas que volver a desarrollar lo mismo dos veces, sea cual sea tu stack de tecnologías frontend.

Por qué usar Web Components

¿Tienes que mantener código de aplicaciones con distintas librerías y frameworks y necesitas escribir código de los mismos componentes con una y otra librería? ¿Tienes problemas porque has heredado proyectos con frameworks diferentes a los que usas habitualmente? ¿Te preocupa que el framework que usas pueda llegar a dejar de ser soportado? ¿no te encuentras a gusto con determinadas restricciones de tu framework actual? ¿Quieres abandonar de una vez librerías antiguas como jQuery y aumentar la versatilidad y rendimiento de tus sitios web? Si te encuentras en cualquiera de esas situaciones la respuesta es Web Components. Con Web Components puedes desarrollar componentes que funcionan en cualquier librería o framework perfectamente, capaces de interoperar de manera estándar, igual que cualquier otra etiqueta HTML. Aunque heredes código o aplicaciones basadas en otros frameworks, podrás seguir aplicando tus conocimientos de desarrollo basado en Web Components estándar y, por supuesto, podrás usar todos los componentes basados en Web Components también en ese framework. No tienes que preocuparte porque tu framework cambie de versión, o desaparezca con el tiempo, el estándar Web Components siempre estará ahí donde se pueda usar Javascript.

Web Components no te obliga a desarrollar con ninguna restricción en particular, por lo que serás libre de usar aquello que mejor encaje en un proyecto o en tus costumbres de desarrollador. Puedes aplicar tus propios patrones o simplemente usar los que vienen en los frameworks de tu preferencia. Con Web Components puedes mejorar sensiblemente lo que te ofrecen los plugins de jQuery, pues ofrecen una mayor reusabilidad, encapsulación, etc. No necesitas iniciarlos con código jQuery, ya que se ocupa el propio Javascript y su configuración se aplica a través de atributos en el propio componente. Además te ofrecen una cantidad enorme de nuevas utilidades para facilitar la programación y un rendimiento infinitamente más elevado. Aprender Web Components con nosotros Aprende con nosotros a crear Web Components en una clase gratuita este próximo martes 16 de abril. Comienza a disfrutar de todas sus ventajas en tu día a día como desarrollador. Verás lo sencillo que es y lo poderoso gracias a LitElement.

¿LitElement? sí, una herramienta creada por Google que agrega diversas utilidades adicionales en el desarrollo de Web Components y que te permite liberarte de muchas tareas tediosas que, de otro modo, tendrías que hacer manualmente. LitElement pesa solamente 6 Kb (gziped. sí!! menos de lo que pesa un simple icono png!), por lo que puedes considerarla una micro-librería. Sin embargo, te ofrece data-binding, sincronización entre los atributos de la etiqueta del componente y sus propiedades, un motor de renderizado de templates que tiene mucho mejor rendimiento que cualquiera de los frameworks populares, y mucho más. Vente a clase y experimentarás la onda de los Web Components. Te mostraremos también cómo los puedes usar en cualquier tipo de proyecto existente, o futuro, y como beneficiarte de la cantidad de componentes que la comunidad ofrece como software libre, y que puedes usar en cualquier proyecto.

Propiedades en LitElement

Vídeo que te explica qué son las propiedades y cómo usarlas en los componentes web creados con LitElement.

Una de las utilidades que te ofrece de manera sencilla LitElement, encima del estándar de Web Components, es la definición de propiedades del componente.

Estas propiedades se sincronizan con el template o la vista del componente, de modo que si cambian, se actualiza automáticamente la parte visual del componente. Es decir, son propiedades reactivas.

Además también se sincronizan con los atributos de la etiqueta del componente, que pueden ser seteados desde fuera del componente o manipulados vía DOM.

Te explicamos todo esto de una manera práctica en este vídeo.

Desarrollo de Web Components con LitElement

Vídeo de introducción a LitElement. Te explica qué es LitElement y por qué usarlo para desarrollar Web Components. Además te ofrece los primeros pasos para el desarrollo con LitElement.

Conoce LitElement desde cero, sus ventajes y los modos que tienes para desarrollar componentes con esta clase base que te ofrece gran cantidad de ventajas y una experiencia de desarrollo muy agradable para el programador.

LitElement es una librería moderna que es capaz de extraer lo mejor del navegador y facilitar la creación de componentes, ofreciendo muchas cosas como binding de datos, sincronización entre propiedades y atributos, un motor de renderizado ultra-rápido y mucho más. Todo ello en menos de 6.6Kb de carga para tu navegador.

Otros canales

Accede a otros canales de vídeos en directo de DesarrolloWeb.com:

Angular Diseño Programación Laravel Javascript Sistemas WordPress Polymer NodeJS Workflow Frontend LitElement Photoshop Hugo Freelance PHP