Curso de aplicaciones progresivas con Web Components y LitElement

FrontEnd

El curso definitivo para aprender a desarrollar Progressive Web Apps con Web Components y LitElement.

Intermedio Medio (de 8 a 20 horas) Precio en promoción 89€ 69€

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ás en el curso de Progressive Web Apps con 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

Por qué desarrollar aplicaciones progresivas con PWA Starter Kit

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.

Programa de clases del curso de PWA con LitElement

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.

Clase 1: Introducción a PWA Starter Kit

- 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)

Clase 2: Sistema de routing

- 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

Clase 3: Redux en una PWA

- Qué es Redux y sus componentes principales

- Cómo crear acciones

- Cómo crear reducers

- Suscribirse a cambios en el store desde componentes LitElement

- Operaciones asíncronas con Redux-Thunk

- Crear y combinar múltiples reducers 

- Instalar las Redux Dev Tools en el proyecto

Clase 4: Lazy load

- 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

Clase 5: 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.

Clase 6: Acceso a servicios web API REST

- 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.

Clase 7: Paso a producción

- 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

En resumen

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.

CONTENIDO

Sistema de routing con PWA-Helpers

Miguel Angel Alvarez
1:42:15

Redux en una PWA

Miguel Angel Alvarez
2:06:39

Lazy load de components

Miguel Angel Alvarez
2:24:53
2:52:33
2:29:56
2:36:00
Este curso está en marcha
En breve deben aparecer más clases en este espacio

CONTENIDO

Sistema de routing con PWA-Helpers

Miguel Angel Alvarez
1:42:15

Redux en una PWA

Miguel Angel Alvarez
2:06:39

Lazy load de components

Miguel Angel Alvarez
2:24:53
2:52:33
2:29:56
2:36:00
Este curso está en marcha
En breve deben aparecer más clases en este espacio