$30 off During Our Annual Pro Sale. View Details »

Wanna scale up? Make sure your CMS is ready for it!

Wanna scale up? Make sure your CMS is ready for it!

stefan judis

July 15, 2021
Tweet

More Decks by stefan judis

Other Decks in Technology

Transcript

  1. @stefanjudis
    Wanna scale up?


    Make sure your CMS is ready for it!

    View Slide

  2. @stefanjudis


    www.stefanjudis.com
    Heyo,


    I'm Stefan!

    View Slide

  3. It's a great time to be a developer.


    The world is full of APIs!

    View Slide

  4. View Slide

  5. jamstack.org

    View Slide

  6. stefanjudis.com

    View Slide

  7. View Slide

  8. css-tricks.com/the-all-powerful-front-end-developer/

    View Slide

  9. Buying is almost always cheaper
    and faster than building.

    View Slide

  10. The concept of decoupled
    content management

    View Slide

  11. Content platform architecture
    Content Delivery Content Management Content Preview
    Scalable APIs
    READ READ / WRITE READ
    Editor Interface

    View Slide

  12. Content platform architecture
    Editor Interface
    You and not your CMS make


    technology decisions.
    Content Delivery Content Management Content Preview
    Scalable APIs
    READ READ / WRITE READ

    View Slide

  13. APIs at Scale


    !==


    Content at Scale

    View Slide

  14. Building a single site is "easy"

    View Slide

  15. View Slide

  16. View Slide

  17. What's important when


    content requirements scale up?

    View Slide

  18. How fast can you move?
    What's your TTC?


    (time to content)

    View Slide

  19. Are your developers productive
    (and happy) working


    with the platform?

    View Slide

  20. 0 %
    14 %
    28 %
    42 %
    56 %
    70 %
    Better compensation Wanting to work with new tech Curious about new opportunities Better work/life balance
    insights.stackover
    fl
    ow.com/survey/2020#work-job-hunt-factors
    Developer job hunt factors

    View Slide

  21. 0 %
    14 %
    28 %
    42 %
    56 %
    70 %
    Better compensation Wanting to work with new tech Curious about new opportunities Better work/life balance
    insights.stackover
    fl
    ow.com/survey/2020#work-job-hunt-factors
    Developer job hunt factors
    58.5%

    View Slide

  22. Do your marketers and content
    creators like the platform?

    View Slide

  23. Does the platform integrate
    well with other systems?

    View Slide

  24. Is it
    fl
    exible?

    View Slide

  25. Does it scale?


    (whatever this means)

    View Slide

  26. A few lessons learned from
    growing with our customers

    View Slide

  27. Content modelling


    is an art

    View Slide

  28. Title
    Body
    Tags
    Author
    Description
    Title
    Body
    Tags
    Author
    Description
    Title
    Body
    Tags
    Author
    Description
    Posts / Pages
    Title
    Body
    Tags
    Description
    Author
    ARTICLE
    Name
    Date
    Talk
    EVENT
    Name
    Number of slides
    TALK
    Speaker
    A content graph
    Name
    Pro
    fi
    le image
    PERSON
    Avoid content duplication.
    De
    fi
    ne the required


    content structures.

    View Slide

  29. Title
    Body
    Tags
    Description
    Author
    ARTICLE
    Name
    Date
    Talk
    EVENT
    Name
    Number of slides
    TALK
    Speaker
    Name
    Pro
    fi
    le image
    PERSON
    RESTful APIs


    with Client Libraries

    View Slide

  30. Title
    Body
    Tags
    Description
    Author
    ARTICLE
    Name
    Date
    Talk
    EVENT
    Name
    Number of slides
    TALK
    Speaker
    Name
    Pro
    fi
    le image
    PERSON
    RESTful APIs


    with Client Libraries
    Fetch what you need

    View Slide

  31. Title
    Body
    Tags
    Description
    Author
    ARTICLE
    Name
    Date
    Talk
    EVENT
    Name
    Number of slides
    TALK
    Speaker
    Name
    Pro
    fi
    le image
    PERSON
    RESTful APIs


    with Client Libraries
    Fetch what you need

    View Slide

  32. contentmodel.io

    View Slide

  33. View Slide

  34. Consider your content
    model very carefully!

    View Slide

  35. Avoid WYSIWYG and
    Markdown content!

    View Slide

  36. HTML in your content

    View Slide

  37. Hardcoded links

    View Slide

  38. JSON-based Rich Text

    View Slide

  39. {

    "nodeType": "document"
    ,

    "data": {}
    ,

    "content":
    [

    {

    "nodeType": "paragraph"
    ,

    "data": {}
    ,

    "content":
    [

    {

    "nodeType": "text"
    ,

    "value": "This text is "
    ,

    "data": {}
    ,

    "marks": [
    ]

    }
    ,

    {

    "nodeType": "text"
    ,

    "value": "important"
    ,

    ,

    Rich Text is clean JSON!
    const options = {


    renderMark: {


    [MARKS.BOLD]
    :
    text
    = >
    {text}
    < /
    Bold>,


    },


    renderNode: {


    [BLOCKS.PARAGRAPH]
    :
    (node, children)
    = >
    {


    return {children}
    < /
    Text>;


    }


    },


    renderText: text
    = >
    text.replace('!', '?'),


    };


    documentToReactComponents(document, options);


    View Slide

  40. github.com/contentful/rich-text

    View Slide

  41. You will make mistakes
    in your content model

    View Slide

  42. Name
    Pro
    fi
    le image
    PERSON
    First Name
    Pro
    fi
    le image
    PERSON
    Last Name

    View Slide

  43. There has to be a way for
    programmatic content and
    content model changes.
    module.exports = function (migration) {


    const categoryFromTags = (tagList)
    = >
    {


    if (tagList.includes('javascript')) {


    return 'Development'


    }


    return 'General';


    }


    migration.transformEntries({


    contentType: 'blogPost',


    from: ['tags'],


    to: ['category'],


    transformEntryForLocale: async (from, locale)
    = >
    {


    return {


    category: categoryFromTags(from.tags[locale])


    }


    }


    });


    }


    View Slide

  44. But even then, you
    can't "just YOLO " it!
    *
    You Only Live Once – similar to "Just do it"!

    View Slide

  45. Environments
    MASTER

    View Slide

  46. Environments
    MASTER

    View Slide

  47. Environments
    MASTER
    Create development environment.


    (a copy of MASTER)
    FEATURE

    View Slide

  48. Environments
    MASTER
    FEATURE
    Change content and content model.


    Write a migration script.

    View Slide

  49. Environments
    MASTER
    FEATURE
    Apply migration to MASTER.

    View Slide

  50. Environments and Aliases
    RELEASE-1
    RELEASE-2
    Create a MASTER alias.

    View Slide

  51. Environments and Aliases
    RELEASE-1
    RELEASE-2

    View Slide

  52. Environments and Aliases
    RELEASE-1
    RELEASE-2

    View Slide

  53. Environments and Aliases
    RELEASE-1
    RELEASE-2
    Roll back if you need to.

    View Slide

  54. Safe development environments
    CI/CD ready
    Quick migrations and rollbacks
    Environments and Aliases

    View Slide

  55. www.contentful.com/help/cms-as-code/
    www.contentful.com/developers/docs/concepts/deployment-pipeline/

    View Slide

  56. Developers have to be
    safe to be productive.

    View Slide

  57. Your content creators
    have to feel at home.

    View Slide

  58. Stefan
    First Name
    PERSON
    Judis
    Last Name
    Content Delivery API
    Published content
    Content Preview
    Stefano
    First Name
    PERSON
    Judis
    Last Name
    Content Preview API
    Unpublished content

    View Slide

  59. Preview API

    View Slide

  60. The editing interface
    has to be extensible!

    View Slide

  61. Content platform architecture
    Editor Interface
    Content Delivery Content Management Content Preview
    Scalable APIs
    READ READ / WRITE READ
    How do to extend and adjust


    an interface in the cloud?

    View Slide

  62. The App Framework

    View Slide

  63. View Slide

  64. Custom validations
    Open source components
    The App Framework

    View Slide

  65. f36.contentful.com contentful-
    fi
    eld-editors.netlify.app

    View Slide

  66. A 3rd party ecosystem

    View Slide

  67. View Slide

  68. . . .
    . . .

    View Slide

  69. View Slide

  70. Access controls are
    essential in larger teams

    View Slide

  71. Only certain people should be allowed


    to change the content model!

    View Slide

  72. Image optimisation

    View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. Isn't it "just" an interface
    on a NoSQL database?

    View Slide

  79. Summary
    Flexible and fast content modelling
    CI/CD ready via programmatic content changes
    Environments and aliases
    JSON based Rich Text
    Preview functionality
    Roles & permissions
    Extensible interface
    Work
    fl
    ows Images API
    3rd party integrations
    Uptime, SLAs, support Developer community
    Open source libraries

    View Slide

  80. www.smashingmagazine.com/2021/07/how-to-choose-a-headless-cms/

    View Slide

  81. @stefanjudis


    www.stefanjudis.com


    news.stefanjudis.com
    Thanks.

    View Slide