Skip to content

Latest commit

 

History

History
58 lines (34 loc) · 3.54 KB

001-javascript-for-less-capable-browsers.md

File metadata and controls

58 lines (34 loc) · 3.54 KB

JavaScript for less-capable browsers

Date: 2018-05-16

Status: Superseded by 006 - JavaScript browser compatibility

Note

polyfill.io was reported as compromised on 25th June 2024 and we are no longer recommending it as a polyfilling service. Additionally, we have removed the polyfills we created with it from govuk-frontend v5+.

Context

Before GOV.UK Frontend, our projects used jQuery for DOM interactions, events and data manipulation.

We’re taking a step back from jQuery due to its lack of support for the browsers we support, its large file size, lack of security updates and from conversations with the community.

Decision

We’re now writing standard ES5 JavaScript instead, that we polyfill where necessary.

This means that in places where we would have previously used $.each we’re using .forEach instead, and polyfilling the missing gaps.

We use polyfills provided by the Financial Times’ Polyfill service.

This approach ensures that multiple polyfills can be sourced from this service with greater confidence that they’ll work without conflicting with each other.

The Polyfill service does not do runtime detection in browsers and instead opts to do this on the server via user-agent sniffing. It only ships the code needed for that browser, which means newer browsers don’t have to run anything. We may investigate lazy-loading in the future, but for now we’re using a bundled approach based on the lowest common denominator.

We are vendoring these polyfills to avoid any single point of failure issues that could arise from relying on a CDN. By doing this, we can detect if polyfills are needed at runtime, which results in all browsers getting the same polyfill bundle.

We hope that our approach can be automated or moved into a reusable npm package, based on the Financial Times npm package.

Here is an example of polyfilling addEventListener.

Any polyfills included in GOV.UK Frontend will be tested to work in supported browsers and devices, including assistive technology. Any community discussion and documentation around potential bugs or downsides will also be considered before deciding to include a polyfill in GOV.UK Frontend.

Consequences

Advantages

  • We’re not forcing projects to include and rely on a specific library
  • Developers don’t need to know or learn a specific library
  • The JavaScript code is standard and transferable
  • It’s very easy to remove the polyfills when older browser support is dropped while keeping the same JavaScript code
  • Approach can be easily maintained and used by the community
  • Polyfills are widely maintained by the industry

Disadvantages

References