Successfully reported this slideshow.
Your SlideShare is downloading. ×

Content as a Service: What to Know About Decoupled CMS

Content as a Service: What to Know About Decoupled CMS

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Advertisement
Advertisement

Content as a Service: What to Know About Decoupled CMS

  1. 1. CONTENT AS A SERVICE: WHAT TO KNOW ABOUT DECOUPLED CMS PANTHEON WEBINAR WITH FOUR KITCHENS AND PIXO
  2. 2. TWITTER: @GETPANTHEON
  3. 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. 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. 5. WHY DECOUPLED CMS?
  6. 6. Pantheon.io 6 Monolith vs. Decoupled Monolith Templates & Themes Display Logic Editorial UI Admin UI VS. Decoupled
  7. 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. 8. Pantheon.io 8 Speakers Mike Minecki Director of Technology Four Kitchens
  9. 9. Pantheon.io 9 Speakers Brandon 
 Bowersox- Johnson Chief Technology Strategist Pixo
  10. 10. June 11, 2015 TWiT.tv Drupal & Node.js = Content as a Service
  11. 11. Agenda • About us • About TWiT.tv • Why Content as a Service? • Architecture • Workflow • Final Thoughts
  12. 12. We make BIG websites fourkitchens.com @fourkitchens
  13. 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. 14. Why TWiT.tv wanted a
 Content as a Service architecture
  15. 15. Decouple upgrades Cost of Drupal upgrade stifled redesign attempts
  16. 16. Better API for app developers Active community of developers currently using RSS feeds.
  17. 17. Exiting and proven technology A desire to innovate and iterate.
  18. 18. Architecture
  19. 19. Architecture • Node.js • Drupal 7 • Custom encoding server (named Elroy) • Cachefly for static assets.
  20. 20. Architecture walkthrough Publishing and viewing a podcast on the new TWiT.tv
  21. 21. Publishin g
  22. 22. Drupal Publishin g
  23. 23. Drupal Elroy Publishin g
  24. 24. Drupal Elroy Publishin g
  25. 25. web mobile apps Drupal Elroy Viewin g
  26. 26. web mobile apps Node.js Drupal Elroy Warm Cach e
  27. 27. web mobile apps Node.js Drupal Redis Elroy Warm Cach e
  28. 28. web mobile apps Node.js Drupal Redis Elroy Warm Cach e
  29. 29. web mobile apps Node.js Drupal Redis Elroy Warm Cach e
  30. 30. web mobile apps Node.js Drupal Redis Elroy Warm Cach e
  31. 31. web mobile apps Node.js Drupal Elroy Cold Cach e
  32. 32. web mobile apps Node.js Drupal Elroy Cold Cach e
  33. 33. web mobile apps Node.js Drupal Redis Elroy Cold Cach e
  34. 34. web mobile apps Node.js Drupal Redis Elroy Cold Cach e
  35. 35. web mobile apps Node.js Drupal Redis Elroy Cold Cach e
  36. 36. Drupal architecture • Drupal 7 • RESTful Module • Very little custom Drupal code
  37. 37. Node.js architecture • Saucier - Our headless framework • Node.js • Express for routing • Dust templates • Redis for caching
  38. 38. Workflow
  39. 39. API mockups Get front end and back end teams working early
  40. 40. Apiary.io
  41. 41. Edit in Markdown
  42. 42. Built in API console
  43. 43. Returns example
  44. 44. Acts as a proxy
  45. 45. Design in the browser A dream come true
  46. 46. Wireframes
  47. 47. Style tiles
  48. 48. Design in the browser
  49. 49. Design in the browser • Responsive loves design in the browser • Workflow with Drupal is always clunky • Decoupling made the process seamless
  50. 50. Final thoughts
  51. 51. Decoupling empowered everyone.
  52. 52. Decoupled empowerment • Redesigns won’t require a CMS upgrade • Independent work streams • Best of breed tools • More natural modern design process
  53. 53. Thank you!
  54. 54. Case Study
  55. 55. Brandon Bowersox-Johnson @brandonbowersox @pixotech www.pixotech.com
  56. 56. TABLET PHONE
  57. 57. TABLET PHONE
  58. 58. TABLET PHONE
  59. 59. TABLET PHONE
  60. 60. TABLET PHONE
  61. 61. TABLET PHONE
  62. 62. TABLET PHONE
  63. 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. 64. CMS uic.edu
  65. 65. CMS cms.uic.ed u Site uic.edu Content as a Service
  66. 66. cms.uic.ed u Site uic.edu Content as a Service CMS JSON
  67. 67. The Front End Pattern Lab
  68. 68. Pattern Lab • Atomic design • Test drive responsive layouts • Assemble elements into pages • More at patternlab.io
  69. 69. Benefits • Able to pick and add best tools • Front end team starts right away • Test drive components
  70. 70. The CMS WordPress
  71. 71. Decoupled WordPress • Minimal custom code • Component-based content structure • WordPress JSON API
  72. 72. Benefits • Less-customized CMS easier to upgrade • More focused authoring experience • Content available as JSON
  73. 73. CMS + Pattern Lab Outpost
  74. 74. Outpost • Lightweight PHP app • Feeds JSON from WordPress or Drupal 
 into Pattern Lab templates • More at getoutpost.org
  75. 75. Outpost 1. Handles visitor requests (Symfony HTTP...) 2. Fetches JSON content (Guzzl) 3. Caches responses (Stash) 4. Dev tools for logging, debugging
  76. 76. Content Objects • Feed JSON into PatternLab • Encapsulate JSON into objects
  77. 77. Outpost cms.uic.ed u Site uic.edu CMS JSON
  78. 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. 79. Thank you!
  80. 80. Q&A
  81. 81. THANK YOU @GETPANTHEON

×