Headless web architecture will change the internet

With the rapid shift to a digital-first world brought on by the pandemic, the pressure put on companies to provide strong digital experiences has only accelerated - from the need for fast-loading, responsive websites and highly accurate personalization to providing consumers with a consistent and seamless experience across channels. Delivering on these demands can be challenging, especially for enterprise businesses with legacy web infrastructure that may struggle to move as quickly as to meet consumers' changing needs. 

Many enterprises are turning to headless architecture to tackle these demands and move with the speed and flexibility required to deliver superior experiences across their digital properties. But what exactly is headless, and what does it enable for developers? We recently chatted with Jason Bahl, Principal Software Engineer at WP Engine and creator of WPGraphQL, to hear more about headless architecture, its benefits and challenges, and what he anticipates the future holds for headless.

ADM: What is headless architecture? 

The term headless at its core means “no front end.” Specifically, headless is a type of web architecture where the front end, the “head” (the graphical user interface or GUI) is decoupled from the back end, the “body” (where the code and data live). In a headless web architecture, the front end and back end work independently. Sending content, such as product information, is facilitated by using an application programming interface (API) that can be connected to various channels, such as a smartwatch, mobile app, voice assistant, or digital kiosk screen. Developers can then create a user interface on the front end tailored to each user, application, and screen. Organizations that use an entirely headless solution will typically host a separate JavaScript application for the front end, which pulls specific data via APIs such as the WordPress REST API or the GraphQL API provided by the WPGraphQL plugin. 

The headless content management system (CMS) approach essentially allows companies to use the same bucket of content for various outputs. This means organizations are able to attain a level of agility and flexibility across their digital channels that exceed traditional CMS use.

ADM: Can you share more about the history of headless adoption as well as your perspective on the current state of headless?

Headless architecture has been around for quite some time, although it hasn’t always been officially referred to as “headless.” My personal introduction to WordPress, for example, was as a headless CMS in 2008 before it was called headless. I was building flash sites and needed a way to let users update content without knowing how to write ActionScript to modify the Flash source code. I then discovered WordPress and its XML-RPC API and have been working with it ever since then.

In recent years, headless architecture has been rising in popularity, particularly among enterprise organizations that have complex digital needs. In fact, in our international study on headless, we discovered a nearly 25% increase since 2019 in the number of enterprises using headless. While the majority of enterprises are already using headless, of the organizations that are not, more than 90% plan to evaluate headless solutions over the next year.  Since headless enables organizations to deliver dynamic digital experiences that consumers increasingly expect, it’s unsurprising that headless adoption is surging.

ADM: Why do companies choose headless architecture? 

Headless architecture is an attractive option for many enterprises because it can help them save time and money while increasing agility and performance. With headless, companies can use the same repository of content for various outputs, enabling them to move faster and with more flexibility in terms of where and how they present their content. Since their content resides in a different location from their front-end delivery, headless can also help tighten security by reducing the exposure to third-party application issues. 

In addition, headless allows companies to future-proof their content because as long as the API endpoint is there, content can be pulled from it. Companies also have more flexibility in migrating content if needed since they aren’t tied as tightly to themes and plugins. 

Further, headless unlock additional opportunities for ROI by removing the need to re-platform. Companies can keep their back-end CMS while APIs navigate the digital touchpoints on the front end. This means that even when a company makes updates on the back end, the customer’s digital experience is never disrupted. Simply put, headless makes it easier for organizations to deliver a consistent content experience. 

Overall, headless provides an agile web configuration that enables organizations to create fast web and mobile pages, enhance their security, and deliver an overall consistent and connected content experience across all of their digital properties. 

What kinds of digital experiences/outputs does headless help companies deliver?
Companies are currently using or planning to adopt headless architecture to deliver a variety of digital experiences. While websites are an obvious priority for many,  headless technology can help organizations deliver content beyond their website, including mobile apps, smart devices, and voice assistants. Based on our study on headless, websites, eCommerce, and Internet of Things (IoT) are the primary digital experiences respondents aim to deliver along with digital voice assistants, virtual reality, augmented reality, and native mobile apps. 

ADM: What does headless enable for developers, specifically? 

Headless offers numerous benefits for developers, including scalability, flexibility, easier integrations, and additional freedom. With a headless CMS, companies are creating a developer-focused, API-first system, instead of concentrating on how the back-end administration is going to feed the front-end design. Developers have more choice because they can use the application technology they are already familiar with, such as a React-based framework like Gatsby or NextJS. 

Headless architecture can also be much easier to scale, as it divides the processing between the front end and the back end and enables developers to distribute their front end close to their end-users, cache data from their API to use in other implementations, and free up their back end from having to deal with rendering.

In addition to greater flexibility and scalability, headless allows developers to more easily make integrations with other software. With headless, the client application is responsible for integrations, such as those often required by complex enterprise websites like a customer relationship management system (CRM) or enterprise resource planning system (ERP), and the JavaScript ecosystem is a first-class integration point.

ADM: What are some considerations companies should keep in mind when thinking about implementing headless technologies?

Although headless architecture comes with many benefits, like with any technology or software, there can be challenges at the onset, and it may not be the right fit for all organizations. While smart engineering can relieve some of the growing pains, companies should keep in mind a few considerations related to security, overall solution management and developer skills when determining if headless is a good option for their organization.

For example, while one of the benefits of headless architecture is enhanced security, implementing new security factors such as securing APIs or requiring different credentialing of users can be somewhat daunting to companies who are new to headless. Relatedly, companies should keep in mind that they’ll likely need some advanced programming libraries in order to maximize their headless system. This could introduce a learning curve for some developers, and companies that don’t currently have a front end programmer would need to add one to their team.  

As with the adoption of any new technology, organizations should take into account their needs and goals along with these considerations to determine if headless is the right fit.

ADM: What potential pitfalls might developers face in adopting a headless web architecture, and how can they mitigate these challenges?

As mentioned previously, developers may face a learning curve when implementing headless technologies for the first time. For example, certain advanced programming libraries or new security factors like securing APIs may require additional expertise or training. Additionally, developers should be aware that headless architecture may change the effectiveness of some plugins. With headless WordPress, for example, some plugins that were previously used to modify front-end behavior may not have the same effect on a headless web architecture, which limits the control of content publishers and marketers and could alter the typical workflows developer and content publisher teams are used to.

However, one way to mitigate these pitfalls is by using certain plugins, such as Custom Post Type UI, that expose their data to WPGraphQL and allow for the headless client applications to make use of the data however they'd like. By using plugins that treat their data separately from their presentation, developers can use plugins within headless applications more easily. There’s also an opportunity for a new sub-ecosystem of headless plugins to arise. With data exposed from the CMS, there’s room to release component libraries that allow headless application developers to add support for the data with minimal effort.

ADM: What do you anticipate the future holds for headless?

As we move further into an all-digital, multi-device world, I expect headless adoption to continue rising. Organizations increasingly see its value in delivering powerful digital experiences that match the ever-increasing demands of their customers. The use-cases for headless will only continue to grow as organizations become more familiar with the technology and look to deliver content across more and new channels. With the rapid move to headless already underway, headless is poised to become the industry standard for enterprises that want to build powerful and connected omnichannel experiences.

About Jason Bahl

Jason Bahl is a Principal Software Engineer at WP Engine where he builds and maintains open source software for the web. He’s also the creator and maintainer of WPGraphQL, a free, open-source WordPress plugin that provides an extendable GraphQL schema and API for any WordPress site. When he’s not writing code he enjoys playing soccer and racquetball and enjoys Escape Rooms. He lives in Denver, CO with his wife and 2 sons.