Tu Primera PWA con ionic

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