The Web Platform - State of the Union '17

The web is evolving too fast, and it could be overwhelming sometimes to keep the rhythm with the pace of all that good work happening by the amazing web enthusiast engineers, so to put it all in a nutshell we'll review the most significant changes in the web platform within the last year. Just headlines and you can refer to individual topics for details. You're free to use these slides in your talks, I'd appreciate giving credits though - https://goo.gl/vvWvVn

Transcript

1. Google Developers Roadshow MENA 2017 The Web Platform State of the Union ‘17
2. Code of Conduct Treat everyone with respect. Speak up if you see or hear something uncool. Assume positive intent. We have a zero tolerance policy for harassment. Talk to a staffer, or send email to dev-mena@google.com https://goo.gl/1em1MT
3. I'm a proficient multi-skilled Software Architect, and international speaker. I'm certified by Google as a Developer Expert in Web Technologies. I've worked with many organizations including Intel Corporation, United Nations Development Program, Technology Innovation and Entrepreneurship Center in Egypt, Midade co. and currently I'm working full-time on my own company ”Rinvex”, specialized in enterprise solutions for SMEs. With more than a decade in software industry, and active contributions to the open-source community, I've has been chosen to mentor and train in multiple national and international conferences. Contact: me@omranic.com / @Omranic Abdelrahman Omran
4. / 2B devices
5. / 5B Devices connected to web
6. 35% faster JS language perf on Android via Speedometer benchmark
7. Accelerated Mobile Pages <1 second median time to load an AMP from Google Search 10x less data than an equivalent non-AMP page
8. / >2B AMP Pages 900k different domains
10. Progressive Web Apps: Radically better web experiences Fast Engaging Reliable Integrated /
11. Service Workers Support Shipped ✓ Shipped ✓ Shipped ✓ Shipped ✓ In Development ~ In Development ~ Source: https://jakearchibald.github.io/isserviceworkerready/
12. / Fast loading on slow network Works well on smartphones Use less data Source: https://mobile.twitter.com
13. / 300M+ monthly active users 80%+ on mobile Source: https://mobile.twitter.com
14. 60% increase pages/session / Source: https://mobile.twitter.com 70% increase in tweets
15. / Source: https://mobile.twitter.com 70% data savings for compared to native apps App Size Android 23 MB+ / iOS 100 MB+ / PWA 0.6MB 1M+ daily visit through the PWA home screen icon
17. Modern mobile web is mainstream
18. Source: https://youtu.be/_ssDaecATCM?t=1075 215 New Web API Since last year Over
19. SPECS: https://wicg.github.io/picture-in-picture/ PiP Picture In Picture Web API SOURCE: https://developers.google.com/web/updates/2017/09/picture-in-picture
20. PWAs work with Android Intents Add To Homescreen
21. PWAs work with Android Intents PWAs are displayed in app Launcher Add To Homescreen
22. PWAs work with Android Intents PWAs are displayed in app Launcher PWAs integrate into Android Settings Add To Homescreen
23. PWAs work with Android Intents PWAs are displayed in app Launcher PWAs integrate into Android Settings PWAs can deliver Android Notifications Add To Homescreen
24. PWAs work with Android Intents PWAs are displayed in app Launcher PWAs integrate into Android Settings PWAs can deliver Android Notifications PWAs can launch in an Immersive View Add To Homescreen
25. PWAs work with Android Intents PWAs are displayed in app Launcher PWAs integrate into Android Settings PWAs can deliver Android Notifications PWAs can launch in an Immersive View Developers can soon control the prompt Add To Homescreen
26. / $123B spent on mobile commerce in 2016 in US.
27. Simple web payments with PaymentRequest
28. Credential Management API
29. One-tap sign in
30. Auto sign in
31. Introducing the Web Share API
32. Moving to the Native Notification System on macOS Media Capture and Streams API (Media Streams) WebVR for exposing virtual reality devices Estimating Available Storage Space Native ES2015 modules support Low level Web Assembly
33. Lighthouse is integrated into DevTools
35. Polymer 3.0
36. Wego Case Study
37. Capture screen shot on ChromeOS device, and place here. Be sure to hide the bottom task bar that includes your image, open apps, etc. Ideal image size should be 1626x1080. When using those sizes, image position is {x: 147px, y: 63px} Add a CURVED SHADOW to the screen shot https://developers.google.com/web/
38. Capture screen shot on ChromeOS device, and place here. Be sure to hide the bottom task bar that includes your image, open apps, etc. Ideal image size should be 1626x1080. When using those sizes, image position is {x: 147px, y: 63px} Add a CURVED SHADOW to the screen shot https://codelabs.developers.google.com/
39. Capture screen shot on ChromeOS device, and place here. Be sure to hide the bottom task bar that includes your image, open apps, etc. Ideal image size should be 1626x1080. When using those sizes, image position is {x: 147px, y: 63px} Add a CURVED SHADOW to the screen shot https://youtube.com/ChromeDevelopers/
40. We encourage you to join us in this conversation / / Twitter @ChromiumDev StackOverflow Progressive-web-apps amp-html GitHub github.com/GoogleChrome github.com/ampproject/amphtml developers.google.com/web
41. Thank You!