Mastering data structure for Node Types - Neos Con 2023

Neos gives you the power to craft perfect data structures with NodeTypes. But what works best for typical website content? After five years of exploration, let me share insights into how to model your data into Document and Content NodeTypes. Make your editors’ lives easier with clear Node Types, while building extensible and maintainable code. Also, discover tips on modeling layouts, spacing, and more in order to create effective content types!

Transcript

1. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S MASTERING DATA STRUCTURE FOR NODE TYPES
2. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S THE ONE TALK YOU NEED TO MASTER NODE TYPES
3. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S complexity time
4. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S WHEN AND HOW TO USE DOCUMENT NODE TYPES HOW TO DELEGATE RESPONSIBILITY BY USING APIS HOW TO CREATE CONTENT NODE TYPES HOW TO REUSE MOST OF YOUR LOGIC
5. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S ROLAND SCHÜTZ  / DEVELOPER AND UX ENTHUSIAST / WEB AGENCY IN AUSTRIA, SPECIALIZED IN NEOS / NEOS CMS CORE TEAM SINCE 2018
6. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S HOW SHOULD I CREATE DOCUMENT NODE TYPES
7. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S DOCUMENT NODETYPES \ Should all inherit from an AbstractPage NodeType. \ This is where you define default styles, scripts, head tags and more. \ Should always include the page hero, with a headline h1. \ You might have general-use NodeTypes like PageWithHeroText, PageWithHeroImage and PageWithHeroVideo \ Can offer great templates for editors. \ You might have a use-case specific NodeTypes, e.g. LandingPage with default content defined as template
8. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
9. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S COMPARE HomePage \ Page: Blog \ Page: Advantages of Neos \ Page: How to use AI in Neos \ Page: Neos \ Page: WebDevelopment HomePage \ BlogOverviewPage: Blog \ BlogPost: Advantages of Neos \ BlogPost: How to use AI in Neos \ BlogTags: \ BlogTag: Neos \ BlogTag: WebDevelopment
10. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S DOCUMENT NODETYPES \ Should all inherit from an AbstractPage NodeType. \ This is where you define default styles, scripts, head tags and more. \ Should always include the page hero, with a headline h1. \ You might have general-use NodeTypes like PageWithHeroText, PageWithHeroImage and PageWithHeroVideo \ Can offer great templates for editors. \ You might have a use-case specific NodeTypes, e.g. LandingPage with default content defined as template \ Preferably incorporate logic in the Naming, which makes maintaining the site easier. \ BlogPost is better than Page
11. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S DOCUMENT NODETYPES \ Should all inherit from an AbstractPage NodeType. \ This is where you define default styles, scripts, head tags and more. \ Should always include the page hero, with a headline h1. \ You might have general-use NodeTypes like PageWithHeroText, PageWithHeroImage and PageWithHeroVideo \ Can offer great templates for editors. \ You might have a use-case specific NodeTypes, e.g. LandingPage with default content defined as template \ Preferably incorporate logic in the Naming, which makes maintaining the site easier. \ BlogPost is better than Page \ Can structure content that is not directly visible to the user as BackendOnly
12. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
13. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
14. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S HOW TO DELEGATE RESPONSIBILITY BY USING APIS
15. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S THERE MUST BE A SINGLE SOURCE OF TRUTH
16. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S CHOOSE Transient Create an EelHelper to get data, and leverage Fusion caching. Create an ActionController and use it as JSON endpoint, using Object Caching . Persistent Sync Nodes with a CommandController. Make sure these nodes are not editable and can’t be created by editors! Save a content hash of the api, when you have costly transformations.
17. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S HOW SHOULD I CREATE CONTENT NODE TYPES
18. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
19. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S COMPLEXITY OF CONTENT NODE TYPES / LAYOUT PROPERTIES ARE HARD TO GET RIGHT / CONTENT NODE TYPES CAN BE WHOLE SECTIONS OR TINY BLOCKS
20. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S Quelle: https://xkcd.com/1445/
21. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S TYPES OF CONTENT NODES / SECTION / BLOCK
22. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S TYPES OF CONTENT NODES / SECTION / BLOCK
23. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S STRUCTURAL MONOCLE COMPONENTS / SECTION / CONTAINER / LAYOUT
24. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S STRUCTURAL MONOCLE COMPONENTS / SECTION / CONTAINER / LAYOUT
25. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S STRUCTURAL MONOCLE COMPONENTS / SECTION / CONTAINER / LAYOUT
26. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S COMPARE Text.Section <Section spaceBelow={...}> <Container> <Text content={...}/> </Container> </Section> Text.Block <Text content={...} spaceBelow={...} />
27. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
28. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
29. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
30. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
31. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
32. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
33. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
34. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S Text.Section <Section spaceBelow={...}> <Container> <Text content={...}/> </Container> </Section>
35. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
36. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
37. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
38. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
39. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
40. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
41. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
42. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
43. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S HOW REUSE MOST OF YOUR LOGIC
44. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
45. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
46. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
47. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
48. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
49. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
50. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
51. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S PRESENTATION MANAGES CONSISTENT SPACING
52. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S TAILWIND PRESENTATION MANAGES CONSISTENT SPACING
53. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
54. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
55. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
56. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
57. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
58. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S PRIVATE PROPS NEOS 8.3 FEATURE
59. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
60. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
61. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
62. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
63. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
64. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
65. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S TRY CODEQ.JUMPMARKERS FOR EVEN BETTER SECTION IDS
66. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
67. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
68. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
69. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
70. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
71. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
72. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
73. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
74. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
75. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S
76. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S WHAT OTHER MIXINS COULD WE MAKE… Section.BackgroundColor
77. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S WHAT OTHER MIXINS COULD WE MAKE… Section.BackgroundColor ButtonLink
78. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S WHAT OTHER MIXINS COULD WE MAKE… Section.BackgroundColor ButtonLink ButtonLink.Type
79. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S ONE LAST TIP…
80. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries CONTAINER QUERIES
81. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S CONTAINER QUERIES
82. MAS TER ING DATA S TR U CT U RE F OR N O D E T Y PE S DOCUMENT NODETYPES: AbstractPage, H1, Many is good API INTEGRATIONS: Single Source of truth - Eel, ActionController or Nodesync CONTENT NODETYPES: Sections & Blocks PRESENTATION SYSTEM: Section, Container and Layouts EASY REUSABILITY: NodePresets, Constraints, Mixins