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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

6. Una PWA en
   acción
   http://stvansolano.github.io/blog
   stvansolano@outlook.com
   Twitter: @stvansolano
   

   View Slide

7. User experience +3s 53%
   19s
   Tiempo de
   carga en
   redes 3G
   ¿Por qué están tomando
   importancia?
   Tiempo de
   carga
   =
   Porcentaje
   de
   abandono
   

   View Slide

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
   

   View Slide

9. Las PWAs llegan a Windows 10
   * Windows Creators
   Update
   

   View Slide

10. Las PWAs llegan a Windows 10
    * Windows Creators
    Update
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

15. Demo
    ● StartBucks PWA
    ● https://developers.google.com
    /web/showcase/
    ● Lighthouse
    ● Polymer (NodeJS)
    

    View Slide

16. ¿Preguntas?
    stvansolano@outlook.com
    Escríbeme
    Twitter: @stvansolano
    stvansolano@outlook.com
    ?
    Twitter/GitHub: stvansolano
    Twitter: @stvansolano
    

    View Slide

17. Bonus https://www.ucenfotec.ac.cr
    /front-end-web-development
    /mobile-app-development
    

    View Slide

18. ¡Gracias!
    stvansolano@outlook.com
    Escríbeme
    Twitter: @stvansolano
    stvansolano@outlook.com
    ?
    Twitter/GitHub: stvansolano
    Twitter: @stvansolano
    

    View Slide