> Canales > # Javascript

Eventos anteriores en #Javascript

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.

Iniciación a Redux en #programadorIO

Asiste a la clase en vivo de iniciación a Redux, por videoconferencia. Conoce el patrón de arquitectura de datos Redux y su implementación en Javascript nativo con la librería oficial.

Hoy miércoles vamos a ofrecer una clase en vivo sobre Redux, que se impartirá por videoconferencia, usando el modelo de formación de nuestros cursos online. Esta clase es gratuita para todos los usuarios de EscuelaIT (Puedes registrarte gratuitamente en EscuelaIT si estás interesado en recibir el acceso a la clase, más información leyendo este post) En esta clase vamos a explicar Redux con un enfoque práctico. Veremos las piezas fundamentales que participan en Redux previsiblemente en 5 minutos y luego pasaremos a su implementación directamente con código fuente. Recordamos que Redux es un patrón de arquitectura de datos, para aplicaciones web. Redux no es un framework y no depende de un framework en concreto, sino que es una librería independiente y un modelo de trabajo que puedes aplicar a cualquier framework o librería que dispongas.

Por tanto, podemos trabajar con Redux desde Javascript nativo, como desde React, Angular, Vue, Polymer, etc. Redux se ha convertido en un estándar para manejar el estado de las aplicaciones, por lo que es importante que los desarrolladores lo conozcan y es muy adecuado su uso para conseguir un desarrollo más estandarizado. Está pensado para reducir la complejidad de las aplicaciones, reduciendo el número de interacciones entre componentes. Para ello Redux implementa un único "store", un almacén de datos centralizado donde se guardan todas las variables, objetos y datos en general que se usan en la aplicación. Los datos que reciben los componentes de aplicación son inmutables. Lo que quiere decir que el propio componente que los use no es capaz de cambiar los datos globales.

Es decir, aunque se manipuleun dato del estado recibido de la aplicación, no se actualizará el store . Entonces, en lugar de cambiar los datos manualmente, lo que hace es escalar un "action". El action contiene la acción que se desea realizar sobre el store y los datos que necesite cambiar. La acción se trata por medio de un reducer, que será encargado de procesarla y generar un nuevo estado. Este es el único mecanismo permitido para actualizar el estado de la aplicación, generando un flujo unidireccional. Es complicado explicar Redux en tres párrafos, por lo que te recomendamos la lectura del artículo sobre Redux. Además te recomendamos ver el siguiente vídeo, en el que explicamos qué es Redux y por qué deberías aprenderlo. En el día de hoy vamos a explicar Redux y su implementación usando la librería oficial.

Con Javascript nativo, por lo que será un conocimiento útil para poder aplicar luego al desarrollo de cualquier aplicación, con cualquier framework que puedas llegar a usar. Para el acceso a la clase sobre Redux tienes que ser usuario de EscuelaIT, nuestra plataforma de formación online. Es gratis, así que no hay motivo para no aprovechar la oportunidad! Una vez registrado, poco antes de comenzar la sesión, divulgaremos el enlace para acceder a la clase. Podrás verlo en la parte de arriba, en la zona de notificaciones. Además, si al registrarte activaste las notificaciones por email, recibrás el correo con el acceso también en tu buzón. (Puedes activar o desactivar las comunicaciones por email desde "configuración de perfil / privacidad").

Este vídeo te ayudará a dominar un patrón esencial para el desarrollo de aplicaciones mantenibles y escalables. Todo un estándar que está siendo usado en los proyectos de más alto nivel.

Otros canales

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

Angular Diseño Programación Laravel Javascript Sistemas WordPress Polymer