Curso de aplicaciones progresivas con Web Components y LitElement
El curso definitivo para aprender a desarrollar Progressive Web Apps con Web Components y LitElement.
Material disponible
Intermedio
11 Clases 18 h
Este curso de desarrollo de aplicaciones progresivas (Progressive Web Apps) usa las tecnologías estándar Javascript de Web Components para permitirte extraer lo mejor de los navegadores, así como los patrones de diseño más apoyados por la comunidad, como Redux.   

Para el desarrollo de los componentes de aplicación nos apoyaremos en LitElement, la clase base para el desarrollo de elementos personalizados, ligera y de altísimo rendimiento, desarrollada por Google y el equipo de Polymer. 

Qué aprenderé en el Curso de aplicaciones progresivas con Web Components y LitElement

  • Aplicar el WPA Starter Kit para crear de manera sencilla la base de una aplicación progresiva
  • Usar la librería PWA-Helpers, de Google, para implementar características como el routing.
  • Aprender a usar el sistema de routing y el lazy load de componentes
  • Aprender a usar Redux para gestionar el estado con un flujo de datos unidireccional, de fácil uso y mantenimiento
  • Acceso a servicios web para recuperación de datos de manera asíncrona y en el marco de uso de Redux
  • Personalizar tu aplicación, template, componentes, estilos...
  • Adaptar librerías de terceros dentro de nuestra aplicación Configurar tu propio service worker
  • Llevar a producción una progressive web app

A lo largo de las clases del curso iremos aprendiendo a configurar las distintas secciones de una aplicación progresiva, sobre la base del PWA Starter Kit. De manera práctica iremos incorporando piezas a la aplicación, para personalizar su funcionamiento y adaptarlo a las necesidades de un proyecto.

Objetivos del curso

Las aplicaciones progresivas se han extendido rápidamente como marco del desarrollo frontend. Básicamente permiten usar dentro del contexto del navegador muchas características nuevas, que antes sólo estaban disponibles en el ambiente de las aplicaciones de escritorio, o aplicaciones para móviles descargadas vía App Store o Google Play, tales como trabajo offline, instalar aplicaciones en dispositivos, recibir notificaciones, etc.

PWA Starter Kit te ofrece un marco de trabajo ya listo para que puedas implementar una Progressive Web App en cuestión de minutos. Te entrega una base de código de aplicación sencilla, que puedes adaptar a cualquier proyecto. Además integra un sistema de routing fácil de usar y algunos de los patrones de trabajo más apoyados por la comunidad, como Redux.

Redux es una librería Javascript ligera (2Kb aproximadamente) que permite la administración del estado de las aplicaciones de una manera predecible. Es una implementación del patrón de arquitectura Flux, basada en un flujo de datos unidireccional, permitiendo a los componentes escuchar cualquier cambio en el estado de la aplicación de manera sencilla y centralizada. Con el conjunto de tecnologías que veremos en este curso podrás componer desde aplicaciones sencillas hasta las más complejas, sin que tu código se vuelva un caos, con una excelente optimización y una atractiva experiencia de usuario.

Por qué debes aprender Desarrollo de aplicaciones progresivas

Con este curso aprenderás a realizar aplicaciones modernas, no solo Single Page Applications, sino las más novedosas Progressive Web Apps, capaces de extraer las últimas características de los navegadores. Usaremos tecnologías disponibles de manera estándar en la web, así como librerías ligeras que nos aseguran el mejor rendimiento y una experiencia de desarrollo sencilla y cómoda para el profesional.

Trabajaremos con arquitecturas altamente recomendables y establecidas casi como un estándar, como es el caso de Redux para el manejo del estado. Y por fin, aprenderás a llevar las aplicaciones a producción en servidores web, con la instalación y configuración del service worker para trabajo offline.

Qué tengo que saber

Para el curso de PWA con LitElement es importante haber hecho el curso de LitElement antes. Y por supuesto hay que tener cierta soltura con Javascript en general.

Clases y contenidos

Creación de una aplicación desde cero con Web Components y LitElement
  • Qué es Web Components, LitElement y las Progressive Web Apps
  • Conocer PWA-Starter-Kit y las tecnologías que usa (Redux, PWA-Helpers, LitElement…)
  • Cómo crear una aplicación progresiva en minutos
  • Inicio de proyecto de aplicación del curso con Open-WC
  • Intercambiar vistas en aplicaciones SPA (Single Page Application
Sistema de routing con PWA-Helpers
  • Introducción a los PWA Helpers
  • Cómo personalizar las rutas de la aplicación progresiva o SPA
  • Navegación programática entre rutas
  • Implementación de rutas a distintos niveles
Redux en una PWA
  • Qué es Redux
  • Cómo crear acciones
  • Cómo crear reducers
  • Cómo suscribirse a cambios en el store
Lazy load de components
  • Cómo cargar de manera perezosa (lazy load) los componentes de la aplicación
  • Cargas Lazy load en función de la ruta
  • Carga y combinación de reducers por Lazy Load
Estilos y personalización de la aplicación
  • Personalizar el estilo y el tema de colores
  • Crear nuestra propia librería de iconos optimizada con SVG
  • Compartir estilos entre componentes de aplicación
  • Usar componentes de terceros
  • Integrar menú responsive, mensajes de feedback, etc
Acceso API REST vía componentes LitElement
  • Usar la librería Axios para acceso a servicios web
  • Crear acciones de Redux para solicitar datos de manera asíncrona
  • Aplicar el acceso de datos asíncrono en el marco de Redux
  • Realización de un CRUD de recurso REST, con componentes LitElement, sistema de routing y Redux
Build y creación de service worker de la PWA
  • Archivo Manifest.json
  • Proceso de Build de una aplicación con Open-WC
  • Trabajo con segmentos de carga perezosa
  • Deploy de aplicación en servidor remoto
  • Configuración de Rollup
  • Configuración de las rutas de aplicaciones SPA en el servidor web
  • Configuración del service worker con Workbox
  • Trabajo offline de la PWA
JSON-Server con autenticación por JWT

En este vídeo te enseñamos a instalar un sistema de API REST con un servidor que requiere autenticación de usuarios, basado en JSON-Server. Este sistema permite la creación de un servicio web en pocos minutos y nos servirá para poder realizar la práctica del sistema de login y contraseña en aplicaciones progresivas con Web Components y LitElement, y el acceso con autenticación a ciertos endpoints del API REST.

Sistema de registro y login de usuarios con email y contraseña

En este vídeo hacemos las vistas de login y registro de la PWA, así como la de logout para cerrar la sesión. Configuramos el sistema de routing para esa nueva ruta login. Luego realizamos todo el proceso de registro de usuarios, para crear cuentas en el sistema de nuestro API REST. Posteriormente el proceso de login de usuarios, que nos devuelve un token JWT (JSON Web Token) que usaremos para el acceso a las rutas protegidas. Por último hacemos el logout, para eliminar el token de la aplicación y con ello cerrar la sesión.

Acceso a rutas protegidas con autenticación por JWT

A diversas rutas de la aplicación les debemos enviar el token para que puedan ejecutarse. En este vídeo mostraremos cómo enviar el token en los headers de la solicitud HTTP. Lo haremos de manera individual para las rutas determinadas y también de manera global, lo que mejorará el flujo de desarrollo en nuestra PWA.

Memorizar el token para mantener la sesión abierta ante posibles refrescos

La última parte que nos queda para completar el sistema de autenticación es la creación de un sistema de login que permita almacenar el token en el localstorage del navegador. Así, si el navegador se refresca, la sesión permanece activa, después de la necesaria verificación del token JWT contra el servidor de la API REST. Además solucionaremos algunos problemas menores de nuestra Progressive Web App y mostraremos cómo recuperar el email del usuario una vez verificado el token.

Valoraciones

Andrés López

Luis Rodríguez Soriano

Muy bueno, muy bien explicado.

Nestor Quevedo

Claudio Roberto Corvalán Aravena

Alejandro Rodriguez Sorni

Como siempre, un gran curso. Todo lo que se enseña va acompañado de ejemplos prácticos paso a paso que te ayudan a entenderlo mejor.

Vicente Soriano

El curso me parece excelente y una cosa muy a tener en cuenta es que el material didáctico (teórico y práctico) que aporta no lo he visto en otro sitio en español. Formidable después de haber cursado LitElement (componentes web) también en EscuelaIT.

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 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