bunte.de drupal cms headless setup

BUNTE.de Relaunch 2016Highlights and Learnings

Hansjoerg Posch, CTO BurdaStudiosNov 2016

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.

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

MICRO SERVICES+ Widgets

BUNTE.de “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)

insights.burda-studios.de/carrier-headless-decoupled-cms-at-bunte/

AWS (ECS, Docker, S3, EBS, ElastiCache, EFS, Route53, CF, ...)

Inspired by

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

0.03 secAverage article rendering time

vs 2-5 sec on our old system

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

material.google.com tagmanager.google.com

This is IVW + Outbrain. Easily Switch On/Off + Optimized Loading

2.5xFaster Avg Document Content Loaded Time

Bounce Rate -7%, 10%+ PIs/Session among multiple segments

Our Swiss Knife for Image Handling - Thumbor

github.com/thumbor/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.

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

insights.burda-studios.de/mobile-apps-for-publishers-native-web-or-hybrid/

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.

Project progress 2017

Oct 15Phased Web Rollout

Oct 20100% Switch

JuneSync old/new enviOS + Android App Relaunch

Jan/FebKick-Off Workshops, Prototypes, Testing

March - JuneDev of new Env with focus on non-UI + Migration (Feed-based)

Aug - OctSwitch of all Feed/Syn Partners

Frontend Dev

NovOngoing development

Prod LIVE

Key Partners

Analytics, Tracking, GTM

Software Dev

Infrastructure Setup

Design, UI/UX

CMS Operations Cloud Vendor

Q&A

On the right: The Team celebrating the BUNTE.de Relaunch on Oct 20.

Hansjoerg PoschCTO BurdaStudios