A Round Trip through your Presentation Layer with Fusion

Get a better understanding of Fluid and Fusion for your Neos CMS project

Transcript

2. @dfeyer on twitter/slack Dominique Feyer
3. @dimaip on twitter/slack Dmitri Pisarev
4. a round trip through your presentation layer in Neos
5. Logicless Templates, Smart Fusion Objects
6. Conditions
7. <f:if condition="{neos:rendering.inBackend()}"> Secret stuff! </f:if>
8. secrectStuff = 'Secret stuff!' secrectStuff.@if.onlyInBackend = ${node.context.inBackend}
9. {secrectStuff}
10. Loops
11. <f:for each="{blogPosts}" as="blogPost"> <div class="BlogPost-teaser"> <h2>{blogPost.title}</h2> <div>{blogPost.teaser}</div> </div> </f:for>
12. prototype(Your.Site:BlogPostsList) < prototype(Neos.Fusion:Collection) { collection = ${blogPosts} itemName = 'node' itemRenderer = Your.Site:BlogTeaser }
13. Partials
14. <f:render partial="Header"/> <div>Website content</div>
15. prototype(Your.Site:Page) { header = Your.Site:Header }
16. {header -> f:format.raw()} <div>Website content</div>
17. Layouts
18. <f:layout name="Layout"/> <f:section name="main"> <div class="Content">The content</div> </f:section>
19. prototype(Your.Site:MainPage) < prototype(Page) { @process.layout = Your.Site:Components.Layout }
20. prototype(Your.Site:Components.Layout) < prototype(Neos.Fusion:Template) { templatePath = .../Layout.html value = ${value} }
21. structure is everything
22. collocate component's resources
23. Fusion/Components/Menu/ Menu.fusion Menu.html Menu.js Menu.css
24. project directory structure
25. Blog/ Blog.fusion Blog.html Blog.Document.fusion Blog.Comments.fusion Blog.css Components/Menu/ Menu.fusion Menu.html Menu.js Menu.css Override.fusion Shame.fusion Root.fusion Resources/Private/Fusion
26. Override.fusion
27. prototype(Neos.Fusion:Collection) { itemName = ‘node’ }
28. Shame.fusion
29. prototype(Neos.Neos:Page) { googleAnalyticsTrackingCode = Neos.GoogleAnalytics:TrackingCode }
30. select rendering based on the node type
31. root { default { renderPath = ‘page’ } } root.blog { @position = ‘before default’ condition = ${q(node).is(‘[instanceof Your.Site:Blog]’)} type = ‘Your.Site:Blog.Document’ }
32. root { default { type = ${q(node).property(‘_nodeType') + ‘.Document’} renderPath > } }
33. prototype(Your.Site:Blog.Document) < prototype(Page) { head.stylesheets.main = … body = Your.Site:Blog } prototype(Your.Site:Blog) < prototype(Neos.Fusion:Template) { templatePath = ‘…’ main = Neos.Neos:ContentCollection { nodePath = 'main' } }
34. fusion prototype generator
35. 'Neos.Neos:Node': options: fusion: prototypeGenerator: ~
36. 'Neos.Neos:Node': options: fusion: prototypeGenerator: Your\Site\Generators\Generator
37. opinionated template object
38. prototype(Your.Site:Components.Footer) < prototype(Neos.Fusion:Template) { templatePath = ‘resource://Your.Site/Private/ Fusion/Components/Footer/Footer.html’ }
39. prototype(Your.Site:SimpleTemplate) { @class = ‘Your\\Site\\FusionObjects\\TemplateImplementation’ } https://gist.github.com/dfeyer/f13c5e35004493956c9fef0bbc5efb0f
40. prototype(Your.Site:Components.Footer) < prototype(Your.Site:SimpleTemplate) Will automatically look for template in resource://Your.Site/Private/Fusion/Components/Footer/Footer.html
41. more to come
42. fusion is just another language
43. Your.Site:Book is not Your.Site:Book
44. Your.Site:Book NodeTypes.Book.yaml
45. ‘Your.Site:Book': superTypes: 'Neos.Neos:Document': true ‘Your.Site:SeoMixins': true ‘Your.Site:JsonLd.Document’: true
46. Your.Site:Book Book.fusion
47. prototype(Your.Site:Book) < prototype(Neos.Fusion:Template)
48. prototype(Your.Site:Book) { title = ${q(node).property(‘title’)} }
49. one node type multiple fusion prototypes
50. Your.Site:Book Your.Site:Book.Document Your.Site:Book.Title Your.Site:Book.QrCode Your.Site:Book.SearchResult
51. one fusion prototype multiple nodetypes
52. Your.Site:Defaut.SearchResult Your.Site:Defaut.Document Your.Site:Defaut.JsonLd.Document
53. composition or inheritance… again
54. prototype(Your.Site:Library) { ownerName = … ownerEmail = … contactName = … contactEmail = … }
55. prototype(Your.Site:Library) { owner = Your.Site:Person contact = Your.Site:Person address = Your.Site:Address }
56. ‘Your.Site:Library': childNodes: 'owner': type: ‘Your.Site:Person' 'contact': type: 'Your.Site:Person' 'address': type: 'Your.Site:Address'
57. naming… again
58. schema.org
59. small objects are beautiful
60. Neos.Fusion:Value prototype(Your.Site:Anything) < prototype(Neos.Fusion:Value)
61. Query
62. prototype(Your.Site:AllBooks.Query) { value = ${q(site).find(...).get()} }
63. prototype(Your.Site:LatestBooks.Query) { value = Your.Site:AllBooks.Query { @process.latest = ${Array.slice(value,0,3} } }
64. Decorator
65. prototype(Your.Site:Components.Article) { tagName = ‘article’ content = ${value} } prototype(Your.Site:Components.Article) < prototype(Neos.Fusion:Tag)
66. prototype(Your.Site:Book.Teaser) { … @process.wrap = Your.Site:Components.Article }
67. Neos.Fusion:RawArray prototype(Your.Site:Anything) < prototype(Neos.Fusion:RawArray)
68. prototype(Your.Site:Book.Json) { title = ${q(bookNode).property(‘title’)} price = ${Price.get(bookNode)} @process.stringify = ${Json.stringify(value)} } prototype(Your.Site:Book.Json) < prototype(Neos.Fusion:RawArray)
69. Neos.Fusion:RawCollection Neos.Fusion:Tag
70. take care of your domain logic
71. ${q(node).property('discount') > 0 ? q(node).property('price') - (q(node).property('price') * q(node).property('discount') / 100) : q(node).property(‘price’)}
72. ‘Your.Site:Book’: class: Your\Site\Domain\Model\Book
73. ${book.price}
74. start from scratch
75. fusion in flow application
76. workshop anyone ?
77. hijack us
78. demo site reboot
80. in the making https://github.com/Flowpack/fusion-bp