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

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
EngagingReliable
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 APISince 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. / $123Bspent 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!