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
   

   View Slide

2. In the beginning was the
   monolith.
   

   View Slide

3. CMS Front-End
   

   View Slide

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

   websites
   

   View Slide

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
   

   View Slide

6. Headless
   

   View Slide

7. CMS Front-End
   

   View Slide

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

   View Slide

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
   

   View Slide

10. Sandwich Stack
    

    View Slide

11. CMS Front-End
    

    View Slide

12. Front-End
    CMS
    

    View Slide

13. Why?
    

    View Slide

14. Flexibility
    

    View Slide

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

    View Slide

16. More Inputs & Outputs
    

    View Slide

17. Syndication
    Roku
    Content API
    Game Stats
    Legacy CMS
    UGC API
    Print
    Archive iOS
    Android
    WordPress Next.JS
    

    View Slide

18. APIs are Products Too
    

    View Slide

19. Logical Teams
    

    View Slide

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
    

    View Slide

21. Sandwich Stack IRL
    

    View Slide

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

    View Slide

23. Content API is your
    data mediator
    

    View Slide

24. Structure
    

    View Slide

25. Beyond posts and the web
    

    View Slide

26. Give your API the
    respect
    it deserves
    

    View Slide

27. cvp.me/wordsesh2021
    

    View Slide