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
Avanzado
31 Clases 16 h (aprox.)
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
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.

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

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.

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.

¿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