State of the WEB ‘18

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 recently, including the major features and adoptions of PWA - Progressive Web Apps, and AMP - Accelerated Mobile Pages. It's like headlines or teasers, that you can refer to individual topics for details later. You're free to use these slides in your talks, I'd appreciate giving credits though - https://goo.gl/1joHK4

Transcript

1. State of the WEB ‘18 Abdelrahman Omran | @Omranic | me@omranic.com
2. Be excellent to each other. Treat everyone with respect. Participate while acknowledging that everyone deserves to be here — and each of us has the right to enjoy our experience without fear of harassment, discrimination, or condescension, whether blatant or via micro-aggressions. Jokes shouldn’t demean others. Consider what you are saying and how it would feel if it were said to or about you. Practice saying "Yes and" to each other. It’s a theatre improv technique to build on each other’s ideas. We all benefit when we create together. Speak up if you see or hear something. Harassment is not tolerated, and you are empowered to politely engage when you or others are disrespected. The person making you feel uncomfortable may not be aware of what they are doing, and politely bringing their behavior to their attention is encouraged. In case you see or hear something or feel uncomfortable, reach out to dev-mena@google.com Code of Conduct
3. Current State The world is changing, and so the Web
5. vs. Source: comScore Mobile Metrix, U.S., Age 18+, June 2017 13% 87% Mobile web Apps
6. Source: comScore Mobile Metrix (Custom), U.S., Age 18+, June 2017 78% of time spent is in users’ top 3 apps
7. Source: comScore MobiLens, U.S., Age 13+, 3 Month Average Ending June 2017 ZERO Number of apps the average user installs per month
8. Reach Capability
9. Reach Capability
10. Time is Money. 58% 13% 20%
11. Source: DoubleClick - The need for mobile speed, September 2016 53% of users abandon sites that take longer than 3 seconds to load
12. 60% of worldwide mobile connections are 2G
13. Progressive Web Apps Are… Fast Engaging Reliable Integrated
14. Offline Browsing Caching Strategies and Offline Storage
15. Background Sync Defer actions until the user has stable connectivity
16. Push Notifications Simple and effective way to re-engage with your users
17. Shared Resources Yes you can share resources between same domain scope tabs
18. Installable Without Installation! PWA automatically installed in first page load
19. More Secure by Default PWA & service workers require HTTPS or it won’t work!
20. Speed & more Speeeeeed! Again, using caching strategies you can reach or even beat native browsing speed!
21. More Hardware Access Really more than you imagine!
22. More Hardware Access Really more than you imagine!
23. WebUSB Make USB safer and easier to use by bringing it to the Web
24. WebAR The easiest way to create & share Augmented Reality on the Web
25. WebVR Create immersive 3D, Virtual Reality experiences in your browser
26. WebAssembly It is new type of code, low-level assembly-like language, runs at near native speed!
27. Progressive Web Apps Is a radically improved user experience, Modern mobile web is mainstream now!
28. The Scale How many devices connected to the web?
29. / 2B active chrome Browsers in 2016 https://techcrunch.com/2016/11/10/google-says-there-are-now-2-billion-active-chrome-installs/
30. / 20B devices connected to the web in 2018 https://www.gartner.com/newsroom/id/3598917
31. Progressive Web Apps Radically better web experiences Fast Engaging Reliable Integrated /
32. Shipped ✓ Shipped ✓ Shipped ✓ Shipped ✓ Shipped ✓ Shipped ✓ Source: https://jakearchibald.github.io/isserviceworkerready/ Service Workers Support
33. Who’s using PWA? Many many companies, and many more!
35. Over 215 new API Only since last year! Source: https://youtu.be/_ssDaecATCM?t=1075
36. PiP - Picture In Picture Web API Allow websites to create a floating video window always on top of other windows SPECS: https://wicg.github.io/picture-in-picture/ SOURCE: https://developers.google.com/web/updates/2017/09/picture-in-picture
37. / PWAs work with Android Intents Add to Homescreen
38. / PWAs work with Android Intents PWAs are displayed in app Launcher Add to Homescreen
39. / PWAs work with Android Intents PWAs are displayed in app Launcher PWAs integrate into Android Settings Add to Homescreen
40. / PWAs work with Android Intents PWAs are displayed in app Launcher PWAs integrate into Android Settings PWAs can deliver Android Notifications Add to Homescreen
41. / 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
42. / 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
43. Forms & Payments $123B spent on mobile commerce in 2016 in US.
44. / Simple web payments / PaymentRequest Forms & Payments
45. / Simple web payments via PaymentRequest Credential Management API One-tap sign in Forms & Payments
46. / Simple web payments via PaymentRequest Credential Management API One-tap sign in Credential Management API Auto sign in Forms & Payments
47. / Simple web payments via PaymentRequest Credential Management API One-tap sign in Credential Management API Auto sign in Introducing the Web Share API Forms & Payments
48. AMP - Accelerated Mobile Pages Consistently fast, beautiful and high-performing across devices
49. Accelerated Mobile Pages <1 second median time to load an AMP from Google Search 10x less data than an equivalent non-AMP page
50. / 2B AMP Pages, 900k different domains https://www.ampproject.org/latest/blog/turbocharging-amp/
52. PWA Case Study #1 Twitter Lite implementation of PWA
53. / Fast loading on slow network Works well on smartphones Use less data Source: https://mobile.twitter.com
54. / 300M+ monthly active users 80%+ on mobile Source: https://mobile.twitter.com
55. 60% increase pages/session / Source: https://mobile.twitter.com 70% increase in tweets
56. / 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
57. PWA Case Study #2 WEGO travel agency and their amazing revamped user experience
59. Development Tools Tools that make it easy for you to develop, tweak and optimize your PWA
61. Lighthouse is integrated into DevTools
62. 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/
63. 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/
64. 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/
65. 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
66. Abdelrahman Omran | @Omranic | me@omranic.com Thank You!