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.

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