Curso de desarrollo de aplicaciones SPA basado en Web Components y Lit

Construye aplicaciones del estilo Single Page Application basadas en Web Components con la librería Lit
Material disponible
Avanzado
47 Clases 22 h
99€
79€
Precio en promoción
Las aplicaciones web frontend modernas exigen una experiencia de usuario diferente, más ágil y similar a la que conocemos en las aplicaciones de escritorio. En ellas no se produce la recarga completa de la página web con cada solicitud al servidor. En lugar de ello se realizan solicitudes Ajax, que permiten traer datos en crudo, generalmente JSON, para luego renderizarlos en el navegador mediante Javascript.

Este es el modelo de las conocidas SPA, o Single Page Application, popularizadas desde hace tiempo gracias a servicios conocidos como Gmail, Twitter y muchas otras webs de una enriquecida experiencia de usuario.

A menudo cuando pensamos en una SPA las relacionamos necesariamente con frameworks como Angular, NextJS, Vue o similares, cuando realmente no existe una necesidad de depender de los frameworks, ya que Javascript es capaz de realizar de manera sencilla las funcionalidades necesarias para montar una SPA. Por supuesto, no depender de un framework no es motivo para no realizar un buen diseño de aplicación, generando un código de alto nivel y fácilmente mantenible.

Así pues, una excelente alternativa para realizar una SPA es usar simplemente Javascript, con estándares como Web Components, que nos ofrecen la posibilidad de desarrollar basado en componentes, como se hace en los frameworks. Aquí es donde vamos a trabajar en este curso de Desarrollo de aplicaciones modernas SPA, usando Web Components y la librería Lit, con la que podremos conseguir, en tan solo 5KB, la mayoría de las ventajas de herramientas como React.

Qué aprenderé en el Curso de desarrollo de aplicaciones SPA basado en Web Components y Lit

  • Configurar un entorno de desarrollo para aplicaciones frontend con Vite
  • Aplicar la librería Lit en aplicaciones frontend SPA
  • Desarrollar la estructura de layout de aplicación con componentes
  • Implementar un sistema de routing sencillo y entendible
  • Trabajar con Ajax para acceso al servidor de manera asíncrona apoyados en la librería Axios
  • Implementar la funcionalidad frontend necesaria para ejercitar un backend
  • Realizar la autenticación de usuarios basada en JWT
  • Implementar altas bajas y modificaciones con componentes ejercitando un API REST

Objetivos del curso

Aprender a crear una aplicación frontend del estilo Single Page Application (SPA) desarrollada enteramente con Javascript nativo y el estándar Web Components, apoyados en la librería Lit.

Componer un layout de aplicación por medio de Componentes (Custom Elements del estándar Javascript). Aprender a gestionar rutas de la aplicación por medio de un sistema de routing. Integrar las funcionalidades necesarias para autenticar usuarios en la aplicación contra un servicio web backend mediante solicitudes ajax.

Por qué debes aprender desarrollo de aplicaciones SPA basado en Web Components y Lit

Te mostrará cómo realizar un proyecto real de aplicación frontend con autenticación de usuarios. Te mostrará que no es necesario depender de un framework para alcanzar una buena arquitectura de aplicación y desarrollo basado en componentes.

Gracias a las técnicas que veremos en este curso podrás mantener un código lo más cercano a los estándares de la web, para crear aplicaciones con vistas al futuro, que tienen la funcionalidad que necesitas, sin entrar en una complejidad o dependencias a veces innecesarias.

Para quien conoce Lit este curso le acerca las técnicas necesarias para desarrollar una SPA con Web Components. Quien no conoce Lit tendrá una oportunidad de aprender a desarrollar Web Components en la primera clase y entregarse de lleno en el desarrollo de sus propias aplicaciones.

Qué tengo que saber

Para hacer este curso es necesario tener conocimientos de Javascript. Además sería útil tener conocimientos de Lit, aunque el estudiante podrá entender el curso perfectamente si tiene conocimientos de otras librerías para el desarrollo con componentes como React o similares.

Este curso parte de un backend ya creado, que se ha desarrollado a lo largo del curso de API REST con Laravel. El presente curso se centra en la parte del frontend, utilizando el backend que se desarrollo en ese curso. No son necesarios conocimientos sobre cómo construir o gestionar el backend, ya que aquí solamente trabajaremos con la parte frontend.

Clases y contenidos

Iniciar un proyecto de aplicación

En estas clases vamos a ver las bases de la creación de componentes Lit. Luego aboraremos la infraestructura necesaria para todas las aplicaciones, desde un poco de layout, mecanismos para centralizar los procesos de feedback y otras cosas.

Crear un proyecto de SPA con Lit, Web Components y Vite Gratis

En esta primera clase vamos a introducir el desarrollo de aplicaciones SPA con Lit.

  • Fundamentos de Lit
  • Crear un proyecto con Vite
  • Primeros pasos con Web Components y Lit
Notas sobre el catálogo de componentes Open Source de EscuelaIT

Explicaciones y novedades sobre el catálogo de componentes dile-components, creado por profesores y alumnos de EscuelaIT en la nueva versión, una vez actualizada la documentación.

Esqueleto de aplicación
  • Herramientas para crear la base de un proyecto frontend
  • Inicio de un layout de aplicación basado en Web Components

Conexiones Ajax en aplicaciones Lit con Axios y componentes Ajax

En las clases siguientes vamos a ver cómo realizar las conexiones asíncronas con servidores. Aprenderemos la librería Axios, muy popular en Javascript. Luego veremos cómo realizar componentes que nos permitan encapsular a Axios, de modo que podamos realizar conexiones Ajax de manera estrictamente declarativa.

Introducción a Axios

En este vídeo encontramos una rápida introducción a la librería Axios para la realización de solicitudes HTTP asíncronas con Javascript, lo que se conoce como Ajax. Es un vídeo rápido para entender las bases de esta librería, que usaremos más adelante en ejemplos más complejos durante el curso de SPA con Lit.

Entendiendo el API REST del curso

Explicaciones de qué es un API REST con el modelo stateless y cómo es el servicio web que vamos a usar en este curso para la creación de la aplicación frontend de control del tiempo de proyectos.

Componente genérico para conexiones Ajax

En este vídeo vamos a ver todo el proceso para hacer un componente Ajax, genérico y parametrizable, que nos permita envolver a la librería Axios. De este modo, en nuestra aplicación podremos hacer solicitudes Ajax sin tener que lidiar con las complejidades de las llamadas con Axios. Incluso si más adelante necesitamos sustituir Axios será muy sencillo de realizar, porque solamente tendremos que tocar un único componente.

Gestión de errores en las comunicaciones Ajax

Ahora vamos a realizar la gestión de errores en las conexiones Ajax, completando el componente de Ajax que habíamos empezado en el vídeo anterior.

Funcionalidades necesarias en aplicaciones frontend modernas

Vamos a ver dos vídeos con prácticas de la infraestructura necesaria en aplicaciones que no nos dio tiempo a implementar en las clases anteriores.

Componente para mostrar estado de carga por Ajax

En este vídeo vamos a ver cómo integrar el típico componente que nos permite mostrar que algo está cargando, usado sobre todo cuando ciertas acciones tienen comportamientos asíncronos como las solicitudes Ajax. Veremos cómo integrar este componente en la aplicación, de modo que hagamos que cualquier otro componente pueda usarlo con un simple método que se aplicará mediante un mixin.

Cómo trabajar con iconos en una aplicación

Vamos a ver varios métodos para trabajar con iconos en las aplicaciones, que nos permitan usar bibliotecas de iconos ya disponibles o iconos totalmente personalizados que podremos integrar en nuestra aplicación SPA o en sitios web tradicionales.

Formularios avanzados

En esta clase vamos a ver diversas iteraciones de desarrollo de formularios en aplicaciones, desde formularios básicos hasta conseguir formularios avanzados que ofrezcan una rica experiencia de usuario con una trabajo de implantación mínimo. Finalizaremos con un componente que nos permitirá definir formularios de manera declarativa para enviarlos con Ajax, evitando tener que programar los comportamientos asíncronos.

Cómo controlar formularios de manera eficiente
  • Técnicas para facilitar el trabajo con formularios
  • Cómo implementar un componente de formulario que envía datos mediante Ajax y procesa las respuestas del servidor

Sistema de routing para aplicaciones SPA con Lit

En los siguientes vídeos vamos a abordar la librería de routing de Lit, que nos permite de una manera muy sencilla y práctica definir las rutas de la aplicación SPA.

Implementar rutas básicas en una aplicación SPA

Primeras configuraciones del sistema de routing de Lit. Creamos una serie de rutas sencillas para aprender los conceptos esenciales.

Implementar el polyfill de URLPattern

Para dar soporte a todos los navegadores, ya que el sistema de routing de Lit se basa en este estándar y todavía algunos navegadores no lo han implementado.

Implementar lazy load de componentes

Ahora vamos a ver cómo importar dinámicamente los componentes que atienden a las rutas. Esto nos dará lugar a configurar el "lazy load" o carga perezosa de componentes en la aplicación, que resultará especialmente sencilla, ya que se configura solo por el hecho de usar imports dinámicos.

Implementar navegación programática

Veremos cómo poder movernos a otras rutas mediante código Javascript, algo que más tarde o temprano querrás realizar en tus componentes.

Configurar una ruta de error 404

Cómo realizar una página de error 404 en la aplicación, que se active cuando no se reconozca la ruta que se está intentando acceder

Cómo importar condicionalmente el Polyfill de URLPattern

Explicamos cómo optimizar la carga del Javascript evitando que los navegadores que soportan el estándar URLPattern no necesiten cargar el Polyfill. Además realizamos varios ajustes en los imports de los componentes de la aplicación.

Rutas anidadas en varios router outlet

Para la mantenibilidad del código y la creación de secciones más complejas, que mantengan sus propias rutas, podemos mantener las rutas definidas en otros componentes, los cuales pueden tener sus propios router outlet.

Gestionar los enlaces fuera del router outlet

En este vídeo vamos a resolver una situación que ocurre con los enlaces que están colocados fuera del router outlet, que no tienen el comportamiento esperado para una página SPA. Veremos cómo tratarlos para que dirijan a sus destinos sin recargar toda la página.

Autenticación de usuarios

Abordaremos ahora los flujos de registro y login de usuarios. Para facilitarnos la vida usaremos el componente de formularios Ajax que hemos desarrollado anteriormente. Para completar el flujo de autenticación gestionaremos el almacenamiento del token del usuario en el LocalStorage. Además realizaremos la gestión global del estado mediante una sencilla librería que nos permitirá mantenernos sincronizados con el estado de la aplicación.

Funcionalidad de login, logout y registro
  • Login
  • Logout
  • Registro
Autorización para rutas protegidas por login

En este vídeo vamos a mostrar cómo realizar un componente que permita proteger las rutas que requieren un usuario autenticado para poder acceder a ellas. Será un componente genérico que escuche los cambios de estado relacionados con el login del usuario, reaccionando a ellos para asegurarnos que solo los usuarios autenticados pueden ver ciertos contenidos.

Mostrar un estado de carga hasta definir el estado de login

Ahora veremos cómo hacer que las rutas protegidas, que solamente deben ver los usuarios registrados, presenten un estado de "cargando…" con la típica rueda de Ajax, mientras que el estado global no ha definido si el usuario está autenticado o no.

Implementar un crud sencillo y un crud avanzado genérico

En estas clases vamos a ver cómo se desarrolla un crud, para realizar los listados, altas, bajas y modificaciones de los recursos que nos ofrece nuestro API REST. Será bastante sencillo porque nos apoyaremos en componentes de aplicación ya desarrollados. Luego avanzaremos transformando el desarollo en una utilidad genérica con la que poder implementar las funcionalidades de crud para cualquier entidad que necesitemos.

Acceso a recursos de un API para implementar un CRUD
  • Ejercitar un servicio web API REST para implementar un CRUD
Mejoras en la aplicación
  • Implementar rutas protegidas
  • Crear rutas internas que reciben parámetros extra
  • Mejoras en el crud
Listados genéricos

Nuestros componentes para el desarrollo del crud genérico van a requerir listados. Trabajaremos para desarrollar un listado genérico que sea capaz de mostrar los registros de manera configurable mediante un objeto de configuración.

Ediciones genéricas

Ahora vamos a construir un componente de edición que nos permite realizar de manera genérica las ediciones de las entidades que necesitemos en la aplicación.

Borrados genéricos

En este vídeo veremos que el componente de borrado que usábamos para categorías es capaz de funcionar de manera genérica casi sin requerir ninguna adaptación.

Creación de un crud para una nueva entidad con el crud genérico

En este vídeo demostraremos que se puede usar nuestro crud genérico para crear las funcionalidades de listados, altas, bajas y modificaciones en pocos minutos en cualquier entidad de la aplicación donde lo necesitemos.

Crear un nuevo campo de formulario select con Ajax

En este vídeo vamos a ver cómo crear nuevos campos de formulario que funcionen de manera integrada con los comportamientos genéricos implementados en nuestro crud. Veremos los requisitos que necesitamos cubrir en estos nuevos campos de formulario personalizados. En este caso construiremos un componente de selección que toma datos de otra entidad vía Ajax, pero este procedimiento lo podríamos seguir y crear componentes de cualquier tipo que funcionen bien en formularios adaptables a nuestro crud genérico.

Cómo personalizar los componentes de ítem genérico de listado

Creamos una personalización en los componentes de ítem de listado mediante la que podemos construir enlaces a una página de detalle para proyectos. Estos enlaces tendrán que recibir los datos del ítem para construirse.

Crear una página de detalle para proyectos

Creamos la página del detalle de un proyecto. En esta página recibimos el identificador del proyecto para mostrar sus datos completos.

Integrar el componentes de crud de edición en la página de detalle

Con esta práctica demostramos que los componentes de crud que hemos desarrollado los podemos usar fuera del contexto del crud, pudiendo sacarles partido allá donde necesitemos funcionalidades de operaciones como la edición de registros.

Siguientes pasos en el desarrollo del crud genérico

En este vídeo encontrarás un resumen de los siguientes pasos que hemos dado en el desarrollo del CRUD genérico y cómo han tomado forma de biblioteca de componentes de CRUD adaptable a cualquier tipo de proyecto y servicio web.

Repaso por el catálogo de componentes de crud genérico

Aquí verás una explicación sobre cada uno de los componentes que han sido publicados para la biblioteca de implementación del CRUD genérico, para tener una vista global de las cosas que ofrece y el funcionamiento que presenta.

Despliegue de la aplicación

En los siguientes vídeos vamos a mostrar cómo realizar el despliegue del proyecto del curso en un servidor que nos permite la publicación de archivos estáticos y que nos ofrece funcionalidades de build para implementar procesos de integración continua.

Conociendo Netlify para despliegue de la app

Explicamos en qué consiste el servicio Netlify, que vamos a usar para realizar el despliegue de la aplicación. Este servicio nos ofrece algunas ventajas como el despliegue automático y la integración continua cuando el proyecto se actualice en GitHub.

Desplegando la aplicación

En este vídeo vamos a mostrar el proceso de despliegue de la app. La mayor parte de la configuración que tendremos que realizar consiste en enlazar el repositorio de GitHub con un nuevo sitio en Netlify. Además tendremos que indicar los datos necesarios para que Netlify pueda realizar el proceso de Build una vez que se traiga los archivos del repositorio.

Configurar el comportamiento SPA

En el caso de que estemos configurando una single page application en Netlify necesitamos realizar una redirección de cualquiera de las rutas del servidor hacia la página index. Veremos cómo se realiza ese proceso en Netlify.

Usar un dominio personalizado

Por último veremos cómo se puede configurar un dominio personalizado para nuestro proyecto, de modo que podamos acceder por una URL de algún dominio o subdominio que tengamos registrado.

Gestión del estado

En los siguientes vídeos vamos a profundizar en la gestión del estado global en las aplicaciones. Ahora nuestra aplicación será capaz de abrir y cerrar intervalos de trabajo, existiendo un estado global de intervalo abierto, que permita que los diversos componentes puedan reaccionar cuando surgen cambios en los intervalos de trabajo.

Componente para abrir un intervalo de trabajo

Comenzamos este bloque creando un componente que nos permitirá realizar las correspondientes llamadas a nuestro API de gestión del tiempo con el objetivo de abrir un intervalo de trabajo.

Componente para cerrar un intervalo

Ahora vamos a construir un segundo componente que estará visible siempre en el layout de la aplicación que nos muestre si tenemos un intervalo de trabajo abierto. Desde este componente podremos acceder a la funcionalidad de cerrar el intervalo abierto.

Gestión del estado global

En los siguientes pasos que veremos en este vídeo vamos a trabajar con la gestión del estado de la aplicación. Gestionaremos un nuevo dato en el estado que nos permite saber si tenemos un intervalo abierto. Además, haremos que los componentes de gestión de intervalos también sean conscientes de si hay o no un usuario autenticado, pues dependiendo de esto también las funcionalidades admitidas cambiarán.

Mostrar el tiempo desde que un intervalo se abrió

En este vídeo vamos a mostrar cómo integrar un componente que se desarrolló al principio del curso, con el que podemos llevar a cuenta del tiempo que ha pasado desde que se abrió un intervalo de trabajo. Así podemos presentar de manera conveniente al usuario el tiempo que está pasando desde que se comenzó a contabilizar el tiempo en una actividad.

Mejoras finales en la aplicación

Ahora vamos a darle algunos retoques finales en las funcionalidades de la aplicación que nos permitirán mejorar algunos aspectos de nuestros componentes para el crud genérico, especialmente para aumentar la versatilidad de la parte de los listados.

Personalizar las acciones de los ítems del listado

Vamos a añadir un componente para el listado de intervalos con acciones personalizadas, ya que queremos que ofrezcan más funcionalidades, además de la edición y borrado.

Personalizar el cuerpo de los ítem

Vamos a usar una técnica más depurada para personalizar el contenido de los ítem por medio de templates, que nos permitirá mantener mejor el código y aumentar la adaptabilidad a cualquier tipo de entidad que tengamos que gestionar en el componente de listado.

Sincronizar el listado de intervalos

En este vídeo vamos a adaptar el componente de listado para que se sincronice con los cambios en los intervalos de trabajo, para que se refesque el listado cuando se producen cambios en el intervalo abierto.

Crear opción de filtrado en los componentes de listado

Queremos que nuestra aplicación sea capaz de filtrar intervalos de trabajo. Para ello vamos a incorporar funcionalidades de filtrado en los componentes del crud.

Componente para añadir categorías

Este es el componente que nos faltaba para cerrar la funcionalidad de la aplicación. Es un componente que nos permite añadir relaciones de intervalos con categorías, que son de muchos a muchos. Nos permitirá ampliar funcionalidades de gestión del estado también.

Añadir funcionalidades de PWA

Para acabar el curso vamos a ver lo sencillo que es convertir una SPA en una PWA, añadiendo funcionalidades diversas como la posibilidad de instalarse en dispositivos, el precacheo y trabajar online, entre otras

Convertir la SPA en una PWA

Para ello usaremos un plugin de Vite que nos ofrece una configuración inmediata. Veremos cómo personalizar la configuración del plugin en diversos aspectos que nos permitan dotar a la aplicación de funcionalidades de las PWA.

Valoraciones

Guillermo Alonso

Muy completo. Una gran ayuda para especializarse en las aplicaciones con Lit.

Luan dos Santos Rodrigues

Muito bom o curso

Francisco Matamoros

No había tocado LIT jamás y después de este curso y del magnífico guiado de Miguel, me siento con capacidad para comenzar algún proyecto personal. Sin duda, muy recomendable.

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete