Headless Drupal IRL: Lessons Learned


In panel / round-robin fashion, the Tableau marketing development team will discuss the challenges faced, lessons learned, and benefits realized in switching all several-hundred of the company's paid search campaign pages from dynamic generation in Drupal, to static site generation outside of Drupal.

This talk will dive deep into code and configuration for a practical application of headless Drupal, spanning the full web application stack from devops, through Drupal back-end and site building, all the way to the front-end.

The Benefits / Requirements

  • Extreme performance optimization
  • Total control of markup
    • Thinner DOM
    • Responsive before the rest of the Drupal site gets there
  • Agile development, shedding the burdens of a large Drupal development workflow
  • Maintaining a Drupal-centric, instant-gratification content editor experience
  • No content migrations whatsoever
  • Full support for localized content

The Architecture

  • Content management: An existing Drupal deployment, a single content type
  • Content API: JSON via Views Datasource
  • Static site builder: Assemble
  • Task runner: Grunt
  • Build and deployment: Travis CI
  • Hosting: Amazon S3 + Cloudfront
  • User Authentication: Form Frame

The Problems (and Solutions!)

  • Hosting Hell: Static file storage is not a web server. Also, did you think about staging?
  • JSON Hell: nested JSON in Views, consuming paged JSON, massaging the data
  • Legacy IE Hell: cross-origin nightmares abound.
  • Drupal taken for granted: i18n, forms, asset aggregation/minification/compression, editor preview

Session Track

Coding and Development

Experience Level


Drupal Version