Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime. Drupal CMS Headless Setup


Published on

Germany's leading stars & celebrities news site (30m+ visits / month) has relaunched in fall 2016 with a full featured new headless setup. The engine is powered by a custom Java rendering / distribution and Drupal/Thunder as backend CMS.

Published in: Technology
  • Be the first to comment Drupal CMS Headless Setup

  1. 1. Relaunch 2016 Highlights and Learnings Hansjoerg Posch, CTO BurdaStudios Nov 2016
  2. 2. Challenges & Opportunities Distribution is changing Top notch home destination is key, but growth is triggered off-site. Publishing is turning into a Product & Platform Business Multiple sources, feeds, “Content Re-Targeting” is driving the business. New technologies are arriving AI, Bots, Robots will shape our products (“non-UI interfaces”). Relationship & Context are king LBS and context-related content & services are necessary to stand out of the crowd. Our conclusion: Content needs to be available in an abstract and flexible way without having any specific ties to a CMS.
  3. 3. Highlights Headless Setup with Drupal (Thunder) and a custom rendering/distribution engine Massive performance uplifts with positive user/SEO signals Top notch GTM and Native setup Phased rollout over 3 months 1 yr project duration from 1st concept to complete switch
  4. 4. MICRO SERVICES + Widgets “Carrier” Architecture COCKPIT Custom app running on AWS. Distribution, Performance Management, Placements incl. Auto-Pilot RENDERING Output to n formats (Web, AMP, feeds, App, etc) CMS Drupal (Thunder), Editor’s Workplace composing text, image, video + various taxonomies to a story KPI TRACKING (GA etc) AWS (ECS, Docker, S3, EBS, ElastiCache, EFS, Route53, CF, ...) Inspired by
  5. 5. Why a headless setup? Focus on the future opportunities with Publishing shifting to off-site distribution Substantial performance boost for core audience due to clean markup Less complex caching (No more Varnish) Access to “sexier” technology stack (e.g. AWS & Docker, Grails, Node, GTM) Way more stable core CMS
  6. 6. 0.03 sec Average article rendering time vs 2-5 sec on our old system
  7. 7. Front end: Orchestrated by Google Tag Manager; based on Material Design Google Tag Manager Managing all front end activities including Ads, IVW, Video, Analytics. Rule/Detection based firing of e.g. specific desktop/mobile tags, video Material Design Following Google’s guide to achieve consistent UI/UX, less confusion @ Devs + users Implemented in bootstrap 3
  8. 8. This is IVW + Outbrain. Easily Switch On/Off + Optimized Loading
  9. 9. 2.5xFaster Avg Document Content Loaded Time Bounce Rate -7%, 10%+ PIs/Session among multiple segments
  10. 10. Our Swiss Knife for Image Handling - Thumbor Impressive OSS Image Delivery Service with auto-cropping, filters and auto face / feature detection Serving optimized images for e.g. various iPhone resolutions Massive efficency booster for our editors Running in our dockerized environment using S3 as cache.
  11. 11. Part of the Shift - Mobile App Relaunch Relaunch of iOS + Android Apps using Facebook’s React Native Native “smooth” Look & Feel Common Codebase for iOS + Android for 80% Shared Stack (React, JS) w/ lower maintenance costs Drawback: Integration of native SDKs, Android Support
  12. 12. Key Learnings Data contracts and solid E2E tests are key Implement serious data contracts (e.g. swagger io) and solid E2E tests (selenium) early. Data exchange using XML/DTD might make sense. Go live early with non-UI data We’ve started with the app, a rather complex service to get rid of the legacy environment. Reducing the complexity even more with a non-critical part like RSS feeds might have saved time.
  13. 13. Project progress 2017 Oct 15 Phased Web Rollout Oct 20 100% Switch June Sync old/new env iOS + Android App Relaunch Jan/Feb Kick-Off Workshops, Prototypes, Testing March - June Dev of new Env with focus on non-UI + Migration (Feed-based) Aug - Oct Switch of all Feed/Syn Partners Frontend Dev Nov Ongoing development Prod LIVE
  14. 14. Key Partners Analytics, Tracking, GTM Software Dev Infrastructure Setup Design, UI/UX CMS Operations Cloud Vendor
  15. 15. Q&A On the right: The Team celebrating the Relaunch on Oct 20. Hansjoerg Posch CTO BurdaStudios