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!
5. jamstack.org
6. stefanjudis.com
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"
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
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
64. Custom validations Open source components The App Framework
65. f36.contentful.com contentful- fi eld-editors.netlify.app
66. A 3rd party ecosystem
68. . . . . . .
70. Access controls are essential in larger teams
71. Only certain people should be allowed to change the content model!
72. Image optimisation
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.