The document summarizes Todd Ross Nienkerk's presentation on decoupled content management system (CMS) architecture. Some key points: - A decoupled CMS separates the content storage and delivery mechanisms, allowing content to be delivered to various channels through APIs instead of being tied to specific frontends. - Decoupling a CMS makes sense when organizations want to adopt cutting-edge frontend technologies, separate upgrades from redesigns, eliminate tension between design and CMS constraints, or publish content to multiple channels. - Case studies of organizations like TWiT that have moved to a decoupled CMS architecture are discussed, highlighting benefits like faster website updates, easier app development, and encouraging community contributions.

1. Credits

2. InVision webinar | December 3, 2015
The Future of the CMS
Decoupled architecture, multiple frontends, and
content as a service

3. Todd Ross Nienkerk
Digital Strategist and Partner
Four Kitchens
@toddross
todd@fourkitchens.com

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

5. What “decoupled” means
Agenda 1 32

6. When decoupling makes
sense
Agenda 321

7. What’s next
1Agenda 32

8. What “decoupled” means
1 32

9. CMS
Frontend
Backend

10. Frontend
CMS
Backend

11. Frontend
CMS
Backend
Head
Decoupled
(or “headless”)
Body

12. Frontend
CMS
Backend

13. Web
Backend

14. Web
Backend
Social
media
Native
apps
Feeds
Screen
readers
Smart
TVsXbox Wear-
ables

15. Web
Backend
Social
media
Native
apps
Feeds
Screen
readers
Smart
TVsXbox Wear-
ables

16. Web
Content
Social
media
Native
apps
Feeds
Screen
readers
Smart
TVsXbox Wear-
ables

17. When decoupling makes
sense
31 2

18. Adopt cutting-edge
frontend technologies
Decoupling makes sense when you want to…

19. Backend
safe
repeatable
known solutions,
expected results
Frontend
safe
repeatable
known solutions,
expected results
BORING

20. Frontend
bleeding-edge tech
richest experience
high risk, high reward
Backend
bleeding-edge tech
richest experience
high risk, high reward
DANGEROUS

21. JUST RIGHT
Frontend
bleeding-edge tech
richest experience
high risk, high reward
Backend
safe
repeatable
known solutions,
expected results

22. Separate upgrades from
redesigns
Decoupling makes sense when you want to…

23. Redesign
New CMS Upgrade CMS
Redesign Redesign
Upgrade CMS
Redesign
Upgrade CMS
Coupled
Time

24. Upgrade CMS
Redesign
New CMS
Redesign
Upgrade CMS
Redesign
Time
Decoupled
separates upgrades and redesigns

25. Redesign
New CMS
Angular React PolymerBackbone Ember
Upgrade CMS
Time
Decoupled
helps you keep pace with frontend tech

26. iOS app RokuRedesign
New CMS
iOS redesignWeb redesign
Upgrade CMS
Time
Decoupled
allows multiple frontends and experiences

27. Eliminate tension between
a design and your CMS
Decoupling makes sense when you want to…

28. Who’s walking whom?
CMS
Design

29. Two philosophies of
designing for a CMS

30. 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

31. 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

32. Neither philosophy is
wrong, and decoupling
can satisfy both

33. Centralize your content
Decoupling makes sense when you want to…

34. My
website
CMS
Content
Frank’s
website
CMS
Content
Sara’s
website
CMS
Content
Laura’s
website
CMS
Content
Bob’s
website
CMS
Content

35. My
website
CMS
Content

36. CMS
My
website
Content

37. Me
Frank
LauraBob
Sara
Content
hub

38. Sara
Me

39. Sara
Me

40. Me
Sara

41. Me
Sara

42. Publish to many frontends
and experiences
Decoupling makes sense when you want to…

43. Web
Content
hub
Social
media
Native
apps
Feeds
Screen
readers
Smart
TVsXbox Wear-
ables

44. Web Social
media
Native
apps
Feeds
Screen
readers
Smart
TVsXbox Wear-
ables

45. Web Social
media
Native
apps
Feeds
Screen
readers
Smart
TVsXbox Wear-
ables

46. Integrate multiple backends
or services
Decoupling makes sense when you want to…

47. Web
Content
Social
media
Native
apps
Solr
search
Open
Calais Video
service

48. Make your content easily
accessible via an API
Decoupling makes sense when you want to…

49. Web
Content
hub
Social
media
Native
apps
Feeds
Smart
TVsXbox Wear-
ables

50. Web
Content
hub
Social
media
Native
apps
Feeds
Smart
TVsXbox Wear-
ables
Public API
Public
data
Fan site

52. Why TWiT went headless

53. 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.”

54. 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.”

55. 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.”

56. 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.”

57. • TWiT’s case study: 4ktch.in/twittv-leo
• 4K’s blog post: 4ktch.in/twittv-4k
• API documentation: docs.twittv.apiary.io
• You can 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

58. 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

59. What’s next
1 32

60. Content comes first

61. We must design for
experiences, not just devices

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

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

64. Return of (small) static
websites

65. Questions?

66. Credits

67. Thank you!
All content in this presentation, except where noted otherwise, is Creative Commons
Attribution-ShareAlike 3.0 licensed and copyright Four Kitchens, LLC.

68. Credits
• 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.
• The assets listed above, as well as any assets
specifically noted on a slide, are exempt from
this presentation’s Creative Commons BY-SA
3.0 license.