Decoupled & Future-Proof
Upgrading from Drupal 7 to Drupal 9 allowed us to build for the future, improve performance and accelerate development speed.
As technology advances, businesses needs change, no matter what industry you are in. Being future-ready is a key priority for Acro Commerce.
Drupal 7 was the backbone of the old Acro Commerce 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 Commerce 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.
Seamlessly integrating ecommerce and content with streamlined sales operations.
- Eliminate limitations that exist with direct platform integrations
- Integrate with any technology platform, including legacy systems
- Build an ideal customer journey for any channel without restrictions
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.
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.
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 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 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.
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.