bunte.de drupal cms headless setup
Post on 13-Jan-2017
288 Views
Preview:
TRANSCRIPT
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
top related