Tu primera PWA ⚡️con Ionic ⚡️ Women Who Code Front End
NOVIEMBRE 2022
Luz De León Front End Engineering @ Accenture Front End Fellow Lead @ Women Who Code
@luzaracelydls /luzaracelydls
Agenda ¿Qué es una PWA? ¿Porqué una PWA? ¿Qué es Ionic? ¿Porqué Ionic? Estructura del Proyecto Cómo lucen los componentes en Ionic
PWA Progresivamente Mejoras tu Aplicación En general es un término que se le da a un conjunto de funcionalidades / tecnologías que agregas a tu aplicación web para mejorarla
Diseño Web Responsivo, Offline, Home Screen, Acceso a Recursos del un dispositivo
Características 💖 Confiables Cargan rápido y funcionan offline
⚡️Rápidas Respuestas a las interacciones del usuario
😎 Cool Se sienten como apps nativas en dispositivos móviles
¿PORQUÉ UNA PWA? PWA
Apps Nativas
vs
Flujo actual
1 El usuario googlea:
2 Obtiene resultados
3 Navega en la web
😅
Solución
Necesitas una app que ofrezca una experiencia casi nativa a tus usuarios manteniendo recurrencia de uso y utilizando las tecnologías que conocemos
⚡️
Problema
Progressive Web App
¿Porqué Ionic?
+
ó
ó
Puedes implementar los componentes de UI de Ionic en tu aplicación ya sea que esté desarrollada en Angular, React o Vue
Estructura del proyecto
Conclusiones 🧠 PWA ⚡️ No es un producto, no es una tecnología.
Ionic 📲
& more 🤩
Es una herramienta que te permite dar a tu aplicación web un look & feel de app nativa a través de componentes de UI lindos y utilizando el framework de desarrollo de tu elección .
Puedes escalar tu proyecto con Ionic para generar una app nativa con ese código (o no). ¡Además de que es muy fácil de aprender! 🎉
Referencias
https://ionic.io/pwa https://ionicframework.com/docs/a ngular/pwa https://ionicframework.com/docs/c ore-concepts/what-are-progressiveweb-apps Pláticas previas en el track: https://youtu.be/x0WnjjrtedY ⚡️ Proyecto 👩🏻💻 https://github.com/luzaracelydls/to dolist-demo.git