Rise of the Headless CMS: Moving from Static to Dynamic
Tadd Barnes - 5 Min read
The web has evolved at an extremely fast pace since I first started building websites in the 90s. Back then it was all static HTML markup to build web pages. There were no style sheets or Javascripts at that time. Then as it evolved we got into server side applications to manage content. HTML was still there but it was being generated by server side applications such as Cold Fusion back then. HTML also got some new helpers in the way of CSS (cascading style sheets) and Javascript, a way to manipulate things on the page but on the client side, not on the server. This allowed web pages to become more dynamic and fast. Content management systems became a tool for non-technical people to build web pages and manage content.
Then as internet speeds got faster, and we got smaller devices such as smart phones, and web browsers became ubiquitous we started seeing new frameworks being developed to handle this. These became modern day Javascript based frameworks. Tools like node.js allowed servers to handle and process vast amounts of data and then frameworks like Angular, React, Vue, and others were developed by major tech companies to process this information. This allowed for blazing fast applications that can handle transactions at the global scale. Social media companies led the way here since they needed to quickly evolve their product as most people on the planet were using them, and were using them on lower powered devices too.
This all leads us to where we are now, with mature and powerful content management systems, and blazingly fast front end frameworks to display and manipulate that content. This gives everyone the ability to manage all of their content, media, and assets in a central place. From there take that content and send it out to the front end that needs to display it. This could be a website, but it could also be a mobile application, kiosk, electronic sign, your watch, or any other device with a screen. The advantage there is your content creators can write and publish content in the CMS system, and then have it send that content to the screen/device that needs to display it. The word for this in our industry is multi-channel marketing. On the engineering side this is called creating a decoupled or headless application. This means content creation and publication happens in one place, and the display of that content happens in another area, or multiple different areas.
At Boston Digital we’ve really refocused our efforts into building systems like this for a number of reasons.
1. True multi-channel marketing
One of the benefits of a decoupled/headless system is the creation of content once and publishing it everywhere. Do you have an article that you want to show on your website, but also want to make sure it’s available in your blog, or as an alert for a customer using your mobile application? This method allows for this type of control because you’re sending everyone back to your website for the information, the website serves as a digital experience manager of your media and sends it out to the screen that needs it. This simplifies the technical setup as well for you and your customers. You don’t have to log into 3 different systems to create and manage that content, you can build it once and have the system send it to where it needs to be.
2. Leveraging a singular design system for all experiences you may have
In the past creating a design system for your website would be isolated to that website and not portable. If you wanted to pick up an element from the redesign and use it somewhere else, say for the logged in experience for a customer to your product, it would likely need to be recreated. Then if changes are made to the UI it wouldn’t be automatically available to your other UI systems in the design system. Now when we build large scale sites we will use a singular design system that has the ability to take the interface layout and break it into individual page components. From there they can be sent out to the front ends that need them so that design UI changes are made in a single area and then made available to all the other front ends that need them. This is a game changer because it really controls for brand and UI consistency on one level, but also makes updating any changes or additions so much easier and streamlined.
3. Blazing fast page load speeds at scale
The less things you have to load to create a page the faster it will load on the page. A decoupled application has the advantage of loading only what is needed for your website. Flat HTML is the fastest loading thing for a web page, and this is about as close as you can get to that. Also since these tools use static generators you can store the entire front end application in a Content Delivery Network (CDN). This puts the code closer to the user requesting it making it load that much faster.
4. The backend isn’t limited to a singular CMS system
Are you a business that has multiple systems that manage content? Using a headless front end allows you the ability to pull and aggregate the content from multiple sources into that singular front end. The benefit here is really around being able to begin the migration into a new platform for your content while maintaining legacy sites and systems. You can then work to migrate those into the new system as well. The legacy sites can get the new layout options, while still being managed in their legacy systems.
These are just 4 advantages of architecting in this way, there are many others. Reach out to us and we would love to talk to you more about other opportunities and ways to really scale your brand on the modern web!