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 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.
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.
