Germany's leading stars & celebrities news site BUNTE.de (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.
2. Challenges & Opportunities
Distribution is changing
Top notch home destination is key,
but growth is triggered off-site.
Publishing is turning into a Product &
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.
Headless Setup with Drupal
(Thunder) and a custom
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. MICRO SERVICES
BUNTE.de “Carrier” Architecture
COCKPIT Custom app
running on AWS.
incl. Auto-Pilot RENDERING Output to
n formats (Web, AMP,
feeds, App, etc)
CMS Drupal (Thunder),
composing text, image,
video + various taxonomies
to a story KPI TRACKING
AWS (ECS, Docker, S3, EBS,
ElastiCache, EFS, Route53, CF, ...)
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
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
Following Google’s guide to achieve
consistent UI/UX, less confusion @
Devs + users
Implemented in bootstrap 3
8. This is IVW + Outbrain. Easily Switch On/Off + Optimized Loading
10. Our Swiss Knife for
Image Handling -
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
Running in our dockerized
environment using S3 as cache.
11. Part of the Shift -
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. Key Learnings
Data contracts and solid E2E tests
Implement serious data contracts
(e.g. swagger io) and solid E2E tests
Data exchange using XML/DTD might
Go live early with non-UI data
We’ve started with the app, a rather
complex service to get rid of the
Reducing the complexity even more
with a non-critical part like RSS feeds
might have saved time.
13. Project progress 2017
Phased Web Rollout
Sync old/new env
iOS + Android App
March - June
Dev of new Env with
focus on non-UI +
Aug - Oct
Switch of all