Migrating the Digital Marketplace frontend

Contents

• Migrating the Digital Marketplace frontend

  • Background

  • Pieces involved

    • Digital Marketplace frontend apps

    • Design System

    • GOV.UK Frontend

    • GOV.UK Frontend Jinja

    • Digital Marketplace GOV.UK Frontend

    • GOV.UK Template (Deprecated)

    • GOV.UK Frontend Toolkit (Deprecated)

    • Digital Marketplace Frontend Toolkit (Deprecated)

Background

We are half-way through migrating the Digital Marketplace frontend apps from using GOV.UK Frontend Toolkit to GOV.UK Frontend v3. This is to help our service become WCAG 2.1 compliant.

As of September 2021, we have paused this work indefinitely. We “will not seek full WCAG compliance due to the anticipated retirement of the platform.”

Pieces involved

Digital Marketplace frontend apps

https://github.com/crown-commercial-service/digitalmarketplace-admin-frontend https://github.com/crown-commercial-service/digitalmarketplace-buyer-frontend https://github.com/crown-commercial-service/digitalmarketplace-briefs-frontend https://github.com/crown-commercial-service/digitalmarketplace-brief-responses-frontend https://github.com/crown-commercial-service/digitalmarketplace-supplier-frontend https://github.com/crown-commercial-service/digitalmarketplace-user-frontend

A collection of six Flask apps, roughly mapped to our key user journeys. See the Application Architecture manual page for information about each app.

As of September 2021, the following apps were fully migrated to GOV.UK Frontend v3:

• buyer frontend

• briefs frontend

• brief-responses frontend

• user frontend

The following apps are partially migrated and use a mix of GOV.UK Frontend v2 and GOV.UK Frontend v3:

• supplier frontend

• admin frontend

Design System

https://design-system.service.gov.uk/

A collection of styles, components, and patterns aiming to be WCAG 2.1 AA compliant for use in UK government sites. Also used to refer to the team developing the Design System.

GOV.UK Frontend

https://github.com/alphagov/govuk-frontend

A collection of macros that codify the Design System components using Nunjucks templating language.

The Digital Marketplace currently uses two different versions of GOV.UK Frontend: version 2 works better with the deprecated Digital Marketplace Frontend Toolkit, so we have migrated all apps to use GOV.UK Frontend v2 first, and once all Digital Marketplace Frontend Toolkit components are removed we migrate the app to GOV.UK Frontend v3.

You can read the decision record document on migrating from GOV.UK Frontend version 2 to version 3 for more information on why this approach was chosen.

GOV.UK Frontend Jinja

https://github.com/alphagov/govuk-frontend-jinja

A python package created and distributed by Digital Marketplace, which wraps the GOV.UK Frontend, converting Nunjucks templates to Jinja2 templates.

We are planning to deprecate this package and replace it with a similar package from the Land Registry team:

https://github.com/LandRegistry/govuk-frontend-jinja

There is an ADR on why we’ve chosen this approach.

However, as of April 2021 some changes are still needed to allow Digital Marketplace GOV.UK Frontend to support LandRegistry/govuk-frontend-jinja.

Digital Marketplace GOV.UK Frontend

https://github.com/crown-commercial-service/digitalmarketplace-govuk-frontend

An Node.js package for use in Digital Marketplace frontend apps, published on npm.

It contains custom Digital Marketplace components/javascript and depends on GOV.UK Frontend.

Digital Marketplace GOV.UK Frontend has two maintained branches, the main branch which supports GOV.UK Frontend v3, and a maintenance branch which supports GOV.UK Frontend v2. See the Digital Marketplace GOV.UK Frontend docs on backporting for more details.

GOV.UK Template (Deprecated)

https://github.com/alphagov/govuk_template

A base template for UK Government service pages. This has been removed as a dependency from all Digital Marketplace frontend apps.

GOV.UK Frontend Toolkit (Deprecated)

https://github.com/alphagov/govuk_frontend_toolkit

The old collection of Sass and JavaScript files used for creating UK government sites.

Digital Marketplace Frontend Toolkit (Deprecated)

https://github.com/crown-commercial-service/digitalmarketplace-frontend-toolkit

Jinja templates for GOV.UK Frontend Toolkit styled elements, and custom Digital Marketplace JavaScript and Sass styling. Use of this toolkit in the Digital Marketplace frontend apps is being phased out - there should be no active development on this repo apart from security updates.