Pro Yearly is on sale from $80 to $50! »

State of the WEB ‘18

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

D05cd3860dfbf8c68cba35bd6a7ae0ee?s=128

Abdelrahman Omran

May 15, 2018
Tweet

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

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

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

  51. None
  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
  58. None
  59. Development Tools Tools that make it easy for you to

    develop, tweak and optimize your PWA
  60. None
  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!