The term headless CMS has gained a lot of traction in recent times. As per the research 86% of people feel positive about headless CMS. But what is Headless CMS and how it’s different from Traditional CMS? Here in this post, we have covered what is Headless CMS, its best practices and much more.
Being a headless CMS, it brings all the cakes you could expect from a headless CMS. But this isn’t just a headless CMS as itself says “More than a headless CMS, Contentful is that the API-first content management platform to create, manage and publish content on any digital channel.” It also comes under JAMstack, the latest web architecture.
Image Source: Contentful
What is API-First?
API-first is an approach means that for a given development work, the idea of whole project will revolve around the API used by the project. And after working with contentful the idea of API-First is fairly true for contentful.
Models, Content and Reference
When you consider contentful as a part of your project, you’ll probably start with the modeling of the system like other usual software development, but here you are not gonna use any ER table to workbench, instead you will actually create ‘models’. Yes! Models are one of the core features of contentful and you can create them by just a few clicks, you don’t have to write any codes or queries. ‘Model’ is like a table which have fields, you can create a ‘Model’ and just add its fields. For example, you can have a Page model which may consist of fields like slug, title, description, header Image, header Text, section. Contentful CMS gives you the support of all kind of field type you can think off like Number, string, long string, Boolean, JSON and more.
Once we have our model, we need to add ‘content’ in our model and this content we can relate to rows for a table. So, each entry in the Model is called ‘content’ as per contentful.
Done till here? Now you must be wondering about relationships that fall among the models. Contentful call it ‘Reference’. So, you may have a model which might have ‘Reference’ (relationship) to one more model. Taking further to our example, ‘Page’ model having field called ‘section’ which might have one or more ‘Subsection’ model content inside it. Not just ‘Subsection’ model we can specify more model that can be referenced by ‘section’ filed of ‘Page’ model.
Contentful CMS gives you all the power you could expect to design the whole system for a high-quality software project, once you’re done with modeling from the contentful, you can start the development by picking literally any frontend or backend language/ library/ framework. Contentful has the support to almost all of the modern and as well as old technologies like Gatsby, React JS, Vue JS, Angular JS and others.
Various Data Sourcing methods from Headless CMS
- Content Delivery API: Use to recover published content to display in your application
- Content Management API: Use to creating or updating your content
- Images API: Use to recover and apply transformations to images
- GraphQL Content API: Use to retrieve both published and unpublished content using GraphQL
While using Content Delivery API you can choose axios for making request, but it is suggested that you try contentful’s npm package called ‘contentful’ which internally uses axios for making requests. By using this package sourcing data from contentful is as easy as calling a method and handling a JavaScript promise.
Environment, Spaces and Organization
The organization is nothing but the company name of yours, which you create while creating your contentful account. Space is something you create for a particular project and you can carry out all of your work for that project in that space only. Inside your software development project space you can create environments, this is place where you will carry out all the operation like creating models, referencing, adding contents etc.
Now one more important thing, there can be multiple environments for a project and you can use separate environment for development and another for production, that something which is really helpful. This enables the concurrent development of application and contentful modeling.
Best Practices of Contentful Headless CMS
Contentful is not like just limited table, rows and relationship. To utilize the full power of contentful you should have a good idea how to model things and make references as it’s a Contentful Headless CMS. You should be knowing well how to represent a webpage in terms of contentful model.
Thing You Will Love About Headless CMS
-
Media manipulation
When you add some media in you contentful model, it gives you the link to make it visible on the application which is cool, but is more exciting is that you can manipulate the image by adding some url parameters in the link like if id add? w=100 at the end of the link, this will get you the image of 100px size which is pretty cool and not just size you can apply filter, crops and many more by just url parameters.
-
Ability to reference multiple models
This feature helps in making web pages more dynamic you are not limited to bind relationship between only two model, there can be n nunnery of model that you can add in relationships.
-
Contentful plugin
Using axios for making request again and again sometime takes the attention away, this is where contentful plugin helps, you just have to call methods with appropriate parameters and handle a promise to get your response.
Conclusion
Contentful CMS helps software developers create headless CMS in the most effective way, especially across platforms. If you want to experience its speed and flexibility you should give Contentful Headless CMS a try.
Contentful Headless CMS – A Starter Guide: INFOGRAPHIC
