Decoupled & Future-Proof

Acro Media

Upgrading from Drupal 7 to Drupal 9 allowed us to build for the future, improve performance and accelerate development speed.

Project highlights


Modern headless architecture

Drupal 7 to Drupal 9 upgrade

Design system & React front end enablement

Acro Media Logo

As technology advances, businesses needs change, no matter what industry you are in. Being future-ready is a key priority for Acro Media.

Drupal 7 was the backbone of the old Acro Media website. Drupal 9 is now live, which means that Drupal 7 will soon be unsupported, leaving the potential for security concerns and unsupported code in D7. Drupal 7 also handled both the front and back ends of our website, a structure that is becoming outdated. So, we thought the upgrade was a good time to give things a complete overhaul.

  • Modern headless technology 
  • Latest version of Drupal (Drupal 9 at time of writing)
  • Best-in-class digital ecosystem
  • API-first architecture

The new Acro Media site is the launchpad of our next-generation framework for all the new sites that we build, not just for ourselves, but for our clients. The outcome will be reduced time-to-market, complexity and costs for organizations looking to sell online or digitize outdated sales workflows.

Gesso — Acro Media’s decoupled accelerator

Build rich online shopping experiences that embody your complex products and services faster. 

Objective

Drupal 7 end-of-life, headless architecture and building for the future.

With Drupal 7 end-of-life looming, it was time for Acro Media to do what it has been coaching its clients to do: upgrade to Drupal 9.

Why not just upgrade to Drupal 8? 
Drupal modernized with the release of Drupal 8, built around a concept of continuous innovation and faster release schedules. Drupal 9 was the latest version of Drupal, so we went with it. You can read more about that here

Building future-proof architecture
Designing and moving to a headless architecture setup using best-in-class technology allowed us to improve our in-house skill set. These skills enable us to deliver this style of modern development in an Agile project for current and potential clients, should they desire it.

Become leaders in the headless commerce space
Using cutting-edge technology and gold-standard best practices; we plan to use the experience gained in this project to herald a single vendor strategy for the development of modern technology architecture solutions.

Solution

Every project needs a plan, and this one was no different.

The roadmap of our build and the design of our new technical architecture and content strategy took some time and a few wild turns. 

What started as a simple upgrade of our current D7 site turned into a foundation that showcases our ability to build a modern, headless web app, the up-and-coming gold standard for commerce website architecture. This build has become the launchpad for new builds for clients that require the same adaptability and future-proofing.

Modern decoupled architecture

This project used a decoupled, or headless, architecture strategy with Drupal 9 as the CMS back end and using Next.js and React with a full-featured design system to display the content on the front end. Simply put, modern architecture designed with scalability and growth in mind.

Drupal 9 backend / Data / API

Configuring the Drupal back end is the same as it always was, so there are no new learning curves. We ensured that the fields we added are matched well with what our React component props expect. There was some customizing needed to Drupal’s built-in JSON:API, but these were minor.

React front end

Using Next.js and a series of factory components, we connect to Drupal’s API to grab the JSON data we need, whether it’s a menu, content type, paragraph, etc. We then map the data to the necessary React components and their props to render the frontend.

Figma design system

Figma holds many token values (variables) that we use to style our React component library. Whether it’s font size, margins, colours, etc., each token shapes our components. Not only that, but Figma is also used to design the component using the same tokens, which help us ensure a high degree of accuracy between design and code.

Material UI

Our design system leverages Google’s Material UI (MUI) instead of starting from scratch. MUI provides a robust, customizable, and accessibility-ready library of foundational components, enabling us to build our own design system and develop React components faster.

Storybook component library

Storybook previews our components while developing them and provides an environment for viewing all of our components in one place. Each component has usage examples and documentation and is a good resource for anyone using design system components while building out a front end.

Lagoon

Lagoon is a tool used for handling project deployments to Kubernetes. It works by listening to webhooks (notifications) from GitLab for specifically set branches or merge requests. When a branch whose name matches that which is configured is deployed, Lagoon receives a notification that the branch has been updated. It then pulls the code down and builds the application using the project-specified docker images. Once the images have been created, they are deployed to Kubernetes.

Kubernetes

Kubernetes is essentially site hosting via docker images. It is an application that manages docker containers, and these containers host your application. Kubernetes automatically scales the application as more users start to use the app.

Outcome

Modern architecture design, the newest version of Drupal and a path for the future.

This build took our team of experts ten months from concept to launch. 

The group included: 

  • Software Team Leads – Mike Dupree & Shawn McCabe
  • Project Manager – Keddy Pavlik
  • Developers – Mike Hubbard, Clayton Bildstein & Micah Joyner
  • Creative team – Jason Poole, Anders Paulsen & Chris Arlidge
  • Marketing team – Becky Parisotto, Hailey McNeil & Laura Meshen
  • DevOps – Jesse Grunert & Dale Anderson

The project ran in two-week sprints using story points for estimation and employed an Agile project management component that made for clear communication and accelerated development as all teams worked in parallel.

After about 2,000 billable hours’ worth of development work, our final launch took place in two hours and resulted in the current version of our website. 

While the upgrade from Drupal 7 to Drupal 9 is a significant outcome for this project, the lasting value of this build will be in the projects to come. Enabling a headless front end using React, implementing a robust and elegant design system via Figma and wrapping it up in a nice, neat package on which we can base all future client builds of this nature.

Project statistics & features


Design system implemented

Headless frontend using React

Drupal 9 upgrade complete

Launchpad for future builds

Let's talk about your project

No matter what stage you are in, we would love to talk to you about your project. No pressure, no obligation, just straight talk and helpful insight.