A presentation at IAAP EU by Luz De Leon
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
Gracias! Sigan a @wwcodefrontend1
View Tu Primera PWA con ionic on Notist.
Dismiss
Presentación en el grupo de Women Who Code - Front End
The following resources were mentioned during the presentation or are useful additional information.