Aplicaciones Web Progresivas (Progressive Web Apps)

Introduccion a Aplicaciones Mobiles Progresivas (PWAs) con Polymer y Visual Studio Code, presentado en Universidad Cenfotec el 14 de febrero de 2018.

http://stvansolano.github.io/blog
Twitter: @stvansolano

Transcript

1. Progressive Web Apps
2. • 1 - ¿Qué son las PWAs? • 2 –Ventajas, desventajas y cuando usarlas • 3 – Estructura de una PWA • 4 – Herramientas para desarrolladores • 5 - Ejemplos Agenda Agenda
3. Sobre mí Esteban Solano Granados Senior Software Engineer http://stvansolano.github.io/blog stvansolano@outlook.com Twitter: @stvansolano – Xamarin Mobile Certified Developer – Microsoft MVP: VS & Development – .Net, Web, Open Source, Mobile
4. ¿Qué son PWAs? PWAs = Progressive Web Apps http://stvansolano.github.io/blog stvansolano@outlook.com Apps que alcanzaron la web – Confiables – Rápidas y muy ligeras – Enganchan (engagement) Twitter: @stvansolano
5. ProgressiveWeb Apps Algunos ejemplos http://stvansolano.github.io/blog stvansolano@outlook.com – mobile.twitter.com – m.uber.com – preview.starbucks.com – m.forbes.com – pinterest.com – weather.com – housing.com Twitter: @stvansolano
6. Una PWA en acción http://stvansolano.github.io/blog stvansolano@outlook.com Twitter: @stvansolano
7. User experience +3s 53% 19s Tiempo de carga en redes 3G ¿Por qué están tomando importancia? Tiempo de carga = Porcentaje de abandono
8. ¿Por qué están dando de que hablar? http://stvansolano.github.io/blog stvansolano@outlook.com Twitter: @stvansolano Ventajas – Muy ligeras (~150Kb vrs 56MB – Bajo consumo de datos (offline) – Acceso (casi) inmediato – Fáciles de compartir
9. Las PWAs llegan a Windows 10 * Windows Creators Update
10. Las PWAs llegan a Windows 10 * Windows Creators Update
11. ¿Por qué están dando de que hablar? http://stvansolano.github.io/blog stvansolano@outlook.com Twitter: @stvansolano Ventajas para la empresa – Fácil distribución (un link) – Sin intermediarios (app stores) – Actualizaciones instantáneas
12. Aspectos a considerar ”Desventajas” http://stvansolano.github.io/blog stvansolano@outlook.com – Construirlas lleva tiempo (aún) – Muchos frameworks y librerías JavaScript no trabajan bien con PWAs – No son nativas (aún), Apple demands – Sitios web actuales => Construir UI específica de PWA
13. ¿Por qué están dando de que hablar? http://stvansolano.github.io/blog stvansolano@outlook.com Twitter: @stvansolano Herramientas para desarrolladores – Lighthouse (análisis PWA) – Ionic PWA Toolkit (WIP) – Angular (CLI) – Polymer (Google) https://webpagetest.org
14. ProgressiveWeb App http://stvansolano.github.io/blog stvansolano@outlook.com Twitter: @stvansolano Estructura – Web App Manifest (JSON) – Service Worker (proxy => cache, Push Notifications, background, events, requests) – App shell (HTML/CSS/JavaScript) https://serviceworke.rs/
15. Demo • StartBucks PWA • https://developers.google.com /web/showcase/ • Lighthouse • Polymer (NodeJS)
16. ¿Preguntas? stvansolano@outlook.com Escríbeme Twitter: @stvansolano stvansolano@outlook.com ? Twitter/GitHub: stvansolano Twitter: @stvansolano
17. Bonus https://www.ucenfotec.ac.cr /front-end-web-development /mobile-app-development
18. ¡Gracias! stvansolano@outlook.com Escríbeme Twitter: @stvansolano stvansolano@outlook.com ? Twitter/GitHub: stvansolano Twitter: @stvansolano