Progressive Web Apps, qué son, cómo se hacen y por qué deberian importarte

My slides for T3chfest 2017. Introduction to the Progressive Web App concept, the core technologies that enable them and why zre they a disrupting concept for the industry

Transcript

1. 9 y 10 de febrero #T3chFest2017 Progressive Web Apps. Qué son, cómo se hacen y por qué deberían importarte. Enrique Garcia Navalon SyncRTC/Mashme.io
2. @garcianavalon Lead Developer at SyncRTC/Mashme.io 9 y 10 de febrero
3. Agenda • The context of PWAs • What is a PWA, conceptually • How do we build PWAs, realistically • Resources, tools, diving deeper • Q&A 9 y 10 de febrero
4. 9 y 10 de febrero
5. 9 y 10 de febrero
6. 9 y 10 de febrero
7. 9 y 10 de febrero
8. 9 y 10 de febrero
9. 9 y 10 de febrero
10. How did the crappiest technology ever managed to beat the promised land of cross-platform desktop apps? 9 y 10 de febrero
11. DISTRIBUTION The hardest problem in software and the biggest pain for users 9 y 10 de febrero
12. 9 y 10 de febrero
13. How did mobile platforms fight back? What is the difference between mobile apps and desktop apps? 9 y 10 de febrero
14. CONNECTIVITY AND BATTERY They are both shitty in 2017 9 y 10 de febrero
15. 9 y 10 de febrero
16. 9 y 10 de febrero
17. 9 y 10 de febrero
18. “A Progressive Web App uses modern web capabilities to deliver an app-like user experience.” – Progressive Web Apps 9 y 10 de febrero
19. 3 ideas 9 y 10 de febrero
20. Reliable - Load instantly, even in uncertain network conditions, and never show the “page not available offline”. 9 y 10 de febrero
21. Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. 9 y 10 de febrero
22. Engaging - Feel like a natural app on the device, with an immersive user experience. 9 y 10 de febrero
23. The good from the (good) apps • Great performance • Smooth animations • Instant loading and offline support • Tap-and-use from the homescreen 9 y 10 de febrero
24. The good from the web • Discoverability • Distribution (just a URL) • Cross-platform* • Size 9 y 10 de febrero
25. A PWA is ... • Your responsive web app, plus ◦ Offline support ◦ Push notifications ◦ Add to homescreen 9 y 10 de febrero
26. A PWA is not ... • The ultimate software solution for mankind. ◦ It’s just a step forward. • Hybrid app (Cordova packaged web). ◦ It’s still a browser website. 9 y 10 de febrero
27. Core technologies 9 y 10 de febrero
28. Responsive CSS - It’s still a mobile web, after all. 9 y 10 de febrero
29. HTTPS - Secure communications, protection from baddies and requisite for some APIs and technologies. 9 y 10 de febrero
30. App Manifest - Tell the browser how to launch your PWA. Enables installation into homescreen, glorified bookmark. Just a good ol’JSON. 9 y 10 de febrero
31. MOST IMPORTANT SLIDE INCOMING WAKE UP!
32. Google magic! • Dynamically creates an apk for your web ◦ Kind of like Cordova packaging • FUNDAMENTAL ◦ Notifications from app, not Chrome ◦ App size during distribution (page load) ◦ See the web app in installed apps list 9 y 10 de febrero
33. Service Workers - Background JavaScript worker. Can act as a network proxy and make push notifications. Fundamental piece, but not cross-browser yet. 9 y 10 de febrero
34. 9 y 10 de febrero
35. Web Push Notifications - Two APIs. Push for server to service worker communication. Notification for service worker to user communication. 9 y 10 de febrero
36. Push 9 y 10 de febrero
37. Architecture and Design Principles 9 y 10 de febrero
38. Offline-first - Design and build with low or zero connectivity is not as a contingency or error-handling feature but rather a reality and fault-tolerant architecture. 9 y 10 de febrero
39. 9 y 10 de febrero
40. AppShell - Application architecture where the structural part of the app is quickly loaded (and cached) while the content is populated afterwards. 9 y 10 de febrero
41. 9 y 10 de febrero
42. Optimize performance - Scrolls at 60fps, never ever freeze UI, fast and slick animations, etc. Just good ol’ codin. 9 y 10 de febrero
43. Tools, frameworks and libraries • Lighthouse audit tool (very cool!) • App Manifest generator • SW-precache and SW-toolbox libraries • AppShell Architecture 9 y 10 de febrero
44. Useful links • https://developers.google.com/web/ • https://pwa.rocks/ • http://offlinefirst.org/ • https://developer.mozilla.org/en-US/ 9 y 10 de febrero
46. Q&A Thanks! 9 y 10 de febrero