The Web Platform - State of the Union '17

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

D05cd3860dfbf8c68cba35bd6a7ae0ee?s=128

Abdelrahman Omran

September 17, 2017
Tweet

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

  9. None
  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
  16. None
  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

  34. None
  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!