Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Polyfills and the web

Polyfills and the web

Recently the W3C Technical Architecture Group published a new finding on the role of polyfills on the web. I was the primary author of the finding and in this talk I present the findings recommendations for a developer audience.

Fd1af6cc88403788ae1e5710871bbf62?s=128

Andrew Betts

February 25, 2017
Tweet

Transcript

  1. Polyfills and the web Andrew Betts, Financial Times

  2. Number.isNaN 2

  3. Poly-what? 3

  4. Poly-what? 4 Number.isNaN = Number.isNaN || function(value) { return typeof

    value === "number" && isNaN(value); };
  5. Poly-what? 5

  6. Fixed it. 6

  7. Who is this guy? 1. Helped build the original HTML5

    web app for the FT (app.ft.com) 2. Created our Origami component system 3. Ran FT Labs for 3 years 4. Now working with Nikkei to rebuild nikkei.com 5. W3C Technical Architecture Group 6. Polyfill.io 7. A bit obsessed with mascots 7
  8. 8 Travis Leithead Microsoft Alex Russell Google Mark Nottingham Akamai

    David Baron Mozilla Tim Berners-Lee W3C/MIT Dan Appelquist Samsung Hadley Beeman Invited expert Peter Linss HP Andrew Betts Financial Times W3C Technical Architecture Group (TAG) Yves Lafron W3C
  9. 9 w3ctag.github.io/polyfills

  10. Array.prototype.contains 10

  11. Array.prototype.contains 11 >> ["foo", "bar"].contains("foo"); <· true >> [3, 89,

    true].contains("bar"); <· false
  12. 12

  13. Versions of jQuery in use (March 2013) 13 jQuery version

    Out of date by... Percentage of sites 1.7.2 7 months 2.7% 1.7.1 7 months 2.4% 1.4.2 2 years, 2 months 1.7% 1.3.2 3 years, 2 months 1.2% 1.8.3 2 months 1.0% 1.8.2 4 months 0.7% 1.6.1 1 year, 4 months 0.6% 1.5.2 1 year, 11 months 0.5% Google CDN. https://www.stevesouders.com/blog/2013/03/18/http-archive-jquery/
  14. Array.prototype.contains Array.prototype.includes 14

  15. 15

  16. Life cycle phases 16 Prototyping > Standardising > Idea! Incubated

    First native implementation Spec agreed Multiple implementations Universal support! Implementing > Tipping point
  17. Tipping point changes 17 Before tipping point After tipping point

    Use native implementation if it exists const myFoo = nativeFoo || polyfillFoo Use the proposed name window.nativeFoo = polyfillFoo
  18. Tipping point changes 18 const myIsNaN = polyfillNaN; Number.isNaN =

    Number.isNaN || polyfillNaN; Before: Don't defer to native, don't use the proposed name After: OK to defer to native and use the proposed name
  19. Polyfills stakeholders 19 • Polyfill authors • Website developers (eg.

    Nikkei team) • Library and framework authors (eg. React team) • Polyfill distributors (eg. polyfill.io) • Spec editors
  20. Other recommendations for website developers using polyfills 20

  21. 1. Understand stability Look for signs of quality in polyfills,

    such as: • Comprehensive test suite, especially if it includes relevant Web Platform Tests • Effects on the performance profile of your site, measured using in-browser profiling tools or other auditing or monitoring tools or services 21 https://github.com/w3c/web-platform-tests
  22. 2. Don't serve unnecessary polyfills If possible, avoid wasting the

    user's time, money and data allowance • Feature detect + conditional loading can delay the loading of necessary polyfills • But better to optimize for modern browsers anyway • If the worst-case set of polyfills is small, maybe serve them anyway 22 https://html5test.com
  23. Polyfill.io feature detection example 23 Docs: https://polyfill.io/v2/docs/examples#feature-detection Demo: http://jsbin.com/sufiboz/

  24. 3. Keep polyfills up to date Make it possible to

    update the polyfill • Consider automation • Use a service like polyfill.io or a module registry like NPM • Subscribe to release notifications 24 https://www.npmjs.com/package/npm-check
  25. 4. Consider the least capable devices Polyfills don't provide universal

    support. Some browsers are not worth polyfilling. Instead, consider: • Progressive enhancement • Transpilation (eg. Babel) • Lo-fi mode (aka. "Basic" mode, "m." etc) • "Upgrade your browser" notice 25 SWIPE Konnect 3 ($30)
  26. 5. Use caching Polyfills are static, so cache them aggressively.

    • Serve polyfill in a static form • Use a CDN if possible • Use the immutable directive in the Cache-Control response header. 26 https://www.webpagetest.org
  27. The Evergreen Web 27

  28. 28 www.w3.org/2001/tag/doc/evergreen-web/

  29. Evergreen as standard • Great browsers ship modern standards and

    update automatically ◦ Firefox, Chrome, MS Edge, Safari (ish), Opera • Others… don't. ◦ Non-Google Android phones (especially China) ◦ Very cheap phones (especially India) ◦ Niche browsers (especially China, Russia, Africa) ◦ Internet of things devices with embedded browsers 29
  30. 30

  31. "Things" 31

  32. 32

  33. 33

  34. 34

  35. 35

  36. 36

  37. 37

  38. 38

  39. Evergreen web recommendations • Bad / outdated web browsers are

    a risk to evolution of the web • Fine for private content / apps ◦ programme guide on TV ◦ in-flight entertainment UI on aircraft seat • NOT OK if the device can browse the public internet • For polyfilling: "least capable" category includes these 39
  40. Polyfill.io • Analyses each request, identifies the browser • Packages

    only the polyfills you need • Keeps them up to date • Served via Fastly's global CDN ◦ Nodes in Tokyo, Singapore and Hong Kong 40
  41. 1 billion polyfills served per month 41

  42. Thanks for listening 42 Andrew Betts andrew.betts@ft.com @triblondon Get the

    slides bit.ly/inside-frontend-polyfill