Predictability for the Web @robertnyman
@RickByers

Rick & Robert

Rick & Robert

Rick & Robert

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

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

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

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

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

We want the web to
just work for developers

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

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/

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

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

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

Remember when web development was
hard?

Predictability improvements

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

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

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

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

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

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

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)

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

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

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)

Minimizing breaking changes

A recent regression: Bug 648589

A recent regression: Bug 648589

A recent regression: Bug 648589

A recent regression: Bug 648589

A recent regression: Bug 648589

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

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

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

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

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

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

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

Developer Feedback

Developer Feedback Listening to developers
Understanding challenges Getting information

New bug wizard

New bug wizard Web developer
focus Direct routing to right team

http://bit.ly/browserstack-demo

http://bit.ly/browserstack-demo

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

developers.google.com/web/feedback/

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

Browser Bug Searcher

Demo?
Demo!

Demo?
Demo!

developers.google.com/web/feedback/

developers.google.com/web/feedback/

Web Predictability breakout session Tomorrow,
4pm

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!

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

Thank You! Rick Byers @RickByers
Robert Nyman @robertnyman