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 Commerce 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 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 strategy for developing 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 development accelerator 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 Next.js paired with React and 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 matched well with what our React component props expected. Some customizing was 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 front end.

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 helps 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 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 what 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 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.