Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meet the Sandwich Stack

Meet the Sandwich Stack

Headless WordPress is all the rage. The JAMStack seems to be everywhere, you can't stop hearing about GraphQL, and you're exploring setting up a Gatsby front-end for your own blog.

For many folks, the standard "backend CMS + front-end UI" headless approach is great. But in larger businesses and enterprises, the Sandwich Stack — a three piece stack that adds a content API middle tier between your CMS and front-end — will give you greater flexibility, a clearer division of work, and better scaling and performance.

In this talk, you'll learn all about the Sandwich Stack: the practical benefits, how to avoid the pitfalls, and key tips to successfully implement it in your organization.

38bc9be7f4f140d1f719c1faeed29a6c?s=128

Chris Van Patten

May 27, 2021
Tweet

Transcript

  1. @ChrisVanPatten Meet the Sandwich Stack

  2. In the beginning was the monolith.

  3. CMS Front-End

  4. Pros • Easier to manage • Performant • Ideal for

    “traditional” or simple
 websites
  5. Pros • Easier to manage • Performant • Ideal for

    “traditional” or simple
 websites Cons • Requires full stack engineers • Harder to use best-in-class technologies • Front-end performance is implicitly tied to back-end performance
  6. Headless

  7. CMS Front-End

  8. Pros • Use best-in-class front-end and back-end technologies • Quick

    performance wins • Better “separation of concerns” • More exciting to engineers
  9. Pros • Use best-in-class front-end and back-end technologies • Quick

    performance wins • Better “separation of concerns” • More exciting to engineers Cons • Requires CMS to serve as application for creating and distributing content • Difficult to make CMS source of truth for non-editorial data • Requires specific domain knowledge for teams pushing data to front-end • Bound to a specific CMS platform
  10. Sandwich Stack

  11. CMS Front-End

  12. Front-End CMS

  13. Why?

  14. Flexibility

  15. Drupal Contentful Next.JS Custom Gatsby WordPress Content API

  16. More Inputs & Outputs

  17. Syndication Roku Content API Game Stats Legacy CMS UGC API

    Print Archive iOS Android WordPress Next.JS
  18. APIs are Products Too

  19. Logical Teams

  20. CMS • Optimize for product-oriented engineers • Focus on building

    editorial experiences for internal users • Deep CMS expertise Content API • API designers and back-end experts • Comfortable in the language of hypermedia, schema, etc. • Data-oriented • Focusing on developer experience, internally and externally Front-end • Translating design into code • Focused on customer-facing products and experiences • Likely a framework expert
  21. Sandwich Stack IRL

  22. WordPress Next.JS Content API Elasticsearch (Elasticp r ess) (NODE.JS) Syndication

    Mobile MySQL
  23. Content API is your data mediator

  24. Structure

  25. Beyond posts and the web

  26. Give your API the respect it deserves

  27. cvp.me/wordsesh2021