Learn: -How decoupled architecture can help future-proof a website -How decoupled architecture leverages a wider set of experts by clearly delineating front and back-end -How to use modules and patterns to build decoupled websites using Drupal 7 and WordPress -What to expect from both Drupal 8 and the upcoming WordPress JSON API

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.

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

18. Decouple upgrades
Cost of Drupal upgrade stifled redesign
attempts

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

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

21. Architecture

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

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

24. Publishin
g

25. Drupal
Publishin
g

26. Drupal
Elroy
Publishin
g

27. Drupal
Elroy
Publishin
g

28. web
mobile apps
Drupal
Elroy
Viewin
g

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

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

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

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

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

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

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

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

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

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

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

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

41. Workflow

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

43. Apiary.io

44. Edit in Markdown

45. Built in API console

46. Returns example

47. Acts as a proxy

48. Design in the browser
A dream come true

49. Wireframes

50. Style tiles

51. Design in the browser

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

53. Final thoughts

54. Decoupling empowered
everyone.

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

56. Thank you!

57. Case Study

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

59. TABLET PHONE

60. TABLET PHONE

61. TABLET PHONE

62. TABLET PHONE

63. TABLET PHONE

64. TABLET PHONE

65. TABLET PHONE

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

67. CMS
uic.edu

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

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

70. The Front End
Pattern Lab

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

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

75. The CMS
WordPress

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

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

80. CMS + Pattern Lab
Outpost

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

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

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

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

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

88. Thank you!

89. Q&A

90. THANK YOU
@GETPANTHEON