Intro a PWAs con DotNet y WebAssembly

Intro a PWAs con DotNet y WebAssembly

Las aplicaciones web progresivas (PWA) son una gran oportunidad para empresas y desarrolladores web para crear aplicaciones. En esta charla, exploraremos los principales beneficios, frameworks, consideraciones, y recomendaciones a la hora de crear aplicaciones web progresivas, particularmente explorando alternativas en el ecosistema .NET y WebAssembly para sacarle el máximo provecho a estas tecnologías.

http://technocrux.cruxconsultores.com/

D02d96057c4cd905d60d14549b00db0d?s=128

Esteban Solano Granados

June 15, 2019
Tweet

Transcript

  1. ProgressiveWeb Apps con .NET y WebAssembly

  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

     Mobile CR Developers  Remote contractor / Instructor  .Net / Mobile / Xamarin / Web Dev Twitter: @stvansolano
  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)  Bajo consumo de datos (offline)  Acceso (casi) inmediato  Fáciles de compartir
  9. Las PWAs llegan a Windows 10 • Windows Creators Update

    • Edge corre sobre Chromium
  10. Las PWAs llegan a Windows 10 • Windows Creators Update

    • Edge corre sobre Chromium
  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 => Adoptar PWA o crear una Twitter: @stvansolano
  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)  Blazor (.NET) 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 • Starbucks PWA • https://developers.goog le.com/web/showcase/ • Lighthouse •

    Blazor
  16. Blazor http://stvansolano.github.io/blog stvansolano@outlook.com Twitter: @stvansolano .NET

  17. http://stvansolano.github.io/blog stvansolano@outlook.com Twitter: @stvansolano .NET Ventajas de usar Blazor

  18. ¿Cómo funciona? http://stvansolano.github.io/blog stvansolano@outlook.com Twitter: @stvansolano .NET https://... DOM Razor

    Components .NET WebAssembly
  19. ¿Cómo funciona? http://stvansolano.github.io/blog stvansolano@outlook.com Twitter: @stvansolano

  20. ¿Cómo funciona? http://stvansolano.github.io/blog stvansolano@outlook.com Twitter: @stvansolano https://... DOM Razor Components

    .NET WebAssembly https... DOM ASP.NET Core SignalR Razor Components .NET
  21. ¿Preguntas? Escríbeme Twitter: @stvansolano stvansolano@outlook.com stvansolano@outlook.com Twitter/GitHub: stvansolano Twitter: @stvansolano

  22. Extras Meetup > Mobile CR Developers Charlas y cursos 

    C# de punta a punta con .NET Core  https://www.ucenfotec.ac.cr /cursos-de-actualizacion > Xamarin
  23. ¡Gracias! Escríbeme Twitter: @stvansolano stvansolano@outlook.com stvansolano@outlook.com Twitter/GitHub: stvansolano Twitter: @stvansolano