Decoupled CMS architecture (aka “headless”) is rising in popularity in the development world. This model allows breakthrough user experiences, gives developers great flexibility to innovate, and helps site owners future-proof their builds by allowing them to refresh the design without re-implementing the whole CMS. With all this upside, it’s no wonder this type of build has gained serious traction in both the Drupal and WordPress communities as of late.
Drupal and WordPress are both traditionally “monolithic” CMSs, with presentation baked in via the theme. However, due to the need for more flexibility and freedom, many developers have begun decoupling the CMS, using it for content management, editorial, and administrative tools, while implementing a separate frontend component that communicates with the CMS via API.
Understanding Decoupled Architecture
There are a few main differences in decoupled architecture that make it so compelling for certain projects.
Presentation can be handled in a variety of ways, from interactive JS frameworks like Angular, to static generators, to mobile apps, or even another CMS. Multiple frontends can peacefully coexist.
Content Via Web Service API
The content for the site is accessible via a web-service API, usually in a RESTful manner and in a mashup-friendly format such as JSON.
CMS Backend and Database
There is a traditional database-driven CMS which editors use to maintain the content for the site, usually via the same admin interface as always.
Why Does Decoupled CMS Matter?
By shifting responsibility for the user experience completely into the browser, the headless model provides a number of benefits:
- Value: future-proof your website implementation, lets you redesign the site without re-implementing the CMS
- Sets frontend developers free from the conventions and structures of the backend. Headless development not only eliminates “div-itis”, but it also gives frontend specialists full control over the user experience using their native tools.
- Speeds up the site by shifting display logic to the client-side and streamlining the backend. An application focused on delivering content can be much more responsive than one that assembles completely formatted responses based on complex rules.
- Builds true interactive experiences for users by using your website to powerfully functional in-browser applications. The backend becomes the system of record and “state machine”, but back-and-forth interaction happens real-time in the browser.
Headless website development has the potential to unleash the creative power of frontend developers to deliver richer, faster, and more responsive user experiences.
What Can You Do With It?
- Static: the user-facing website is built via a static site generator that pulls from the CMS, allowing clean, elegant markup. Little to no end-user interactivity, but great for beautiful and scalable sites.
- Hybrid: a portion of the website is highly interactive and communicates with the CMS via API. This is great for advanced editorial tools, calculators, or dashboards.
- Single page app: the end-user experience is a complete application-in-browser, usually leveraging one of the newer JS frameworks such as Angular, Ember, or Backbone.
- Native app: the frontend is a native mobile app. Users may or may not also interact directly with the website.
- CMS2: you can even decouple a CMS with another CMS! This allows you to create a strong separation of concerns between content and layout/presentation, while still using familiar tools for both.