PWA (Progressive Web App) ¿Cómo encaminar un proyecto?

En tu vida profesional surgirán momentos en los cuales debes liderar varios equipos de programación y a su vez varios proyectos. Buscando siempre la forma de mantener tiempos ágiles y una calidad de código aceptable, es normal querer buscar las mejores prácticas o recomendación de colegas, foros y experiencias aprendidas.

Por eso hoy traigo una serie de recomendaciones a tener en cuenta al momento de iniciar un proyecto PWA en Angular.

via GIPHY

¿Cuáles son las pasos de una PWA?

Nuestro proyecto se resume en velocidad, tiempo de carga, y buena experiencia de usuario.

LazyLoad

Para mantener una velocidad de carga aceptable debemos empezar por dividir el proyecto en módulos, de esta forma podremos aplicar el denominado LazyLoad y garantizar una velocidad de carga óptima.

Comparto el siguiente video para explicar más a fondo el “Lazy Load” en Angular.

Experiencia de usuario

Por otra parte, obviando lo que a diseño gráfico se refiere tendremos que aprender a manejar los estados de conectividad de la aplicación, que quiero decir:

Nuestra app debe ser capaz de detectar si tiene conexión a internet o no y de lo contrario mostrar avisos al usuario de forma agradable sin romper la app propiamente.

Quiero más

Por supuesto! gracias al apoyo que se ha conseguido por todos ustedes (comentando, suscribiéndote y compartiendo) se agregaron nuevos videos, en esta ocasión iniciamos el curso de testing en angular, curso de node, curso mongo y mucho más

Cache

Siempre en búsqueda de la optimización se debe establecer un bueno manejo del caché de los archivos estáticos, js, css, svg entre otros. Esto se consigue con los service workers de esta forma aseguramos una respuesta aceptable al momento de abrir nuestra app.

Si quieres ampliar información

Notificaciones

Notificaciones push, una de los funciones esenciales al día de hoy en el mundo app, son las push notifications que permiten comunicar algún actividad sin necesidad de tener la app abierta, esto también los conseguimos con el, manejo de service workers.

(CSS) Medidas PX, VH, VW, EM, REM

Parte fundamental al momento de crear una app responsive adaptada a múltiples pantallas, en algunos casos necesitaremos hacer el uso de vh,vw para capas que se tienen que adaptar a los tamaños de las pantallas y por otro lado necesitamos el uso de PX para los finos diseños de bordes, y el uso de em, o REM para tener un tamaño de fuente óptimo para múltiples pantallas. A continuación un foro en Reddit que nos explica a detalle

Which css unit is best practice? vw, em, %, px from webdev

Multi-Idioma

Multi lenguaje, las apps son el futuro siempre debemos tener una visión de globalización lo que se recomienda desde el inicio de la maquetación instalar paquetes que nos brindan la opción de poder cambiar de idioma de forma rápida y sin detenerse en el desarrollo.