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.

Chris Van Patten

May 27, 2021
Tweet

More Decks by Chris Van Patten

Other Decks in Technology

Transcript

  1. @ChrisVanPatten
    Meet the
    Sandwich
    Stack

    View full-size slide

  2. In the beginning was the
    monolith.

    View full-size slide

  3. CMS Front-End

    View full-size slide

  4. Pros
    • Easier to manage

    • Performant

    • Ideal for “traditional” or simple

    websites

    View full-size 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 full-size slide

  6. CMS Front-End

    View full-size slide

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

    • Quick performance wins

    • Better “separation of concerns”

    • More exciting to engineers

    View full-size slide

  8. 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 full-size slide

  9. Sandwich Stack

    View full-size slide

  10. CMS Front-End

    View full-size slide

  11. Front-End
    CMS

    View full-size slide

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

    View full-size slide

  13. More Inputs & Outputs

    View full-size slide

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

    View full-size slide

  15. APIs are Products Too

    View full-size slide

  16. Logical Teams

    View full-size slide

  17. 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 full-size slide

  18. Sandwich Stack IRL

    View full-size slide

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

    View full-size slide

  20. Content API is your
    data mediator

    View full-size slide

  21. Beyond posts and the web

    View full-size slide

  22. Give your API the
    respect
    it deserves

    View full-size slide

  23. cvp.me/wordsesh2021

    View full-size slide