Emerging TypoScript Best Practices - InspiringCon 2016

This presentation has been held by Sebastian Kurfürst @InspiringCon 2016 in Kolbermoor.

Transcript

1. Best Practices about TypoScript
2. Sebastian Kurfürst @skurfuerst
3. Emerging Best Practices about TypoScript
4. Why TypoScript?
5. http://www.sxc.hu/browse.phtml?f=view&id=956017 TypoScript as View Coordinator
6. Extensibility Planned Extensibility Unplanned Extensibility Supported during updates Own Risk
7. Planned Extensibility prototype(TYPO3.Neos:ContentCase) < prototype(TYPO3.TypoScript:Case) { default { @position = 'end' condition = TRUE type = ${q(node).property('_nodeType.name')} } }
8. Unplanned Extensibility # custom TypoScript prototype(TYPO3.Neos.NodeTypes:Image).link.@process.convertUris.forceConversion = false
9. # custom TypoScript prototype(TYPO3.Neos.NodeTypes:Image).link.@process.convertUris.forceConversion = false # Default definition of Image TS Object
 prototype(TYPO3.Neos.NodeTypes:Image) {
 ... link.@process.convertUris = TYPO3.Neos:ConvertUris {
 forceConversion = true
 }
 } Dependency Ordering crucial!
10. Dependency Ordering crucial! TYPO3.Neos.NodeTypes My.Site # composer.json {
 "require": {
 "typo3/neos-nodetypes": "*"
 }
 }
11. cat Configuration/PackageStates.php | grep composerName
13. Files and Folder Structure
14. • one TypoScript object per file • subfolders according to your domain
15. Embrace TypoScript Prototypes
16. prototype(Acme:Slideshow) < prototype(TYPO3.Neos:Content) { .... } # Instantiation mySlideshow = Acme:Slideshow
17. class Slideshow extends Content { } $mySlideshow = new Slideshow();
18. Explicit Names!
19. TypoScript prototypes for page objects page = Page { .... } Old # COPY (bad!) specialPage < page { .... } root.special { condition = ${....} renderPath = '/specialPage' } prototype(Site:MyObject) < prototype(Page) { .... } page = Site:MyObject Recommended prototype(Site:Special) < prototype(Site:MyObject) { .... } root.special { condition = ${....} type = 'Site:Special' }
20. Composition vs Inheritance
21. MyTextWithImage MySpecialText Inheritance MyImage MyText
22. MyTextWithImage Composition MyImage MyText
23. Try to use composition!
24. How? prototype(MyTextWithImage) < prototype(TYPO3.Neos:Content) { image = MyImage { image = ${q(node).property('image')} } ... same for text element }
25. One Content, Multiple Output Formats
26. prototype(TYPO3.Neos:ContentCase) < prototype(TYPO3.TypoScript:Case) { default { @position = 'end' condition = TRUE type = ${q(node).property('_nodeType.name')} } }
27. prototype(Flowpack.SearchPlugin:SingleResult) < prototype(TYPO3.TypoScript:Case) { default { condition = Flowpack.SearchPlugin:CanRender { type = ${node.nodeType.name + 'SearchResult'} } type = ${node.nodeType.name + 'SearchResult'} } fallback { condition = TRUE type = 'TYPO3.Neos:DocumentSearchResult' } } Product Product ProductSearchResult
28. Fluid vs TypoScript
29. TypoScript Fluid rendering controller extensible declarative no loops simple templates imperative
30. <f:for each="{items}" as="item"> <li{ts:render(path:'{item.state}.attributes', context: {item: item}) -> f:format.raw()}> <neos:link.node node="{item.node}">{item.label}</neos:link.node> <f:if condition="{item.subItems}"> <ul> <f:render section="itemsList" arguments="{items: item.subItems}" /> </ul> </f:if> </li> </f:for> Fine to use e.g. for menus!
32. The Content Cache
33. Page Menu ContentCollection Text Plugin Image cached embed embed embed embed embed Page Cache Record
34. prototype(Page) { @cache { mode = 'cached' } }
35. Page Menu ContentCollection Text Plugin Image cached embed embed embed embed embed Page Cache Record
36. Page Menu ContentCollection Text Plugin Image cached embed embed embed cached embed Page Cache Record Plugin Cache Record
37. Page Menu ContentCollection Text Plugin Image cached embed embed embed uncached embed Page Cache Record always rendered dynamically
38. cached uncached embedded part of outer cached element store in cache render dynamically
39. Page Menu ContentCollection Text Plugin Image cached embed embed embed uncached embed always rendered dynamically What is currently being rendered? What is in the (TypoScript) context?
40. What is currently being rendered? What is in the (TypoScript) context? prototype(Page) { @cache { mode = 'uncached' context { 1 = 'node' 2 = 'documentNode' } } }
41. cached embedded part of outer cached element store in cache uncached render dynamically
42. Basic Idea of caching Calculate Cache Entry Identifier Does Entry Identifier Exist In Cache? expensive calculation (such as rendering a page) Page Cache Record store in cache e.g. URL
43. Configuring the Entry Identifier prototype(Page) { @cache { mode = 'cached' entryIdentifier { // parts of the entry identifier node = ${node} editPreviewMode = ${node.context.currentRenderingMode.name} } } }
44. Configuring the Entry Identifier prototype(Page) { @cache { mode = 'cached' entryIdentifier { // parts of the entry identifier fixedIdentifier = 'Hello World' } } }
45. Done!
46. There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Karlton
47. Not Quite!
48. Core Question When should the cache be flushed?
49. When should the cache be flushed? Page Cache Record Everything Node_A.B Everything Node_A.B DescendantOf_A NodeType_X
50. Confused?
51. Neos has sane defaults!
54. Existing Packages
55. Flowpack.Listable
57. Neos.MarketPlace neos.io
59. Neos.NeosIo
60. https://github.com/psmb/
61. TYPO3.Neos TYPO3.Neos.NodeTypes
62. Experiment, Share, Discuss, Iterate!