Improve how JavaScript works in GOV.UK Frontend

[timpaul]

What

We know there are issues with our current JavaScript setup, code and tooling which we should improve. Some of this work will help us unlock future work, i.e: more complex components (like modals) and supporting translations.

Preliminary work

• Scope and plan the JavaScript work for Q4 2021/2022 #2478

Internationalisation

Allow strings in our component JavaScript to be customised, to allow for text in other languages (eg: Welsh).

• Allow users to override hardcoded strings in our component JavaScript (internationalisation) #1708

Reduce Internet Explorer support

We're aiming to reduce IE support in future major versions of GOV.UK Frontend.

• Revisit our legacy browser support #2503
• Reduce Internet Explorer (IE) support in GOV.UK Frontend #2621

Figure out what our component JavaScript should look like and how it should behave

We should consider how we handle modern JavaScript features, typing, public and private properties, event listening, state management, styling, interactions with apps and third-party frameworks, and our component API.

• Decide and document our JavaScript conventions for components #1722
• Cannot import standard ES6 modules from npm #711

Document our JavaScript

We need to figure out what our documentation will look like, and we need to actually publish that documentation.

• Decide and document our JavaScript conventions for components #1722 (duplicate)
• Decide how to document our component JavaScript API #2563
• Publish documentation for our component JavaScript API #2564

Improve tooling

• Spike into alternatives for Gulp #2558
• Improve and simplify Gulp #2717

Improve testing

• Spike adding unit testing for our component JavaScript #2559
• Revisit our component testing strategy #2502

Resources

• Architectural changes project board
• JavaScript planning Mural board
• 2022-10-11: Components configuration
• 2021-10-06: What on earth is this 'JavaScript work' we keep talking about?
• 2020-11-23: "Future of GOV.UK Frontend" exercise

[frankieroberto]

@timpaul might be worth adding that the Character Count component also has hardcoded English text (see code), and so whichever solution is proposed for translation can be adopted there too?

[kellylee-gds]

Previous body of issue:

Goal

We can publish more complex components involving JavaScript, in a consistent way that can be adopted by service teams.

Why

Doing this work allows us to publish more complex components like modal dialogue and autocomplete, both of which we know are needed by users.

Related stories

• Cannot import standard ES6 modules from npm Cannot import standard ES6 modules from npm #711
• Accordion has hardcoded English text in javascript file Accordion 'open/close all sections' cannot be customised or translated #1325
• Expose better ways to set values on components (Investigate using more robust method for detecting updates to input fields in Dragon #1028)
• Investigate components being initialised more than once Investigate components being initialised more than once #1127

[owenatgov]

JS Squad to decide which of the epics in this card to work on at the present moment in time and move them into the epics column.

[36degrees]

Closing this as the scope is too broad to be useful at the minute (there's always more we can do to improve!) and the few remaining stories are better covered in other epics (or are epics themselves):

• Clarify our JavaScript components' public API #3478
• Reduce Internet Explorer (IE) support in GOV.UK Frontend #2621
• Revisit our component testing strategy #2502