Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

Abdelrahman Omran

September 17, 2017
Tweet

More Decks by Abdelrahman Omran

Other Decks in Technology

Transcript

  1. 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 [email protected] https://goo.gl/1em1MT
  2. 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: [email protected] / @Omranic Abdelrahman Omran
  3. Accelerated Mobile Pages <1 second median time to load an

    AMP from Google Search 10x less data than an equivalent non-AMP page
  4. Service Workers Support Shipped ✓ Shipped ✓ Shipped ✓ Shipped

    ✓ In Development ~ In Development ~ Source: https://jakearchibald.github.io/isserviceworkerready/
  5. / Fast loading on slow network Works well on smartphones

    Use less data Source: https://mobile.twitter.com
  6. / 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
  7. PWAs work with Android Intents PWAs are displayed in app

    Launcher PWAs integrate into Android Settings Add To Homescreen
  8. PWAs work with Android Intents PWAs are displayed in app

    Launcher PWAs integrate into Android Settings PWAs can deliver Android Notifications Add To Homescreen
  9. 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
  10. 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
  11. 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
  12. 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/
  13. 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/
  14. 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/
  15. 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