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.

Transcript

1. Polyfills and
   the web
   Andrew Betts, Financial Times
   

   View Slide

2. Number.isNaN
   2
   

   View Slide

3. Poly-what?
   3
   

   View Slide

4. Poly-what?
   4
   Number.isNaN = Number.isNaN || function(value) {
   return typeof value === "number" && isNaN(value);
   };
   

   View Slide

5. Poly-what?
   5
   

   View Slide

6. Fixed it.
   6
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. 9
   w3ctag.github.io/polyfills
   

   View Slide

10. Array.prototype.contains
    10
    

    View Slide

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

    View Slide

12. View Slide

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/
    

    View Slide

14. Array.prototype.contains
    Array.prototype.includes
    14
    

    View Slide

15. View Slide

16. Life cycle phases
    16
    Prototyping > Standardising >
    Idea!
    Incubated
    First native
    implementation
    Spec agreed
    Multiple
    implementations
    Universal support!
    Implementing >
    Tipping point
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

20. Other recommendations
    for website developers
    using polyfills
    20
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. Polyfill.io feature detection example
    23
    Docs: https://polyfill.io/v2/docs/examples#feature-detection
    Demo: http://jsbin.com/sufiboz/
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

27. The Evergreen Web
    27
    

    View Slide

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

    View Slide

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
    

    View Slide

30. View Slide

31. "Things"
    31
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

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
    

    View Slide

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
    

    View Slide

41. 1 billion polyfills served per month
    41
    

    View Slide

42. Thanks for listening
    42
    Andrew Betts
    andrew.betts@ft.com
    @triblondon
    Get the slides
    bit.ly/inside-frontend-polyfill
    

    View Slide