Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A Round Trip through your Presentation Layer wi...
Search
Dominique Feyer
March 31, 2017
Programming
0
490
A Round Trip through your Presentation Layer with Fusion
Get a better understanding of Fluid and Fusion for your Neos CMS project
Dominique Feyer
March 31, 2017
Tweet
Share
More Decks by Dominique Feyer
See All by Dominique Feyer
content modeling from theory to Neos CMS
dfeyer
1
170
Liiptalk Neos CMS
dfeyer
1
96
Inspiring conference 2016 - Automation & external service integration
dfeyer
0
38
Inspiring Conference 2016 - architectes.ch case study
dfeyer
0
62
Neos CMS Introduction, Webmardi, Lausanne, February 2015
dfeyer
0
45
Neos CMS: Node Kingdom
dfeyer
0
85
Other Decks in Programming
See All in Programming
技術を改善し続ける
gumioji
0
130
React 19アップデートのために必要なこと
uhyo
8
1.5k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
280
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
18
4.1k
color-scheme: light dark; を完全に理解する
uhyo
7
490
Unity Android XR入門
sakutama_11
0
180
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
930
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
330
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
楽しく向き合う例外対応
okutsu
0
700
Jasprが凄い話
hyshu
0
170
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
160
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Speed Design
sergeychernyshev
27
810
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A Modern Web Designer's Workflow
chriscoyier
693
190k
We Have a Design System, Now What?
morganepeng
51
7.4k
Done Done
chrislema
182
16k
Music & Morning Musume
bryan
46
6.4k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Navigating Team Friction
lara
183
15k
Transcript
None
@dfeyer on twitter/slack Dominique Feyer
@dimaip on twitter/slack Dmitri Pisarev
a round trip through your presentation layer in Neos
Logicless Templates, Smart Fusion Objects
Conditions
<f:if condition="{neos:rendering.inBackend()}"> Secret stuff! </f:if>
secrectStuff = 'Secret stuff!' secrectStuff.@if.onlyInBackend = ${node.context.inBackend}
{secrectStuff}
Loops
<f:for each="{blogPosts}" as="blogPost"> <div class="BlogPost-teaser"> <h2>{blogPost.title}</h2> <div>{blogPost.teaser}</div> </div> </f:for>
prototype(Your.Site:BlogPostsList) < prototype(Neos.Fusion:Collection) { collection = ${blogPosts} itemName = 'node'
itemRenderer = Your.Site:BlogTeaser }
Partials
<f:render partial="Header"/> <div>Website content</div>
prototype(Your.Site:Page) { header = Your.Site:Header }
{header -> f:format.raw()} <div>Website content</div>
Layouts
<f:layout name="Layout"/> <f:section name="main"> <div class="Content">The content</div> </f:section>
prototype(Your.Site:MainPage) < prototype(Page) { @process.layout = Your.Site:Components.Layout }
prototype(Your.Site:Components.Layout) < prototype(Neos.Fusion:Template) { templatePath = .../Layout.html value = ${value}
}
structure is everything
collocate component's resources
Fusion/Components/Menu/ Menu.fusion Menu.html Menu.js Menu.css
project directory structure
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
Override.fusion
prototype(Neos.Fusion:Collection) { itemName = ‘node’ }
Shame.fusion
prototype(Neos.Neos:Page) { googleAnalyticsTrackingCode = Neos.GoogleAnalytics:TrackingCode }
select rendering based on the node type
root { default { renderPath = ‘page’ } } root.blog
{ @position = ‘before default’ condition = ${q(node).is(‘[instanceof Your.Site:Blog]’)} type = ‘Your.Site:Blog.Document’ }
root { default { type = ${q(node).property(‘_nodeType') + ‘.Document’} renderPath
> } }
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' } }
fusion prototype generator
'Neos.Neos:Node': options: fusion: prototypeGenerator: ~
'Neos.Neos:Node': options: fusion: prototypeGenerator: Your\Site\Generators\Generator
opinionated template object
prototype(Your.Site:Components.Footer) < prototype(Neos.Fusion:Template) { templatePath = ‘resource://Your.Site/Private/ Fusion/Components/Footer/Footer.html’ }
prototype(Your.Site:SimpleTemplate) { @class = ‘Your\\Site\\FusionObjects\\TemplateImplementation’ } https://gist.github.com/dfeyer/f13c5e35004493956c9fef0bbc5efb0f
prototype(Your.Site:Components.Footer) < prototype(Your.Site:SimpleTemplate) Will automatically look for template in resource://Your.Site/Private/Fusion/Components/Footer/Footer.html
more to come
fusion is just another language
Your.Site:Book is not Your.Site:Book
Your.Site:Book NodeTypes.Book.yaml
‘Your.Site:Book': superTypes: 'Neos.Neos:Document': true ‘Your.Site:SeoMixins': true ‘Your.Site:JsonLd.Document’: true
Your.Site:Book Book.fusion
prototype(Your.Site:Book) < prototype(Neos.Fusion:Template)
prototype(Your.Site:Book) { title = ${q(node).property(‘title’)} }
one node type multiple fusion prototypes
Your.Site:Book Your.Site:Book.Document Your.Site:Book.Title Your.Site:Book.QrCode Your.Site:Book.SearchResult
one fusion prototype multiple nodetypes
Your.Site:Defaut.SearchResult Your.Site:Defaut.Document Your.Site:Defaut.JsonLd.Document
composition or inheritance… again
prototype(Your.Site:Library) { ownerName = … ownerEmail = … contactName =
… contactEmail = … }
prototype(Your.Site:Library) { owner = Your.Site:Person contact = Your.Site:Person address =
Your.Site:Address }
‘Your.Site:Library': childNodes: 'owner': type: ‘Your.Site:Person' 'contact': type: 'Your.Site:Person' 'address': type:
'Your.Site:Address'
naming… again
schema.org
small objects are beautiful
Neos.Fusion:Value prototype(Your.Site:Anything) < prototype(Neos.Fusion:Value)
Query
prototype(Your.Site:AllBooks.Query) { value = ${q(site).find(...).get()} }
prototype(Your.Site:LatestBooks.Query) { value = Your.Site:AllBooks.Query { @process.latest = ${Array.slice(value,0,3} }
}
Decorator
prototype(Your.Site:Components.Article) { tagName = ‘article’ content = ${value} } prototype(Your.Site:Components.Article)
< prototype(Neos.Fusion:Tag)
prototype(Your.Site:Book.Teaser) { … @process.wrap = Your.Site:Components.Article }
Neos.Fusion:RawArray prototype(Your.Site:Anything) < prototype(Neos.Fusion:RawArray)
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)
Neos.Fusion:RawCollection Neos.Fusion:Tag
take care of your domain logic
${q(node).property('discount') > 0 ? q(node).property('price') - (q(node).property('price') * q(node).property('discount') /
100) : q(node).property(‘price’)}
‘Your.Site:Book’: class: Your\Site\Domain\Model\Book
${book.price}
start from scratch
fusion in flow application
workshop anyone ?
hijack us
demo site reboot
None
in the making https://github.com/Flowpack/fusion-bp