Title:Losing our Heads: Leveraging Headless Content Management Systems to Bridge Dynamic Web Interfaces and Backend Content
Authors:Radha Nagaraja
Publication:MW2020: MuseWeb 2020

While modern-day content management systems (CMSs) provide very easy-to-use interfaces for managing content as well as functionalities to build web interfaces, the front-end development functionalities in CMSs are often optimized for specific structures of web interfaces (e.g., built-in themes). On the other hand, modern web development frameworks enable rapid development of dynamic, responsive, and accessible interfaces. The natural question is whether it would be possible to bridge the best of both worlds (i.e., easy content maintainability of CMSs and rapid and flexible implementation using web development frameworks). A strategy that has been gaining popularity is to leverage the content management functionalities of CMSs via a headless mode and couple the headless CMS with a front-end rich web interface that is separately developed and communicates with the headless CMS via an API, thus decoupling the presentation from the back-end data. In this paper, we will outline the general architectural principles of this hybrid methodology and the various technology ingredients that enable this approach. We will also take a detailed look at one particular recent example in which we have employed this hybrid strategy, namely our "Timeline" website that renders an interactive timeline of the events of 9/11 along with various media content within a rich and responsive user interface. This website was developed using headless Drupal as the back-end CMS and JavaScript libraries for the front-end. We will also outline various aspects of general applicability including integration strategies, overhead, and performance implications of decoupled implementations, strategies such as prerendering and caching to achieve higher overall performance, and automated testing methodologies for dynamic websites.