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!

2. @stefanjudis www.stefanjudis.com Heyo, I'm Stefan!

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

   is full of APIs!
4. None

5. jamstack.org

6. stefanjudis.com

7. None

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

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

10. The concept of decoupled content management

11. Content platform architecture Content Delivery Content Management Content Preview Scalable

    APIs READ READ / WRITE READ Editor Interface

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

13. APIs at Scale !== Content at Scale

14. Building a single site is "easy"

15. None
16. None

17. What's important when content requirements scale up?

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

    content)

19. Are your developers productive (and happy) working with the platform?

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

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%

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

23. Does the platform integrate well with other systems?

24. Is it fl exible?

25. Does it scale? (whatever this means)

26. A few lessons learned from growing with our customers

27. Content modelling is an art

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.

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

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

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

32. contentmodel.io

33. None

34. Consider your content model very carefully!

35. Avoid WYSIWYG and Markdown content!

36. HTML in your content

37. Hardcoded links

38. JSON-based Rich Text

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 = > <Bold>{text} < / Bold>, }, renderNode: { [BLOCKS.PARAGRAPH] : (node, children) = > { return <Text>{children} < / Text>; } }, renderText: text = > text.replace('!', '?'), }; documentToReactComponents(document, options);

40. github.com/contentful/rich-text

41. You will make mistakes in your content model

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

    le image PERSON Last Name

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]) } } }); }

44. But even then, you can't "just YOLO " it! *

    You Only Live Once – similar to "Just do it"!

45. Environments MASTER

46. Environments MASTER

47. Environments MASTER Create development environment. (a copy of MASTER) FEATURE

48. Environments MASTER FEATURE Change content and content model. Write a

    migration script.

49. Environments MASTER FEATURE Apply migration to MASTER.

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

51. Environments and Aliases RELEASE-1 RELEASE-2

52. Environments and Aliases RELEASE-1 RELEASE-2

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

    to.

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

    and Aliases

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

56. Developers have to be safe to be productive.

57. Your content creators have to feel at home.

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

59. Preview API

60. The editing interface has to be extensible!

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?

62. The App Framework

63. None

64. Custom validations Open source components The App Framework

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

66. A 3rd party ecosystem

67. None

68. . . . . . .

69. None

70. Access controls are essential in larger teams

71. Only certain people should be allowed to change the content

    model!

72. Image optimisation

73. None
74. None
75. None
76. None
77. None

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

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

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

81. @stefanjudis www.stefanjudis.com news.stefanjudis.com Thanks.