Headless CMS and Front-End Frameworks (Vue, Angular and React)
A Traditional CMS
A Content Management System (CMS) serves as an abstraction over managing the back-end and front-end of a website and has often tied the two quite closely. One of the most popular CMS platforms, Wordpress, allows anyone with minimal to no coding experience to be able to deploy a website that will manage data, render templates, and add functionality with an endless array of plug-ins for any use-case imaginable.
Despite all these benefits, there are many downsides to having a CMS handle so much.
- Server-side rendering can be cumbersome especially as websites grow in scale and scope
- The data will not be out of the box useable on other platforms like IoT appliances and mobile devices.
- Increased burden on the server and bandwidth
To eliminate the issues above developers began programming their back-end applications to only serve data through RESTful APIs and more recently GraphQL APIs (these can then also be used to deliver other platforms like mobile and IoT appliances). This freed the server from the burden of rendering HTML templates and then sending larger rendered templates. Yet, there was still a demand for the dynamic rendering server-side rendering provided, enter the single page application and the front-end framework. These technologies allowed dynamic and fast websites by focusing the rendering back in the browser on one page to avoid the slowdown of re-rendering entire pages. These frameworks such as Angular, React and Vue instead monitor for changes in data and only re-render the portion of the website that requires it.
A New Problem
People love Wordpress because you don’t need to be a developer to do amazing things. Most small web entrepreneurs don’t have the resources to hire developers to create a back-end API then create a front-end application. So now people are creating what is called a headless CMS, a CMS that abstracts only the back-end data management and API delivery. Whether you use a static site generator or front-end framework to deliver your information is up to you. This allows many to take advantage of the benefits of modern designs without being boxed into a particular framework or toolset.
When I first learned about this new category of Content Management System, I was excited to take it out for a spit. I found Contentful and opened a free account and create a model for a blog with a simple title and content design. I created a handful of posts and have been using it to create several front-ends using different technology. I’ve created front-ends using basic HTML/CSS, VueJS and Angular 8 and plan on making more using React, StencilJS and Svelte to test the robustness of the headless CMS paradigm and also improve my own chops with front-end technologies.