What is a headless content management system?
In recent years the need for headless content management systems (headless CMS) has become increasingly important. At its most basic, a headless CMS is used for managing content while a different tool delivers the user-facing experience – what we usually call the front-end. An application programming interface (or API) is used to connect the two, and transfer content and data between two systems.
We can broadly divide a CMS in two parts:
- The first is the “head,” which contains the components that a visitor will see. It consists of templates and design elements.
- The second is the core CMS, which is solely responsible for managing content. In ExpressionEngine, this includes Channels, Fields, and Entries, among other things.
The term headless means the system only cares about that second part. It doesn’t bother with the front-end representation of the data. It returns responses in the requested format. A headless CMS can power many different platforms (websites, mobile apps, games, e-commerce shops) all at the same time.
Why do we need headless systems?
A headless CMS gives developers more liberty in managing and accessing content. For example, a headless CMS is a popular choice in mobile application development because the API allows the flexibility to deliver content for both iOS and Android directly from the same back-end data source. Headless development is a good choice when:
-
You need to scale quickly.
A headless CMS separates the design and front-end UX from the implementation of back-end content management capabilities. When it’s time to publish and scale content quickly, front-end and back-end development teams can work independently. You need to create personalised, interactive digital experiences. During the pandemic, many e-commerce companies were forced to come up with innovative ways to engage with customers as they closed physical locations. The pandemic accelerated many organisations’ digital transformation plans, requiring them to provide their services on different platforms from a single headless CMS. -
You need to streamline business processes.
Streamlined business processes provide a competitive edge; separate processes force people to work in independent silos, and often in an inefficient sequence. For example, sales teams spread across different regions might rely on a headless CMS to maintain sales flows and CRM management. -
You need to redesign a website but leave a mobile app as it is.
Redesigning a site built on a headless system is always easier because the content remains the same, separating design considerations from content manipulation.
Craft CMS support for headless development
In the backend config settings Craft features a headless mode toggle. Enabling this means the front-end is no longer built using Twig templates. Instead, a separate front-end built on fast languages like Vue or React can be used. Toggling headless mode also makes the following changes:
- Template settings for sections and category groups are hidden.
- Template route management is hidden.
- Front-end routing skips checks for element and template requests.
- Front-end responses are JSON-formatted instead of HTML.
- Twig is configured to escape unsafe strings for JavaScript/JSON rather than HTML for front-end requests.
- The loginPath, logoutPath, setPasswordPath, and verifyEmailPath settings are ignored.
In addition to these standard headless features, the Pro edition of Craft has GraphQL enabled, which is used to identify the request and response formats of a particular channel/section. If you require specific customization, the default GraphQL tab in the CMS panel shows different formats required for different sections, and also supports mutation allowing for insertion of data in the CMS. The ‘enableGql’ config variable can be used to enable or disable GraphQL support. Craft also provides support for API development using GraphQL or normal controllers returning JSON values.
ExpressionEngine support for headless development
ExpressionEngine provides support for headless API building. Same as the other headless CMSs, it also provides JSON responses to the APIs.
We can create a template as type ‘Javascript’ and use native HTTP Header addon’s tag to generate the json response header for that template.
We can use all the ExpressionEngine tags (along with custom modules) at this template. We only should care about the formatting of the result as that has to be in JSON format.
So far, this development is restricted for getting responses, so no API keys or any other authentication is required. However, we can develop our own addons that should do the authentication, if there is any such requirement.
The two other addons that are already working in this area are Bones and Reinos Webserver. These addons provide quick support for channel entry and channel category tags, and provide some tags to be used as JSON responses, while excluding the other items that a default channel entry tag typically includes.
However, due to the open and unrestricted nature of ExpressionEngine, it’s very easy to build modules that serve as ACTs and send responses in JSON from specific modules/tables/channels as needed by your application. We at Hop Studios have a lot of experience with this!
ExpressionEngine also provides the capability to create JSON pages natively rather than HTML; this makes it much easier to access them as responses rather than investing more time in headless development.
So, which one is better: EE or Craft CMS?
Both of the CMSs we’ve talked about provide good support and extensibility for headless development, and Hop has worked with both. However, given the choice, we would likely recommend Craft CMS for this type of project simply because headless development was clearly and thoughtfully added into its core. It provides extendable Events/Actions that we can use to build our own API endpoints. However, if you are already running ExpressionEngine, we wouldn’t necessarily recommend migrating to Craft CMS — ExpressionEngine can work for headless development. And, the ExpressionEngine team is adding additional headless development features to the CMS. In the next releases we hope to see new features in ExpressionEngine that support headless development without using any third-party add-ons.
We are here to help!
If you want to extend your existing business from the web to a mobile platform, we can help! 😉
Whether you’re running on ExpressionEngine or Craft CMS, we can assist you with your plans to extend your website to a mobile app or other platforms. Let us help you with digital transformation!