From Marvel to Ripple: how our front end framework is fighting inconsistency across government content
Maybe, like me, you’ve seen a lot of Marvel/DC superhero movies over the years. If so, you’re probably aware of just how many inconsistencies of plot elements/settings/characters from the different series in comics books there are.
In the past, those stories/characters were developed by different people, separately. But when they decided to make a bunch of movies in the same universe, they had to think about how to avoid inconsistency and plot holes.
It’s not an issue only Hollywood has to deal with. We’ve got similar issues right here in Victoria.
Our game plan
If you haven’t heard about the Victorian Government’s Single Digital Presence (SDP) yet, let me explain it through my own understanding from a geek’s perspective. (You can also check out the official explanation in What single digital presence offers).
I’m a developer who loves to build things (not only web apps, also Lego and Minecraft). I work on the front end dev team for SDP.
I’ve helped create Ripple, the frontend framework for SDP, and I wanted to share a little about the problems it’s helping to solve and how.
When Marvel wanted to make movies set in the same universe, they got Marvel Cinematic Universe (MCU) to help them to unify the elements across all the superhero movies from Iron Man to The Avengers. No doubt, Marvel is a huge success. I believe MCU helped the audience more easily get into the story of each movie without too much confusion.
Something similar has happened here in Victoria. The Department of Premier and Cabinet (DPC) used to have about 50 websites. They were built separately, which meant a lot of inconsistencies for the end user, from content to UI elements. Those inconsistencies created pain points and frustrations that we want to get rid of or reduce.
SDP is in the process of unifying these websites, providing digital standards, style guides, tools and a technical platform to help different government agencies deliver their websites with a consistent user experience. Our goal is to make it easier for citizens to find, understand and use Victorian Government information.
If you want to know more about the origin story of SDP, I recommend having a read through Digital transformation — starting with the research.
Ripple is a really important weapon in this fight.
What Ripple is
SDP is made up of 3 parts and Ripple is the front end or presentation layer, which is what end users will see.
Ripple surfaces what most people think of as a website. It’s where Brand Victoria is visible to our users, with an emphasis on a consistent but not uniform approach to colour and design.
How Ripple works
Ripple contains 2 main things.
- A component library(Vue.js), based on SDP design system.
- A site framework to build a site with component library and content API integration (Tide) which includes:
- a CLI scaffolding tool to create a new site code in seconds
- a bunch of modules to add all the functionalities we need, like content API integration, searches and forms
Ripple is open source, you can access at: https://github.com/dpc-sdp/ripple. You can also browse Ripple components at https://ripple.sdp.vic.gov.au/.
The component library
As we need to make the UI elements consistent in the Ripple design system, building a component library for websites is necessary.
Key points
- Vue.js — The JavaScript framework we are using to build component library
- Atomic design — The design methodology to organise the components in a better structure
- npm packages — Components are packed into multiple packages so they can be used separately.
- Storybook — An awesome tool for developing UI components, our Ripple storybook is https://ripple.sdp.vic.gov.au.
What you will get and can do
- Components — Sass variables and mixins, responsive grid system, extensive prebuilt components, based on SDP UX research and design system, all can be used out of the box if you are using our scaffolding tool to create the site (A few webpack config will be required to use them in your own project).
- Custom setting — We made our Ripple component library take custom options by using Vue plugins, so you can customise global settings for all components.
- Custom theming — We made all colours, sizes, spacing in Sass variables, so Ripple component style can be overridden by using a custom sass setting file.
- Continuous delivery — We tried to deliver things just enough by a risk-driven approach, more components/improvement/features will continuous delivered by new release.
- Accessibility — SDP team aims to meet level AA of the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines 2.0, which will save your time for accessibility work.
Things I have learned
- Third party libraries — It’s not easy to find the balance between using third party libraries and writing our own code. While you get the benefit of saving time in the short term, you may get issues with the lack of support in the long term. Sometimes the third party library is too heavy for our requirements, as well.
- Work with designers — Building a design system and component library requires two-way communication between developers and designers. The work is connected, not like traditional website design.
- Decoupled model — Vue.js uses MVVM pattern, so we design component data model (viewModel) by following design instead of backend, which makes our front end and backend loose coupling.
- Platypus effect — You never know what will happen in the future, so making the code both easy to use and flexible to extend sometime is challenge. I am still learning on this.
The site framework
We want to make it easier to build new sites and reduce duplicated effort on each site development.
Key points
- Nuxt.js — The Vue.js framework for building our websites. It helps us to render the site in both client side and server side. If you want to know more about the story of choosing Nuxt, check Let’s go Nuxt which is the presentation we made at Drupal South last year.
What you will get and can do
- Ripple UI — Use module “ripple-nuxt-ui” to add Ripple UI on the site, you can override default theme settings to match your branding style guide
- Tide integration — All the content is stored in our Tide backend. Use module “ripple-nuxt-tide” to integrate with Tide content API. With this module, you can render all the content from Tide in Ripple UI. Also including:
- Searches
- Forms
- Menus - CLI scaffolding tool — We want to make creating a new SDP site as simple as possible, with this “create-ripple-app” tool, we are able to create a site in seconds in command line. We also have another automation tool to automate the Bay/Tide/Ripple installation which will use this as part of the task.
- Preset config — SDP is aiming for consistent UI/UX, which means the site should not have too many differences. Preset configurations will meet most of the requirements and reduce the custom site work.
- Extensible — We still need to let custom work be added without too much effort, custom content types, components and integration with other services can be added with our custom config/module or just in Nuxt.
Things I have learned
- The balance of consistency and flexibility — To provide more flexibility is a good thing, but it also means more complexity and cost. I’ve learned to make decisions informed by risk, to avoid over engineering.
- Make things dynamic — By making routing, components loading and form rendering all dynamic, we get as much loss coupling as possible, which makes things more flexible.
- Testing — End to end testing and integration testing is really important for a project like SDP. However it’s not easy work and there are so many edge cases, we are still learning and making improvements.
The SDP team has made a lot of effort to support consistent user experiences across government content. We hope users will enjoy our websites just as much as audiences have loved the Avengers movies.
There are so many things I could tell you about Ripple, this is just a start. I hope it will help you. Any questions? Please feel free to comment on this post or check out the Github repository: https://github.com/dpc-sdp/ripple/.
