Content as a Service: What to Know About Decoupled CMS

CONTENT AS A SERVICE: WHAT TO KNOW ABOUT DECOUPLED CMS

PANTHEON WEBINAR WITH FOUR KITCHENS AND PIXO

TWITTER: @GETPANTHEON

Pantheon.io 3

Speakers

Josh Koenig Co-Founder &

Head of Developer Experience Pantheon

Mike Minecki Director of

Technology Four Kitchens

Brandon Bowersox-Johnson

Chief Technology Strategist

Pixo

Pantheon.io 4

Agenda

‣Why Decoupled CMS? Josh Koenig, Pantheon

‣Case Study #1: Mike Minecki, Four Kitchens

‣Case Study #2: Brandon Bowersox-Johnson, Pixo

‣Discussion and Q&A

WHY DECOUPLED CMS?

Pantheon.io 6

Monolith vs. Decoupled

Monolith

Templates & Themes

Display Logic

Editorial UI

Admin UI

VS.

Decoupled

Pantheon.io

Decoupled

7

•

CMS

JS App

User Request

Hybrid

•

CMS

Single Page App

User Request

Single Page

•

CMS

Native Mobile

App

User Request

Native

•DecoupledFront End

CMS

User Request

CMS2

CMS

Pantheon.io 8

Speakers

Mike Minecki Director of

Technology Four Kitchens

Pantheon.io 9

Speakers

Brandon Bowersox-Johnson

Chief Technology Strategist

Pixo

June 11, 2015

TWiT.tvDrupal & Node.js = Content as a Service

Agenda• About us• About TWiT.tv• Why Content as a Service?• Architecture• Workflow• Final Thoughts

We make BIG websitesfourkitchens.com @fourkitchens

The TWiT.tv Netcast Network with Leo Laporte features the #1 ranked technology podcast This Week in Tech, along with over 20 other top-ranked online shows.

Why TWiT.tv wanted aContent as a Service architecture

Decouple upgradesCost of Drupal upgrade stifled redesign attempts

Better API for app developersActive community of developers currently using RSS feeds.

Exiting and proven technologyA desire to innovate and iterate.

Architecture

Architecture• Node.js• Drupal 7• Custom encoding server (named Elroy)• Cachefly for static assets.

Architecture walkthroughPublishing and viewing a podcast on the new TWiT.tv

Publishing

Drupal

Publishing

Drupal

Elroy

Publishing

Drupal

Elroy

Publishing

webmobile apps

Drupal

Elroy

Viewing

webmobile apps

Node.js

Drupal

Elroy

WarmCache

webmobile apps

Node.js

Drupal

Redis

Elroy

WarmCache

webmobile apps

Node.js

Drupal

Redis

Elroy

WarmCache

webmobile apps

Node.js

Drupal

Redis

Elroy

WarmCache

webmobile apps

Node.js

Drupal

Redis

Elroy

WarmCache

webmobile apps

Node.js

Drupal

Elroy

ColdCache

webmobile apps

Node.js

Drupal

Elroy

ColdCache

webmobile apps

Node.js

Drupal

Redis

Elroy

ColdCache

webmobile apps

Node.js

Drupal

Redis

Elroy

ColdCache

webmobile apps

Node.js

Drupal

Redis

Elroy

ColdCache

Drupal architecture• Drupal 7• RESTful Module• Very little custom Drupal code

Node.js architecture• Saucier - Our headless framework• Node.js• Express for routing• Dust templates• Redis for caching

Workflow

API mockupsGet front end and back end teams working early

Apiary.io

Edit in Markdown

Built in API console

Returns example

Acts as a proxy

Design in the browserA dream come true

Wireframes

Style tiles

Design in the browser

Design in the browser• Responsive loves design in the browser• Workflow with Drupal is always clunky• Decoupling made the process seamless

Final thoughts

Decoupling empowered everyone.

Decoupled empowerment

• Redesigns won’t require a CMS upgrade• Independent work streams• Best of breed tools• More natural modern design process

Thank you!

Case Study

Brandon Bowersox-Johnson@[email protected]

TABLET PHONE

TABLET PHONE

TABLET PHONE

TABLET PHONE

TABLET PHONE

TABLET PHONE

TABLET PHONE

Old Way• CMS theming• Limited team• Develop in CMS• Costly upgrades

• Choose the best FE tools

• FE devs ≠ CMS devs• Start without a CMS• Simpler CMS upgrades

Goals

CMS

uic.edu

CMS

cms.uic.edu

Site

uic.edu

Content as a Service

cms.uic.edu

Site

uic.edu

Content as a Service

CMS JSON

The Front EndPattern Lab

Pattern Lab• Atomic design• Test drive responsive layouts• Assemble elements into pages• More at patternlab.io

Benefits• Able to pick and add best tools • Front end team starts right away• Test drive components

The CMSWordPress

Decoupled WordPress• Minimal custom code• Component-based content structure• WordPress JSON API

Benefits• Less-customized CMS easier to upgrade• More focused authoring experience• Content available as JSON

CMS + Pattern LabOutpost

Outpost• Lightweight PHP app• Feeds JSON from WordPress or Drupal into Pattern Lab templates

• More at getoutpost.org

Outpost1. Handles visitor requests (Symfony

HTTP...)2. Fetches JSON content (Guzzl)3. Caches responses (Stash)4. Dev tools for logging, debugging

Content Objects• Feed JSON into PatternLab• Encapsulate JSON into objects

Outpost

cms.uic.edu

Site

uic.edu

CMS JSON

Result• Fell in love with our CMS again• Built great FE with the best tools• FE dev team and timeline not tied to CMS• Unleashed content authoring• Easier upgrades over time

Thank you!

Q&A

THANK YOU@GETPANTHEON