This document discusses improving predictability for web developers. It describes challenges like cross-browser inconsistencies that make development difficult. The authors outline efforts by Chrome to address these issues, such as collaborating with other browsers, listening to developers, and minimizing breaking changes. Developers are encouraged to test new browser features, file bugs, and provide feedback to help continue enhancing predictability.

2. Predictability for the Web
@robertnyman
@RickByers

3. Rick & Robert

4. Rick & Robert

5. Rick & Robert

6. What is Predictability?
Image credits: https://www.flickr.com/photos/toddle_email_newsletters/15575925446

8. Working cross-browser is hard
Inconsistency and lack of
interoperability
Started the Predictability project
6 months ago
The web has
a problem

9. Image credits: https://www.flickr.com/photos/toddle_email_newsletters/15575925446

10. Canada & Sweden
Image credits: https://commons.wikimedia.org/wiki/File:Flag_of_Canada.svg
https://commons.wikimedia.org/wiki/File:Flag_of_Sweden.svg

11. How Chrome is trying to improve
predictability for developers
How we work with other
browsers to make this better
How web developers can help
improve the platform
Image credits: https://www.flickr.com/photos/toddle_email_newsletters/15575925446

12. We want the web to just work for developers

14. Fight the platform less
Reduce the need for:
Browser-specific code paths
Workarounds for regressions
Polyfills for inconsistencies between APIs
Shims that smooth over lacking interoperability

15. Break websites less
Ship no accidental regressions.
Only deprecate features when we understand
the cost and know it’s worth it.
Be transparent about interventions, and give
developers a smooth migration path.
Image credits: https://www.flickr.com/photos/dullhunk/4517822872/

16. Fail fast and obviously
Decrease the number of times a developer
stares at a blank screen or searches aimlessly
for help.
Image credits: https://www.flickr.com/photos/johnath/7356295658

17. Data informs
platform changes
Tradeoffs that impact existing developers’
sites can be quantified by usage data or
compat analysis tools.

18. A more coherent
platform
Features that are commonly used together
work well in conjunction.

19. Remember when web
development was hard?

20. Predictability improvements

21. Predictability Improvements
Cross-browser collaboration
Listening to web developers
Minimizing breaking changes

22. Cross-browser collaboration
By Oregon Department of Transportation (Collaboration Uploaded by AlbertHerring)
[CC BY 2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons

23. Better interop
Improved collaboration between engines:
Specifications
Bug trackers
Shared test suites
GitHub issues
Standards meetings
Twitter
Conferences
Mailing lists

24. We’ve gotten better at listening
to you.
https://www.flickr.com/photos/paul_garland/4957441955
Listening to web developers

25. The Web is a
commons
It thrives on collaboration and competition
Good communication between
stakeholders is critical
By Daniel Schwen (Own work) [CC BY-SA 4.0 (http://creativecommons.org/licenses/by-sa/4.0)], via Wikimedia Commons

26. Blink bugs!
The best way to discuss where chromium
should improve for web developers
https://www.flickr.com/photos/brizzlebornandbred/12852086543

27. Blink bugs over time
0
550
1100
1650
2200Jan
2014
Apr
July
O
ct
Jan
2015
Apr
July
O
ct
Jan
2016
Apr
July
O
ct
Opened Closed (not archived)

28. External blink bug stats for September
Total external 300 (28% of total)
Triaged 93%
Resolved 62%
Fix landed 16%

29. Star bugs!
For the top 1%
Fixed: 66%

30. 15% of the top 60 fixed this year!
• Ship MediaRecorder
(#262211, 1822 stars)
Encoding audio and video streams
• Ship Pointer Events
(#471824, 1027 stars)
New input API that unifies mouse,
touch and stylus
• Smooth Scrolling
(#575, 576 stars)
Animate scrolls from keyboard / clicky
mouse
• Support for the Tifinagh language
(#569421, 398 stars)
Used in northern Africa
• Don't fire click for middle button
(#255, 190 stars)
Replaced by new “auxclick” event
• Support for CSS hyphens property
(#605840, 179 stars)
Used to enable or disable hyphenation
• Started: Animated PNG (#437662, 884 stars)

34. Minimizing breaking changes

35. A recent regression: Bug 648589

36. A recent regression: Bug 648589

37. A recent regression: Bug 648589

38. A recent regression: Bug 648589

39. A recent regression: Bug 648589

40. Aug
23
Regression
introduced,
goes unnoticed
Chrome 54
beta
released
Bug filed Fix lands Verified in
new beta
release
Sept22
Sept20
Sept15
Sept28
O
ct17
Chrome 54
stable ships
A recent regression: Bug 648589

41. External blink bug stats for September
All bugs Regressions
Total external 300 49
Triaged 93% 100%
Resolved 62% 84%
Fix landed 16% 39%

42. Deprecations
Image credits: https://www.flickr.com/photos/12567713@N00/5724170380

45. Excellent
user experience
vs.
Composition
of parts
you can’t control
https://www.flickr.com/photos/clonedmilkmen/3604999084

46. Interventions
• Minimally breaks existing behavior
• For substantial user benefit
• Should be
• Predictable
• Avoidable
• Transparent
• Justified by data

47. Example intervention: throttled rendering
• Don’t run rendering pipeline for
off-screen cross-origin iframe
• Shipped in Chrome 52
• Substantial power improvements
• No reports of broken sites

48. Example intervention: throttled rendering
• Don’t run rendering pipeline for
off-screen cross-origin iframe
• Shipped in Chrome 52
• Substantial power improvements
• No reports of broken sites

50. Developer Feedback

51. Developer Feedback
Listening to developers
Understanding challenges
Getting information

52. New bug wizard

53. New bug wizard
Web developer focus
Direct routing to right team

56. http://bit.ly/browserstack-demo

57. http://bit.ly/browserstack-demo

60. Filing a good bug or starring one that exists
is the fastest way to get an issue fixed

61. developers.google.com/web/feedback/

62. Image credits: https://xkcd.com/979/

63. Browser Bug Searcher

67. Demo?
Demo!

68. Demo?
Demo!

69. developers.google.com/web/feedback/

70. developers.google.com/web/feedback/

71. Web Predictability breakout session
Tomorrow, 4pm

72. Take aways
We’re trying to treat the web as a single platform
Test on beta and file bugs
Star the bugs / features you care about
Visit /feedback, try the Browser Bug Searcher
Get involved - this is your web!

73. Thank you!
To all you web developers
making the web better

74. Thank You!
Rick Byers
@RickByers
Robert Nyman
@robertnyman