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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. / 2B
   devices
   

   View Slide

5. /
   5B Devices connected
   to web
   

   View Slide

6. 35%
   faster JS language
   perf on Android via
   Speedometer
   benchmark
   

   View Slide

7. Accelerated Mobile Pages
   <1 second
   median time to load an AMP from Google Search
   10x
   less data than an equivalent non-AMP page
   

   View Slide

8. / >2B
   AMP Pages
   900k different domains
   

   View Slide

9. View Slide

10. Progressive Web Apps:
    Radically better web experiences
    Fast
    Engaging
    Reliable
    Integrated
    /
    

    View Slide

11. Service Workers Support
    Shipped ✓ Shipped ✓ Shipped ✓ Shipped ✓ In Development ~ In Development ~
    Source: https://jakearchibald.github.io/isserviceworkerready/
    

    View Slide

12. / Fast loading on slow network
    Works well on smartphones
    Use less data
    Source: https://mobile.twitter.com
    

    View Slide

13. / 300M+
    monthly active users
    80%+
    on mobile
    Source: https://mobile.twitter.com
    

    View Slide

14. 60%
    increase pages/session
    /
    Source: https://mobile.twitter.com
    70%
    increase in tweets
    

    View Slide

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
    

    View Slide

16. View Slide

17. Modern mobile web is mainstream
    

    View Slide

18. Source: https://youtu.be/_ssDaecATCM?t=1075
    215
    New Web API
    Since last year
    Over
    

    View Slide

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
    

    View Slide

20. PWAs work with Android Intents
    Add To Homescreen
    

    View Slide

21. PWAs work with Android Intents
    PWAs are displayed in app Launcher
    Add To Homescreen
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

26. / $123B
    spent on mobile
    commerce in 2016 in US.
    

    View Slide

27. Simple web payments
    with PaymentRequest
    

    View Slide

28. Credential
    Management API
    

    View Slide

29. One-tap
    sign in
    

    View Slide

30. Auto
    sign in
    

    View Slide

31. Introducing the
    Web Share API
    

    View Slide

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
    

    View Slide

33. Lighthouse is integrated into DevTools
    

    View Slide

34. View Slide

35. Polymer 3.0
    

    View Slide

36. Wego Case Study
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

41. Thank
    You!
    

    View Slide