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

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