©2024 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
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
En marcha
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.
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
Objetivos del curso
Por qué debes aprender desarrollo de aplicaciones SPA basado en Web Components y Lit
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.
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
- 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.
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.
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.
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.
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.
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.
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.
- 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.
Primeras configuraciones del sistema de routing de Lit. Creamos una serie de rutas sencillas para aprender los conceptos esenciales.
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.
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.
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.
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
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.
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.
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.
- Login
- Logout
- Registro
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.
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.
- Ejercitar un servicio web API REST para implementar un CRUD
- Implementar rutas protegidas
- Crear rutas internas que reciben parámetros extra
- Mejoras en el crud
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.
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.
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.
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.
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.
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.
Creamos la página del detalle de un proyecto. En esta página recibimos el identificador del proyecto para mostrar sus datos completos.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
¿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.