Content as a Service: What to Know About Decoupled CMS
•
10 likes•41,672 views
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
Report
Share
Content as a Service: What to Know About Decoupled CMS
- 1. CONTENT AS A SERVICE: WHAT TO KNOW ABOUT DECOUPLED CMS PANTHEON WEBINAR WITH FOUR KITCHENS AND PIXO
- 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
- 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
- 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
- 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
- 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
- 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
- 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