7th July 2023

How we use Headless CMS at Vodafone

Vodafone Engineering
Joe Vinten
Software Engineer

Over the last year or so, the Vodafone engineering team has been working on how we can better deliver our content to customers regardless of device or geography. Traditionally, we have used page-based content management systems, which can constrain content editors with artificial boundaries, making it harder to create, update, and standardise content. This article follows our journey into Headless CMS, how we use it alongside our architecture, and what benefits that has given us.

Introduction

At Vodafone we have adopted a microsite architecture to cater to our diverse needs and audiences. This allows us to work at pace and really “get stuff done”, releasing code independently and multiple times a day. Underpinning this approach is our usage of a headless content management system, namely Contentful. But why have we chosen to go headless, and how does it benefit our specific use case?

As a large multinational organisation, the flexibility to remain platform-agnostic and not confined by specific technologies is pivotal for future growth and adaptability. Embracing Headless CMS architecture allows us to centralise content creation, management, and storage. This readies our content for delivery across any device or application. In the development teams, it enables us to focus on delivering new feature and giving the responsibility of composing pages to content editors.

By utilising Headless architecture, we are able to establish a uniform content layer across our brands, geographies, and micro-frontends. This streamlined approach enhances workflows for both content editors and developers, bolstering collaboration and productivity. Because each component can be developed and evolved independently, we have flexibility in assembling these parts to create bespoke solutions. This modularity epitomises composability, underpinning our ability to swiftly adapt to new business requirements and technological advancements.

Contentful encapsulated our needs and requirements and therefore is our chosen vehicle to embrace Headless CMS architecture to reap the aforementioned benefits.

In this blog we will go through some of the ways that we are utilising Contentful within Vodafone, from the tech and how we’ve integrated it with AWS to how we’ve synced this up with SourceWeb, our global design system.

Down to the Tech

Under the hood we utilise; webhooks, API Gateway, and AWS Lambda. We utilise webhooks on publish or unpublish of content. This contains all the necessary information, or payload if you will, about the event such as what content was changed. We then utilise API Gateway to handle all those incoming API calls from Contentful’s webhooks, which act as a door between our back-end services and the external world. We then top this off with AWS Lambdas as part of our ‘serverless’ architecture to handle the various actions such as publishing, page rendering, and previewing our content.

From a users point of view

In this context, when we refer to 'users', we are specifically referring to the business users, namely the content editors and developers, who make use of our service.

Let's consider a typical scenario: a content manager needs to add a new device to our online shop. They would need to go into Contentful and update several fields, such as the title, image, and any SEO-related details. Once these details are finalised and ready for release, the content manager would then hit the “Publish” button.

Here's what happens behind the scenes when the 'Publish' button is clicked:

  1. A webhook is immediately triggered and sends a POST request to our API Gateway.
  2. The API Gateway, upon validating the request, forwards it to Amazon Simple Queue Service (SQS), adding the event to the queue for processing.
  3. The SQS, acting as an event source for the AWS Lambda function, automatically triggers the 'Publish' Lambda whenever there’s a new message in the queue.
  4. The 'Publish' Lambda then processes the event data as required, which includes:
    • Retrieving the event id of the Contentful entry that was published.
    • Determining the entries that this item references, up to the top page level.
    • Constructing an object containing a list of page IDs to re-render and sending this object to the Page Render Queue (another SQS).
  5. The Page Render Queue triggers the 'Page Rendering Manager' Lambda, which oversees the rendering process (excluding the actual rendering of the pages, which is performed by another Lambda invoked by this one). This process includes:
    • Making calls to Contentful to fetch data for specific page id(s).
    • Invoking the 'Page Generator' Lambda for the site/space with page data and receiving rendered HTML from this Lambda.
    • Saving the rendered HTML to an S3 bucket at a new path and updating the record in the database.

Upon completion of these steps, the content editor will be able to see the new device on the corresponding page of our website.

This final process, which is completely transparent to the end user, allows us to manage and distribute content in a highly efficient, scalable, and real-time manner, showcasing the power of our modern technology stack. Owning the stack like this gives us, the developers, a greater autonomy and empowers us to have control over the final product. We don’t have to rely on databases or backend services, instead we as a full stack team are able to quickly deliver changes in our own team.

Joe Vinten

“Working on the Contentful project at Vodafone has been pivotal for my personal and professional development. The project has quickly become the centre of what we do in Vodafone Engineering and has allowed me to innovate and collaborate. The best thing about it is you can quickly see the impact our innovations have on both developers and end users.”

Using SourceWeb with Contentful

At Vodafone we use an inner-sourced global design system, SourceWeb, to build and deliver highly consistent and scalable digital experiences. We contribute and consume SourceWeb (and other libraries!), across all our web engineering teams. This enables us to reduce frustrating blockers, reimplement components with ease, and improve the developer experience by having expertise from the entire engineering team.

Within our Contentful integration, we have leveraged the content modelling capabilities to incorporate this into the build so content editors update directly into SourceWeb components. When the field is updated in Contentful - be that with simple text, rich text, or any other configured data type - the new content is seamlessly passed into the corresponding SourceWeb component we have mapped for it. This simplifies our content management process and ensures that our digital experiences are aligned, in design, usability, and accessibility standards.

This is especially useful when updating static marketing pages and allows us to build, update, and delete at speed.

Contentful in the hands of our Software Engineers

When we’re talking about more dynamic pages - think about our e-commerce pages - those development teams will need to use the REST Content API.

If we were to give an example, let’s envision that a developer needs to show all of our mobile phones in some sort of grid. The first thing they’d need to do is a GET request to our Content API, passing amongst other things the content key that points to the phone inventory in Contentful.

From here, the developer will get a JSON response with all the data that relates to that content key. They are then free to own that data and feed it into their own, generally SourceWeb, components.

You can view this happening in our pay monthly pages where we are serving the data from Contentful in the grid list. Here that development team makes the Content API GET request and then just simply feeds the data they get into the React components. in some cases, the data we get is rich text. With this we use Contentful’s rich text renderer which enables our content editors to make use of all the capabilities of rich text, reducing the need for developers to do any basic editing of the content itself.

Our utilisation of Contentful empowers our developers with flexibility and enables them to continually craft and enhance the micro-frontends that drive our dynamic pages. Not only this but it ensures consistency across different micro-frontends, facilitating easy contribution across these services. As developers, the level of uniformity simplifies content integration across multiple areas allowing us to leverage and implement established patterns rather than customising each content item and component individually, as we might have done in the past.

The efficiency gained from utilising technologies like Contentful means we spend less time on working on these sort of tasks giving more freedom to delve into new technologies and improvements - something that we regularly engage with at Vodafone with 20% of our time dedicated to tech enhancements.

Furthermore, empowering content editors means our pages stay fresh, up-to-date, and can adapt at lightning speed.

Conclusion

In conclusion, our adoption of a Headless CMS architecture has proven to be a game changer for our content management and delivery processes. By enabling a centralised content hub, we have been able to streamline workflows and provide our users with the ability to deliver content to any device or application. Headless architecture has provided us with a flexible, scalable, and real-time solution which has allowed us to remain platform-agnostic and not confined by specific technologies.

We have integrated Contentful with our AWS architecture, webhooks, API gateway, and AWS Lambda and have synced it up with our global design system, SourceWeb. This powerful combination has enabled us to build and deliver highly consistent and scalable digital experiences.

The positive impact on our development teams is considerable. From the point of view from those building the CMS, we’ve been enabled to own it end-to-end and directly influence the technology. Developers who use are consuming the API have also been given a consistent experience where the time they spend editing content has been greatly reduced by introducing a uniformed and consistent content management system.

As we continue to roll out this new architecture, we are looking to make improvements as we venture on. We are confident that by continuing to innovate, we will improve our content delivery and provide the best possible experiences for our users.

Did you know we're an award winning team?

We recently won 'Development Team of the Year' at the computing Digital Technology Leaders Awards 2023. 

So not only do we work with and develop systems that help to have an impact on our developers and end users via Headless CMS, we're also award winners too!

Come and join the fun!

Engineering Technology
Woman looking at computer screen smiling

Jun 11th 2024 | Blog

Engineering at Vodafone UK | Hear from our People – Stef

Software Engineering

Jun 11th 2024 | Blog

Engineering at Vodafone UK | Hear from our People – Mallika

Team at Fun Work Event

Jun 11th 2024 | Blog

Engineering at Vodafone UK | Hear from our People – Stacey