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/

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