August 10, 2016 | Four Kitchens

The Future of the CMSDecoupled architecture, multiple frontends, and content as a service

Todd Ross Nienkerk CEO, Co-Founder, and Digital StrategistFour Kitchens

@toddross

todd@fourkitchens.com

#FutureCMS

I want you to rethink how we manage, publish, and consume content.

#FutureCMS

I am here today because…

What “decoupled” means

Agenda 1 32

#FutureCMS

When decoupling makes sense

Agenda 321

#FutureCMS

What’s next

1Agenda 32

#FutureCMS

What’s next for content and the web.

What “decoupled” means

1 32

#FutureCMS

CMS

Frontend

Backend

#FutureCMS

Frontend

CMS

Backend

#FutureCMS

Frontend

CMSBackend

Head

Decoupled(or “headless”)

Body#FutureCMS

* We have separated the “head” from the “body.”* The resulting architecture is decoupled (or “headless”).

Frontend

CMSBackend

#FutureCMS

Web

Backend

#FutureCMS

When we talk about the “frontend,” we most commonly mean “your website.”

Web

Backend

AMPNativeapps

Feeds Screenreaders

SmartTVsXbox

Alexa#FutureCMS

But your website is actually one of many frontends — one of many ways users experience your content.

Web

Backend

AMPNativeapps

Feeds Screenreaders

SmartTVsXbox

Alexa#FutureCMS

This is the future of the CMS, where all frontends are first-class citizens…

Web

Content

AMPNativeapps

Feeds Screenreaders

SmartTVsXbox

Alexa#FutureCMS

…Where everything starts with content.

When decoupling makes sense

31 2

#FutureCMS

Adopt cutting-edge frontend technologies

Decoupling makes sense when you want to…

#FutureCMS

Backend

safe

repeatable

known solutions,expected results

Frontend

safe

repeatable

known solutions,expected results

BORING#FutureCMS

Frontend

bleeding-edge tech

richest experience

high risk, high reward

Backend

bleeding-edge tech

richest experience

high risk, high reward

DANGEROUS#FutureCMS

The frontends are changing faster and are more diverse than content management needs

JUST RIGHT

Frontend

bleeding-edge tech

richest experience

high risk, high reward

Backend

safe

repeatable

known solutions,expected results

#FutureCMS

This is the Goldilocks solution: Not too boring, and not too dangerous. Just right.

Separate upgrades from redesigns

Decoupling makes sense when you want to…

#FutureCMS

Redesign

New CMS Upgrade CMS

Redesign Redesign

Upgrade CMS

Redesign

Upgrade CMS

Coupled

Time

#FutureCMS

Upgrade CMS

Redesign

New CMS

Redesign

Upgrade CMS

Redesign

Time

Decoupledseparates upgrades and redesigns

#FutureCMS

Redesign

New CMS

Angular React PolymerBackbone Ember

Upgrade CMS

Time

Decoupledhelps you keep pace with frontend tech

#FutureCMS

iOS app RokuRedesign

New CMS

AlexaWeb redesign

Upgrade CMS

Time

Decoupledallows multiple frontends and experiences

#FutureCMS

Eliminate tension between a design and your CMS

Decoupling makes sense when you want to…

#FutureCMS

Who’s walking whom?

CMS

Design

#FutureCMS

Should your design be optimized for your CMS? Or should you modify your CMS to achieve your design? In other words, are you walking the dog, or is the dog walking you?

Two philosophies of designing for a CMS

#FutureCMS

CMS first

•The users’ needs are important, but there are many ways to satisfy them

•The design can be changed to align with the natural behavior of the CMS

•The end result is easier and cheaper to maintain

#FutureCMS

Design first

•The users’ needs are paramount and non-negotiable

•The design must be executed as-is

•This may involve hacking the CMS or creating a complicated codebase, which affects maintainability

#FutureCMS

Neither philosophy is wrong, and decoupling can satisfy both

#FutureCMS

Centralize your content

Decoupling makes sense when you want to…

#FutureCMS

Mywebsite

CMS

Content

Frank’swebsite

CMS

Content

Sara’swebsite

CMS

Content

Laura’swebsite

CMS

Content

Bob’swebsite

CMS

Content#FutureCMS

Mywebsite

CMS

Content

#FutureCMS

CMS

Mywebsite

Content

#FutureCMS

Me

Frank

LauraBob

Sara

Contenthub

#FutureCMS

Sara

Me

#FutureCMS

Sara

Me

#FutureCMS

Me

Sara

#FutureCMS

Me

Sara

#FutureCMS

Publish to many frontends and experiences

Decoupling makes sense when you want to…

#FutureCMS

Web

Contenthub

AMPNativeapps

Feeds Screenreaders

SmartTVsXbox

Alexa#FutureCMS

WebAMPNative

apps

Feeds Screenreaders

SmartTVsXbox

Alexa#FutureCMS

WebAMPNative

apps

Feeds Screenreaders

SmartTVsXbox

Alexa#FutureCMS

Integrate multiple backends or services

Decoupling makes sense when you want to…

#FutureCMS

Web

Content

AMPNativeapps

Solrsearch

OpenCalais Video

service#FutureCMS

Make your content easily accessible via an API

Decoupling makes sense when you want to…

#FutureCMS

Web

Contenthub

AMPNativeapps

Feeds

SmartTVsXbox

Alexa#FutureCMS

Web

Contenthub

AMPNativeapps

Feeds

SmartTVsXbox

Alexa

Public API

Publicdata

Fan site

#FutureCMS

Why TWiT went headless

Source: Leo Laporte’s announcement (4ktch.in/twittv-leo)

“[It’s] faster and easier to create new sites. Web design styles change faster than high fashion, so it's nice to be able to update the site without re-doing all the hard work on the backend.”

Source: Leo Laporte’s announcement (4ktch.in/twittv-leo)

“Having a complete API would make it easier to do apps. The app, just like the website, would have access to everything there is to know about TWiT, in a simple, accessible fashion.”

Source: Leo Laporte’s announcement (4ktch.in/twittv-leo)

“By making the API public, we encourage members of our audience to create new things, things we might never have thought of. You could even design a website you like better. Abstracting the content from the presentation seems like a big win.”

Source: Leo Laporte’s announcement (4ktch.in/twittv-leo)

“By keeping Drupal simple and avoiding additional third-party modules, we can make a more secure and reliable backend that will be much easier to upgrade when future versions of Drupal arrive.”

•TWiT’s case study: 4ktch.in/twittv-leo

•4K’s blog post: 4ktch.in/twittv-4k

•API documentation: docs.twittv.apiary.io

•Consume content the same way TWiT’s website does!

•Saucier: github.com/fourkitchens/saucier

•Our open-source Node.js framework for building decoupled Drupal sites

Instead of using all of Drupal, TWiT opted to use only the robust content management tools, and left other pieces like the theme system untouched. Instead, Four Kitchens built a lighter, decoupled frontend using Node.JS and a Redis cache that can handle more requests per second, with a median response time of 10ms during their busy live-stream hour. Both the Redis cache and Varnish are intelligently cleared as Drupal is updated, meaning that content is always fresh while remaining quick to download.

The front end is an Express app using Dust to render templates. This mix of libraries allows pages to be constructed on the server (to provide faster page loads) while easily allowing the templates to be reused for client-side updates once the page is initialized.

Decoupling makes sense when you want to…

•Adopt cutting-edge frontend technologies

•Separate upgrades from redesigns

•Eliminate tension between a design and your CMS

•Centralize your content

•Publish to many frontends and experiences

•Integrate multiple backends or services

•Make your content easily accessible via an API

What’s next

1 32

#FutureCMS

Content comes first

#FutureCMS

* Current CMSs manage websites first and content second. This needs to change.* Content strategy is a requirement for all organizations.* Content modeling is key to building a robust digital strategy.* Fully divorce content from its presentation.

We must design for experiences, not just devices

#FutureCMS

* Different experiences. Different technologies. Doesn’t mean RWD isn’t important. It’s still the core of how to present on the web. But, the internet as we think of it is no longer the only place where your content is relevant.

Frontend technologies are accelerating, and CMSs can’t keep pace

#FutureCMS

* As a result, CMSs should double-down on content. Put the “C” back in “Content Management Systems.”

Rise of WMSs (Website Management Systems) and services like Squarespace

#FutureCMS

Return of (small) static websites

#FutureCMS

Reusable, atomized content

#FutureCMS

* Tokenized content*

Conversational interfaces

#FutureCMS

* Alexa* Chatbots* Adding new fields for the NBC.com Alexa skill* Miked homes and offices* Subvocalization and subvocal mics

Virtual and augmented reality

#FutureCMS

* Fully immersive, 360-degree video* Commerce* Tactile web

Fight Club (1999)

Questions?

#FutureCMS

Credits

• All content in this presentation, except where noted otherwise and listed below, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright Four Kitchens, LLC.

• The following icons are from the Noun Project and are licensed Creative Commons BY 3.0: Dog-walking illustration based on an icon by Pavel Nikandrov; Laptop icon by B. Agustín Amenábar Larraín; Tablet icon by Pham Thi Dieu Linh; Smartphone icon by George Agpoon; Media icon by Garrett Knoll; Text icon by Julien Miclo; Chat icon by Dolly Vu; Document icon by Nimal Raj.

• Drupal is a registered trademark of Dries Buytaert.