Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Announcing a New Decoupled Drupal Project: FamilyCircle.com

Parent Feed: 

Chromatic is proud to announce the relaunch of FamilyCircle.com! This replatforming, a collaboration with with our long-time partner Meredith Corporation, marks the publishing organization’s first venture into headless Drupal, and paves the way for other Meredith brands to follow suit as they get on-boarded onto a new decoupled platform designed to support brands company-wide.

The redesigned FamilyCircle.com Homepage. The redesigned FamilyCircle.com homepage.

The Multi-Tenant platform, as it is officially called, kicked off with an on-site meeting back in July of this year. During this kickoff, it immediately became clear that Meredith had great expectations for this platform. Not only did it need to support multiple brands, but it was expected to do so in a nimble manner, such that features could be shared yet customizable per brand, but not require simultaneous multi-site deployments. The result is an Express-based Node.js application backed by a headless Drupal-powered API, with Varnish caching in-between. While the platform is still in active development, it has already demonstrated its worth in FamilyCircle.com performance gains and speed of development.

Chromatic’s role has been equal parts subject matter experts and team enhancement. We helped architect both applications with flexibility firmly in mind. Some of the more challenging issues included resolving URL routes and redirects between Express and Drupal, creating filterable and sortable cross content type listings, and storing data in a way that enables cross platform publishing. We leveraged the json:api spec through the JSON API Drupal module to provide us a well documented and extensible API that we customized to meet the project’s unique needs.

For the Express application, Chromatic developed a content-mapping layer that further decouples the front-end by reducing its dependence on the JSON-API data model. It does this by defining schemas that transform the data, allowing developers to get exactly what is needed from a given content type without needing to drill down into deeply nested JSON objects. This helps to keep our templates agnostic and our middleware as clean as possible. It also reduces the impact of API swaps that might occur in the future, as any changes would be limited to those schemas.

A diagram illustrating a bird’s eye view of the Node.js/Drupal request workflow, with Varnish Cache to reduce the load on Drupal. Varnish sits in between Node.js and Drupal, reducing the load on the API and minimizing latency.

The immediate result is a relaunch of FamilyCircle.com powered by a flexible headless architecture with vastly improved response times, as well as improved front-end accessibility and SEO. Yet the greater benefit is a decoupled platform that extends these features to all brands under the Meredith umbrella. We are proud to have helped our partner achieve this goal and excited to extend this platform to other brands in the future.

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web