ProgressiveWeb Apps con .NET y WebAssembly

• 1 - ¿Qué son las PWAs? • 2 –Ventajas, desventajas y cuando usarlas • 3 – Estructura de una PWA • 4 – Herramientas para desarrolladores • 5 - Ejemplos Agenda Agenda

Sobre mí Esteban Solano Granados Senior Software Engineer http://stvansolano.github.io/blog [email protected]  Mobile CR Developers  Remote contractor / Instructor  .Net / Mobile / Xamarin / Web Dev Twitter: @stvansolano

¿Qué son PWAs? PWAs = Progressive Web Apps http://stvansolano.github.io/blog [email protected] Apps que alcanzaron la web  Confiables  Rápidas y muy ligeras  Enganchan (engagement) Twitter: @stvansolano

ProgressiveWeb Apps Algunos ejemplos http://stvansolano.github.io/blog [email protected]  mobile.twitter.com  m.uber.com  preview.starbucks.com  m.forbes.com  pinterest.com  weather.com  housing.com Twitter: @stvansolano

Una PWA en acción http://stvansolano.github.io/blog [email protected] Twitter: @stvansolano

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

¿Por qué están dando de que hablar? http://stvansolano.github.io/blog [email protected] Twitter: @stvansolano Ventajas  Muy ligeras (~150Kb)  Bajo consumo de datos (offline)  Acceso (casi) inmediato  Fáciles de compartir

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

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

¿Por qué están dando de que hablar? http://stvansolano.github.io/blog [email protected] Twitter: @stvansolano Ventajas para la empresa  Fácil distribución (un link)  Sin intermediarios (app stores)  Actualizaciones instantáneas

Aspectos a considerar ”Desventajas” http://stvansolano.github.io/blog [email protected]  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

¿Por qué están dando de que hablar? http://stvansolano.github.io/blog [email protected] Twitter: @stvansolano Herramientas para desarrolladores  Lighthouse (análisis PWA)  Ionic PWA Toolkit (WIP)  Angular (CLI)  Polymer (Google)  Blazor (.NET) https://webpagetest.org

ProgressiveWeb App http://stvansolano.github.io/blog [email protected] Twitter: @stvansolano Estructura  Web App Manifest (JSON)  Service Worker (proxy => cache, Push Notifications, background, events, requests)  App shell (HTML/CSS/JavaScript) https://serviceworke.rs/

Demo • Starbucks PWA • https://developers.goog le.com/web/showcase/ • Lighthouse • Blazor

Blazor http://stvansolano.github.io/blog [email protected] Twitter: @stvansolano .NET

http://stvansolano.github.io/blog [email protected] Twitter: @stvansolano .NET Ventajas de usar Blazor

¿Cómo funciona? http://stvansolano.github.io/blog [email protected] Twitter: @stvansolano .NET https://... DOM Razor Components .NET WebAssembly

¿Cómo funciona? http://stvansolano.github.io/blog [email protected] Twitter: @stvansolano

¿Cómo funciona? http://stvansolano.github.io/blog [email protected] Twitter: @stvansolano https://... DOM Razor Components .NET WebAssembly https... DOM ASP.NET Core SignalR Razor Components .NET

¿Preguntas? Escríbeme Twitter: @stvansolano [email protected] [email protected] Twitter/GitHub: stvansolano Twitter: @stvansolano

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

¡Gracias! Escríbeme Twitter: @stvansolano [email protected] [email protected] Twitter/GitHub: stvansolano Twitter: @stvansolano