CMSの新しいパラドックス
コンテンツ管理での未来対立

プレストン・ソー • 2019年 12月 14日 • API-first Drupal 東京 2019 キーノートスピーチ

The new CMS paradox

Coming conﬂicts in content management

Preston So • December 14, 2019 • API-first DrupalCamp Tokyo 2019 keynote初めまして！
プレストン・ソーはイノベーションリーダー、研究者、スピーカー、そして「Decoupled Drupal in Practice (Apress 2018年)」の著者です。
Decoupled Drupalの世界的なリーダーであり、 Decentralized Webや会話形デザインの専門家でもあります。プレストンは、 Gatsby Inc.（ギャツビー社）でプリンシパル・プロダクト・マネージャーです。
過去3回にわたり、SXSWインタラクティブで講演し、大陸にて 3つの言語で基調講演をおこなう人気スピーカーでもあります。
linkedin.com/in/prestonso • @prestonso • #NewCMSParadox

Welcome!
Preston So is an innovation lead, researcher, speaker, and author of
Decoupled Drupal in Practice (Apress, 2018).
A globally recognized voice on decoupled Drupal and subject matter
expert in the decentralized web and conversational design, Preston is
Principal Product Manager at Gatsby.
Having spoken three times at SXSW Interactive, Preston is asought-after presenter with keynotes on five continents and in threelanguages.
linkedin.com/in/prestonso • @prestonso • #NewCMSParadox

Decoupled Drupal in Practice
Available now!
tiny.cc/decoupled-in-practiceIn the ﬁrst and only comprehensive guide todecoupled Drupal across the stack, with a foreword
by Drupal project lead Dries Buytaert, learn
everything you need to know about decoupled
Drupal—from building the back end and designing
APIs to integrating with front-end technologies.

5Registration opening soon
Visit decoupleddays.com for
more updates about tickets
and our call for papers.

Sponsorships
For sponsorship information,
reach out to our team at
decoupleddays@gmail.com.

@decoupleddays
Follow us on Twitter to stay
updated on importantannouncements.

#decoupleddays • decoupleddays.com • @decoupleddays

What we'll cover●●●●●

The uneasy alliance between marketers and developers
How decoupled CMSs have attempted to fill in the gaps
The distributed CMS: From system to stack
The new CMS paradox: Marketing and tech at odds
Epilogue: Getting ready for the new CMS

1

The uneasy alliance betweenmarketers and developers

Drupal and other traditional CMSs
are experiencing divergent priorities

Marketers and content editors wantcontrol over non-web experiences

Cambrian explosion

Mobile applications

Set-top boxes

Wearables

Digital signage

Augmented reality

Conversational interfaces

Marketers and content editors wantcontrol over non-web experiences

Wearables

ConversationalDigital signage

Augmented reality
Developers

MobileSet-top boxes

Websites

Responsive

The incongruity of content management today

MarketersContent editors

Developers and stakeholders wantaffordability, ﬂexibility, performance

Infrastructural affordability

Infrastructural affordability●

TCO is increasing. The total cost of ownership of a
web infrastructure is increasing at an
unprecedented rate, with many large Drupal sites
now running more than $1M per year.

●Cloud solutions are expensive. Serverlesssolutions such as Netlify and Zeit have proven tobe much more affordable than establishedsolutions like Acquia.

Resourcing affordability

Resourcing affordability●CMS developers are in high demand. Demand ishigh for specialized skills like Drupal andWordPress, and developers command high pricesthat are increasingly unaffordable.

●

Resourcing is restrictive. The amount ofspecialization in CMS development now results ina high barrier to entry for new developers andlimited options for companies looking to hire.

Flexibility

Flexibility and interchangeability●Monolithic CMS is not flexible. Service
integrations in Drupal and WordPress require
modules or plugins; new solutions cannot be
substituted easily for Drupal features.

●

Interchangeable services are in vogue.
Companies today are interested in working withmore flexible vendors with less onerous prospects
for replatforming.

PerformancePerformance and speed●

Interactive experiences. Today, users’
expectations have far outpaced traditional CMS
features, most of which lack link prefetching or
image lazy-loading.

●

Performance optimizations. Developers areincreasingly seeking performance optimizations
at every stage of the process, including both
payload and delivery optimizations.

Daniel Case
CC BY-SA 3.0

Security

Security●Vulnerabilities are growing. Security advisories
are increasing in both Drupal and WordPress dueto their popularity.

●

Decoupled aids security. Decoupledarchitectures can help lock down CMS layers andprevent outside access to certain services.

Is it possible to satisfy the needs ofboth marketers and technologists?

The separation of concerns
between data and presentation
remains sacrosanct

2

How decoupled CMSs
attempt to ﬁll in the gaps

The ﬁrst wave
1995–2006●

Essentially glorified static site
generators with rudimentary
templating●Application building was rudimentary;
mostly leveraged to build content-richwebsites●

No interactive client-side behavior

the static CMSThe second wave
2002–2014●

Dynamic server-side applications forthe first time●

Extensive abstraction from the datalayer to the templating layer●

Rudimentary interactive client-sidebehavior (see Drupal’s Ajax API)the dynamic CMS
the monolithic CMSThe third wave
2012–2020●

Dynamic client-side applications forthe first time, thanks to web services
and universal JavaScript and owing tochannel explosion●

Full architectural decoupling between
structured data and presentation●Complex interactive client-side
behavior made easier andintegrations with JavaScript
frameworks (see Prismic edit button)

the headless CMS
the decoupled CMS

ContentfulPrismic

Sanity.io

Headless WordPress

HTMLHTML
Otherlanguage

Drupal front end

Decoupled application

Templates

Templates

PHP

REST API
JSON

DrupalPHP

Data

Decoupled Drupal

DrupalData

Decoupled Drupal is the use ofDrupal as a content service for
consumer applications

Evolution catalyzed by dual forces ofinnovation in front-end development
and in digital experiences

Interchangeable parts

Traditional development
Front-end development

blocked byblocked by

Back-end development

Front-end development
Pipelined development
Front-end development
Back-end development

Front-end development
Back-end development

Front-end dev
Back-end development
Project duration

Pipelined development

Time
Coupled

Progressively
decoupled

Fully decoupled

Content mesh

Vue.jsGatsbyDrupalDrupalAngular 1
Drupal front
end
ClientDrupal front
end

ServerDrupalDrupalInterchangeable presentation layers

API

converge
atbuild
towards

Front-end developers

API convergencebuild
towards

agree onDummyAPIagree onBack-end developers

Coupled updates

Monolithic updateMonolithic update

Drupal 6 front end

Drupal 7 front end

Drupal 8 front end

Drupal 6 back end

Drupal 7 back end

Drupal 8 back end

Decoupled updates

Gatsby update

Gatsby update

Gatsby v0

Gatsby v1

Gatsby v2

Drupal 7

Drupal 8

Drupal 9

Drupal update

Drupal update

Updates and maintenance3

The distributed CMS
From system to stackThe fourth wave
2018–●

Richly interactive and performant
universal JavaScript applications withinitial server-side rendering●

Full presentational decoupling withinterchangeable services and data
source agnosticism●

Complex interactive client-side
behavior as a first-class concern

the distributed CMS

Microservices and orchestration
introduced the idea of a service mesh

A content mesh pairs services withan agnostic front-end layerAs a result of using the content meshthe page becomes decoupled too

Drupal user login
Drupal search

Drupal Ubercart

DrupalDrupal content

Drupal forms

Drupal Google Analytics

Traditional CMSs handled all concerns at the expense of simplicity

Gatsby
Auth0

Auth0 authentication

Algolia

Algolia search

DrupalSnipcart cart

Snipcart
Contentful content

Contentful
Typeform forms

TypeformSegmentSegment analytics

But the content mesh allows you to choose your services arbitrarily

TimePages

Architecture

Drupal front
endGatsby

DrupalDrupalGatsbySegment

TypeformContentfulDrupal

Auth0

From monolithic CMS to decoupled CMS to distributed CMS

Algolia

ServerSnipcart

ClientInfrastructural affordability

Infrastructural affordability●

TCO will decrease. The distributed CMS will
reduce your total cost of ownership by bringing
your hosting costs to near zero and allowing
vendor flexibility without lock-in.

●Serverless solutions are cheap. Netlify and Zeit
offer powerful free tiers, and AWS is entering thespace as well.

Resourcing affordability

Resourcing affordability●

JavaScript developers are easier to find. In
today’s web community, JavaScript is thelanguage of choice and React, Vue.js, andGraphQL the technologies of choice.

●

Resourcing is less onerous. JavaScript
developers are more affordable, more available,
and are often more accustomed to approaches
like pipelined development.

Flexibility

Flexibility and interchangeability●

Distributed CMS is flexible by design.
Interchangeability of services means that
decoupled pages are possible, with flexible
services.

●

Limit scope to plug and play. With a more
focused and services-oriented approach, many
feature-based services are seeing success andvelocity, such as Algolia, Snipcart, and Typeform.

PerformancePerformance and speed●

Progressive enhancement and interactivity.
Gatsby and other distributed CMS technologies
have full support for accessibility and progressive
enhancement in addition to interactivity.

●

Performance optimizations. Thanks to serverlesssolutions and CDNs, it is now possible to achieve
unprecedented levels of performance.

Daniel Case
CC BY-SA 3.0

Security

Security●Spread vectors across services. Multipleinterchangeable services makes it more difficult
for attackers to access critical parts of your CMS
architecture (e.g. delegate forms to Typeformand cart functionality to Snipcart).

●Lock down your CMS. With web compilers like
Gatsby, it’s possible to build a fully functional
website consuming Drupal without your Drupalsite ever needing to be online or accessible.

Time
Monolithic(coupled)

Progressively
decoupled

Decoupled

Distributed

Vue.jsGatsby

Angular 1
Drupal front
end
ClientDrupal front
end

Segment

TypeformContentful

Snipcart

DrupalDrupalDrupalAlgolia

DrupalAuth0Server

Evolution of content management systems/stacks over time

Drupal front
end

Segment

TypeformContentful

DrupalSnipcart

Algolia

Auth0

DrupalGatsbyFrom decoupled CMS to distributed CMS: content management stackTimePages

Architecture

Drupal front
end

GatsbyDrupalDrupalGatsbySegment

TypeformContentful

DrupalAuth0

From monolithic CMS to decoupled CMS to distributed CMS

Algolia

ServerSnipcart

ClientDrupal front
end

Vue.jsEmber.js

GatsbyDrupalFrom content management systems to content management stacks

Gatsby

Auth0
Algolia

Third-party services
In-page services(search, forms, analytics)

Snipcart
TypeformSegment

DrupalDistributed CMS: Content management stacks

The new content management system
is not a single, contiguous system

The content management stack
is a distributed, multifaceted milieu

4The new CMS paradox
Marketing and tech at odds

GatsbyDeveloper experience

Auth0
Algolia

Third-party services
In-page services(search, forms, analytics)

Snipcart

Developerexperience

Marketerexperience

TypeformSegment

DrupalDistributed CMS: Content management stacks

Editorial experienceIn distributed CMS, editors can keep
their existing editorial interfaces

Admin UI Initiative (ckrina)

For marketers, diversifying into
new front ends can be challenging

GatsbyDeveloper experience + preview

Auth0
Algolia

Third-party services
In-page services(search, forms, analytics)

Snipcart

Developerexperience

Marketerexperience

Typeform
Segment

DrupalDistributed CMS: Content management stacks

Editorial experienceGatsby live preview with DrupalIn distributed CMS, marketers canaccess other powerful services easily

For marketers, diversifying services
with ﬂexible options can be proactive

DrupalDrupalDrupalDrupalDrupalDrupalDrupalDrupalBut they can also lead to the loss ofnonnegotiable marketing features

Core CMS marketing features●Preview. Preview is becoming more of a solved
problem, but user interfaces that are easy to use
for marketing teams are still distant.

●Layout. With a clean separation between dataand presentation, how can marketers create,
select, and manipulate layouts?

Core CMS marketing features●

Contextual links. Drupal has long been famous
for its in-context links that point to administrative
pages in the CMS. How will we account for these?

●In-context editing. Though Quick Edit in Drupal isused less frequently than before, how can we
replicate a similar experience for marketing
teams?

Should CMSs decouple by default andanoint one front-end framework?

Should CMSs refrain from handlingaspects of presentation altogether?

What happens when marketers aresubjected to intensifying feature loss?

There are no easy answers;
monolithic, decoupled, anddistributed CMS remain relevant

Looking for even more about distributed CMS?
Watch for new content on my blog preston.so and @prestonso

5Epilogue
Getting ready for the new CMSA distributed CMS is a boon
for your developers

But consider the impacts
on your clients and marketers

Structured content and APIs
will help bridge the gap

But we may need solutions forfeatures marketers rely on daily

Coming conﬂicts will involve
CMSs and emerging front ends

Consider your architecture’s
ramiﬁcations for all users

Thank you!
Preston So is an innovation lead, researcher, speaker, and author of
Decoupled Drupal in Practice (Apress, 2018).
A globally recognized voice on decoupled Drupal and subject matter
expert in the decentralized web and conversational design, Preston is
Principal Product Manager at Gatsby.
Having spoken three times at SXSW Interactive, Preston is asought-after presenter with keynotes on five continents and in threelanguages.
linkedin.com/in/prestonso • @prestonso • #NewCMSParadoxありがとうございました！
プレストン・ソーはイノベーションリーダー、研究者、スピーカー、そして「Decoupled Drupal in Practice (Apress 2018年)」の著者です。
Decoupled Drupalの世界的なリーダーであり、 Decentralized Webや会話形デザインの専門家でもあります。プレストンは、 Gatsby Inc.（ギャツビー社）でプリンシパル・プロダクト・マネージャーです。
過去3回にわたり、SXSWインタラクティブで講演し、大陸にて 3つの言語で基調講演をおこなう人気スピーカーでもあります。
linkedin.com/in/prestonso • @prestonso • #NewCMSParadox

Registration opening soon
Visit decoupleddays.com for
more updates about tickets
and our call for papers.

Sponsorships
For sponsorship information,
reach out to our team at
decoupleddays@gmail.com.

@decoupleddays
Follow us on Twitter to stay
updated on importantannouncements.

#decoupleddays • decoupleddays.com • @decoupleddays

Decoupled Drupal in Practice
Available now!
tiny.cc/decoupled-in-practiceIn the ﬁrst and only comprehensive guide to
decoupled Drupal across the stack, with a foreword
by Drupal project lead Dries Buytaert, learn
everything you need to know about decoupled
Drupal—from building the back end and designing
APIs to integrating with front-end technologies.

102