1.
CONTENT AS A SERVICE:
WHAT TO KNOW ABOUT DECOUPLED CMS
PANTHEON WEBINAR WITH FOUR KITCHENS AND PIXO

2.
TWITTER:
@GETPANTHEON

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

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

5.
WHY DECOUPLED CMS?

6.
Pantheon.io 6
Monolith vs. Decoupled
Monolith
Templates & Themes
Display Logic
Editorial UI
Admin UI
VS.
Decoupled

7.
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
•
Decoupled
Front End
CMS
User
Request
CMS2
CMS

8.
Pantheon.io 8
Speakers
Mike
Minecki
Director of
Technology Four
Kitchens

9.
Pantheon.io 9
Speakers
Brandon
Bowersox-
Johnson
Chief Technology
Strategist
Pixo

10.
June 11, 2015
TWiT.tv
Drupal & Node.js = Content as a Service

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

12.
We make BIG websites
fourkitchens.com @fourkitchens

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

14.
Why TWiT.tv wanted a
Content as a Service architecture

15.
Decouple upgrades
Cost of Drupal upgrade stifled redesign
attempts

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

17.
Exiting and proven
technology
A desire to innovate and iterate.

18.
Architecture

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

20.
Architecture walkthrough
Publishing and viewing a podcast on the
new TWiT.tv

21.
Publishin
g

22.
Drupal
Publishin
g

23.
Drupal
Elroy
Publishin
g

24.
Drupal
Elroy
Publishin
g

25.
web
mobile apps
Drupal
Elroy
Viewin
g

26.
web
mobile apps
Node.js
Drupal
Elroy
Warm
Cach
e

27.
web
mobile apps
Node.js
Drupal
Redis
Elroy
Warm
Cach
e

28.
web
mobile apps
Node.js
Drupal
Redis
Elroy
Warm
Cach
e

29.
web
mobile apps
Node.js
Drupal
Redis
Elroy
Warm
Cach
e

30.
web
mobile apps
Node.js
Drupal
Redis
Elroy
Warm
Cach
e

31.
web
mobile apps
Node.js
Drupal
Elroy
Cold
Cach
e

32.
web
mobile apps
Node.js
Drupal
Elroy
Cold
Cach
e

33.
web
mobile apps
Node.js
Drupal
Redis
Elroy
Cold
Cach
e

34.
web
mobile apps
Node.js
Drupal
Redis
Elroy
Cold
Cach
e

35.
web
mobile apps
Node.js
Drupal
Redis
Elroy
Cold
Cach
e

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

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

38.
Workflow

39.
API mockups
Get front end and back end teams working
early

40.
Apiary.io

41.
Edit in Markdown

42.
Built in API console

43.
Returns example

44.
Acts as a proxy

45.
Design in the browser
A dream come true

46.
Wireframes

47.
Style tiles

48.
Design in the browser

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

50.
Final thoughts

51.
Decoupling empowered
everyone.

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

53.
Thank you!

54.
Case Study

55.
Brandon Bowersox-Johnson
@brandonbowersox
@pixotech
www.pixotech.com

56.
TABLET PHONE

57.
TABLET PHONE

58.
TABLET PHONE

59.
TABLET PHONE

60.
TABLET PHONE

61.
TABLET PHONE

62.
TABLET PHONE

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

64.
CMS
uic.edu

65.
CMS
cms.uic.ed
u
Site
uic.edu
Content as a Service

66.
cms.uic.ed
u
Site
uic.edu
Content as a Service
CMS JSON

67.
The Front End
Pattern Lab

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

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

70.
The CMS
WordPress

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

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

73.
CMS + Pattern Lab
Outpost

74.
Outpost
• Lightweight PHP app
• Feeds JSON from WordPress or Drupal
into Pattern Lab templates
• More at getoutpost.org

75.
Outpost
1. Handles visitor requests (Symfony
HTTP...)
2. Fetches JSON content (Guzzl)
3. Caches responses (Stash)
4. Dev tools for logging, debugging

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

77.
Outpost
cms.uic.ed
u
Site
uic.edu
CMS JSON

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

79.
Thank you!

80.
Q&A

81.
THANK YOU
@GETPANTHEON