Introducing Ripple 2.0

[dylankelly]

The next iteration of the Victorian government digital design system.

Ripple is the digital design system of the Victorian Government, created in 2018 for vic.gov.au and is now in use on over 50 Victorian Government websites on the SDP platform.

In order for Ripple to support a growing number of websites across government we need to make some underlying changes to ensure it is built for the future.

This refactor ensures designers and developers using Ripple can:

• be confident their sites meet the highest industry standards and best practices for accessibility, SEO, security, and performance.
• get up to speed quickly, change or extend Ripple easily, and increase their velocity of delivery.
• create Brand Victoria approved content, assets and sites and apply their brand in a consistent way.
• ensure they are update date with the latest versions of Vue and Nuxt frameworks

The refactored version of Ripple will be known as Ripple 2.0 and is a breaking change from Ripple 1.x.

While the changes will be mostly undetectable on the surface, the changes underneath will ensure visitors can easily use all Victorian Government websites, regardless of ability, location or device, and trust that the websites they visit are an official source of Victorian Government information.

As always, it will remain open source, and we encourage contributions from other departments and digital agencies to create improved and more consistent outcomes across government.

Whats new in Ripple 2?

Ripple 2 is a modern redesign and rewrite from the ground up based on:

• A re-worked design system in Figma, aligned to a consistent set of shared design tokens for colour, spacing, typography, etc
• new styles written in modern CSS with PostCSS and utilising CSS custom properties for consistent alignment to the design tokens
• rewritten components using new Vue 3 Composition API and Typescript RFC - Ripple design system component architecture #49
• Completely new backend for frontend API layer for simplifying working with Drupal JSON API and client payloads RFC - Ripple Tide API module #57
• new site building functionality built on Nuxt 3
• a dedicated pattern for extending ripple content templates and components based on Nuxt 3 layers

Timeline

Ripple is currently in Beta. Over the coming months we will be working to ensure it is ready and tested for production. This milestone is currently set for EOFY 2023. After this milestone, new sites launching on SDP are advised to be built in Ripple 2.

In the second half of 2023 SDP will be working on migrating custom functionality across SDP sites to Ripple 2 in preparation for migration.

Support for sites on Ripple 1.x

Ripple was released in 2018 and was built on Vue 2 and Nuxt 2 frameworks. These frameworks are now end of life, Vue has indicated it will be supported until December 31st, 2023.

SDP will maintain support for Ripple 1.x sites for 12 months. This will include critical bugs impacting site availability and security issues. Beyond June 2024, SDP will no longer provide support for Ripple 1.x sites to ensure our efforts are focussed on the future of Ripple 2.

For sites not maintained by SDP, you have the following options:

• Migrate to Ripple 2. SDP will be preparing a migration guide in the coming months to assist. However, due to differences in the Vue and Nuxt APIs this is not an automated upgrade and will require development effort.
• Stay on Ripple 1. SDP will attempt to uplift Ripple 1 over the coming months to address any outstanding critical issues. However after the support period ends, any updates to the site will not be supported by the SDP team. If a project remains on Ripple 1.x it will be at the site owners risk.
• Fork Ripple 1 and maintain it yourself. Ripple is open source and you have the freedom to maintain your own forked version. Be aware though, this will no longer be supported by SDP.

More information

The SDP team is currently working on a dedicated website for designer and developer documentation for using Ripple 2. This will include dedicated migration guides. We will be sharing a beta version of this in the next quarter.

If you have further questions please reach out to the SDP team via GitHub Discussions, SDP Slack or via the SDP Community of practice