The Future of Web is Headless

Today, companies seek a modular approach to constructing websites using best-fit services rather than a monolithic, one-size-fits-all CMS solution. In this paradigm, website content is stored and managed by a different provider than the backend, enabling the marketing team to create and update content easily. 

The expression "Headless" refers to an application infrastructure without a frontend. A headless CMS only includes an API and a backend system linked to a database for storing data. Different platforms and delivery channels can pull data in the backend.

CMS is a content management system that enables users to manage content without specialized knowledge of code. 

Decoupling the CMS from the backend is a method employed by companies looking for scaled digital experiences.  For example, you may want to deliver website content to other channels, like apps or display data from an external API to your site. 

Traditional (Monolithic) CMS

1. The CMS is hosted on a server front-to-back, managed through a  single platform
2. The go-to-market is fast
3. Vendor lock-in and low developer freedom 
4. Hard to repurpose content for multiple frontends (web, mobile, native)
5. CMS has to render markup for every page dynamically

 Examples: Webflow, WordPress, Drupal

note:  headless WordPress is traditional CMS with API attached.

Weblfow, which we design in frequently without code, actually requires Javascript code in your page settings to connect to an API. Xano does a great job of explaining how to map outside data onto your Webflow site.

https://www.youtube.com/watch?v=HMsrFzoZYr0

You can also check out Udesly 50 – It's a tool which connects the Webflow frontend to various other CMS.

Decoupled CMS

1. Same CMS system
2. The backend and frontend integrated through API
3. Content can be accessed through different channels

The decoupled CMS model is being used today by developers in both Drupal and WordPress. WordPress & Drupal 8 both include a JSON

Headless CMS

1. Decouple the CMS, frontend, and backend
2. The CMS focus is solely on managing and editing the content,  and  devs are empowered to use whatever front or back end they want
3. Content-first, cloud-based, API-driven, backend only CMS 
4. Developers choose the front end technology.
5. Content is managed in a repository - separate from front and backend.
6. Can be consumed by any channel or frontend through Restful API 
7.  Create, modify, edited, then exported and single page app, social media, app, 
8. No pre-defiend template
9. Content can be sent from the cloud to your website, signage, app, or landing page. 

Examples:

Git-backed content is in the form of text files where editors and developers use the same workflow.   

Cloud-based, API-driven Rest API gives one single source of truth; you don't have to use build tools.  . content is living in a database and editors use cloud-hosted CMS. JSON responses. (Agility, Contentful, 

Hybrid CMS

1. Content repository
2. Steep learning curve

Examples: Adobe Experience Manager

Headless Commerce

 Headless commerce describes separating an e-commerce application's frontend and backend. This decoupled structure provides freedom to create user experiences that match their business objectives.  

To sum up, headless website development let frontend developers use the right tools for each project to deliver richer user experiences, while the marketing team focuses on the right platform for managing and distributing content.

In upcoming posts we'll dig into techniques for building headless websites.

‍