“Off with their heads!”
The frontend developers’ call to arms echoed throughout the realm. All across the Internet lands, monolithic, traditional CMS shivered.
Seriously though, we’re finally going to discuss API-first CMS—aka decoupled/headless CMS—on the blog.
From GitHub forks to email inquiries, we’ve noticed an increasing interest in “going headless” in general, but also for e-commerce purpose. So today, we’re going to:
- Discuss the what, why and when of API-first CMS.
- Show how to code a transactional web app with content managed in Directus, an open source headless CMS.
More specifically, I’ll explain how to build a lookbook using a full JAMstack: Metalsmith, Vue.js, Snipcart, and Directus. I’ll even throw in an open source code repo & live demo. :)
First, let’s try to understand how API-first CMS can add value to your workflow.
“API” still sound like a kind of beer to you? Read this smooth primer first.
What is an API-first, headless CMS? Why use one?
Like traditional content management systems, API-first CMS let users manage content through a web UI. So how do they differ?
API-first CMS allow developers to decouple content management from content rendering. A coupled CMS, like WordPress, takes care of both: content is stored in a backend database AND rendered in frontend templates using HTML/CSS. So the “head” that’s missing from a headless CMS is actually that final “presentation layer”:
Unlike a traditional CMS, an API-first CMS exposes its content data via a consumable API.
Your headless CMS isn’t concerned about how you choose to display content. It pushes raw content (e.g. JSON or XML) for you to fetch and display anywhere: mobile app, static site, web app, desktop app, IoT device… or all of these at once!
Headless CMS architecture
So why have they become popular? Why are companies like the NY Times, Lenovo, Spotify, Nike, Apple, Microsoft & New Relic using them?
Because the web has evolved! Frontend tooling & frameworks have exploded. Traditional CMS have become limited in how they display content and are prone to many security exploits. Cross-platform content management has become essential to many projects. Static site generators have resurfaced, opening a content management gap API-first CMS could fill, saving non-technical folks from editing Markdown files.
We have many tools and channels to build digital experiences today.
With headless CMS, content can seamlessly follow different forms, not be limited by one.
API-first CMS: Benefits
- Organizations save time & money: reduction of overhead for cross-platform content management.
- Developers get more freedom: ditching CMS templates makes for authentic UX. Fewer worries about backend scalability and maintenance.
- Content is future-proof: reduced impact of migrations & re-designs since content is decoupled from frontend.
- In some cases, more performance: content is pre-baked and ready to be served.
API-first CMS make for a clear separation of concerns which enhances developer productivity. They foster a technology-agnostic approach to development that resonates with our own product’s values. If you’re interested, we have an in-depth tutorial on decoupling data with Vue.js in the frontend.
Drawbacks
Most potential drawbacks (supporting user permissions, multi-languages, etc.) have already been solved. Still, a few potential issues worth mentioning:
- Might be overkill for a simple website project.
- Might not provide responsive UI for on-the-go content management.
- Might not support website tree architecture for content navigation.
- Might be expensive for client budget.
#api #cms #api-first #headless cms #open -source
