Content Management Systems

Insight

Alvin Zou

Project Manager

Alvin Zou came all the way from Canada to show us how its done! Project manager for one of our engineering teams!

What Is a Content Management System?

When building a complex website, engineers inevitably run into a simple problem. Certain types of information should be automatically written into and read from a database, such as user info. However, the platform might also require other types of data such as text, media, and files to be updated by site administrators without the technical know-how needed to write backend mutations and interface with a database.

The solution is a content management system, or CMS, which is a user-friendly interface for adding, editing, and removing content that the site’s frontend then incorporates into its display. Building and integrating a CMS is essential for projects in which our client needs to easily manage their platform’s content well after the company has completed deployment and handed off the website.

Advantages of a Headless CMS

Including a CMS sounds like a win-win, but it does present new engineering challenges. Most notably, we have to find a way to incorporate fetched content into our custom-built frontend. Traditional content management systems like Wordpress handle everything for the website creator: these services provide simple, easy-to-understand interfaces that seamlessly connect content with site design. However, their major downside is a complete lack of control and customization. For most of our projects, it would be impossible to build the hand-crafted beautiful designs that our engineers are given. A traditional CMS is too restrictive for doing justice to the creativity, boldness, and flexibility of HSA DEV. For instance, we wouldn’t have the freedom to build out a platform’s technical architecture in whatever way we deem necessary to implement all of a design’s functionalities.

Therefore, DEV chooses to use headless content management systems, which are essentially a CMS without the frontend (or “head”) of the platform. In other words, the CMS lies on the rest of our tech stack and its only job is to store and deliver content to wherever it is requested on the site. This way, we can have the best of both worlds — the ability to customize our engineering to a project’s specifications while still incorporating a CMS into our platform.

Using DatoCMS: Our Experiences

While there are a range of options out there when choosing a headless CMS, we at DEV decided to go with DatoCMS. On its platform, once you create a new project you can effectively build out the content structure using DatoCMS’s UI. This includes creating custom data types: for instance, you might want “blog post” to be a type that includes a “title” field, an “author” field, a “text” field, and perhaps an optional “image” field. Then, you can link data types together — in this case, you can select which “author” object you want associated with each blog post. During development you can create loads of test data for your frontend to display, covering any edge cases you may wish to test for to ensure your website doesn’t break.

DatoCMS has many helpful features for engineers. Any uploaded media is stored in a single convenient space. It supports multiple locales, which means you can implement language togglers on your site and have certain fields of content render differently. Most importantly, it has a simple API that anyone familiar with GraphQL (which is part of HSA DEV’s stack) will find easy to understand.

Webhooks

Even with a CMS, we still need to have our own database in order to store dynamically-updating information such as user data and product orders. However, there are cases where we want to link our CMS and database; in other words, if one is updated, so is the other. For instance, after handing off the platform to our client, they may want to add “staff member” objects to the CMS in order to display the bios and profile pictures of new staff. But the database also needs to be notified of this change so it will authenticate these new accounts. For these purposes, we use webhooks to send a message to our backend every time an event (such as a certain update to the CMS) occurs, which we can then handle depending on what type of change happened.

Conclusion

Ultimately, content management systems are a powerful and versatile tool for the web developer’s toolbox. They give teams more creative latitude in designing and engineering their site’s functionalities while also simplifying site maintenance for clients. Therefore, learning how to work with a CMS has greatly increased the range, quality, and usability of the platforms that HSA DEV can bring to life.

UP NEXT

Psychology Snacks in Design

Insight

The Web in Motion

An Introduction to Simple Animations Using CSS

Insight

The Aesthetic-Usability Effect

Or: Why You Can Get Away With Anything If You're Hot

Insight