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
510
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
180
Liiptalk Neos CMS
dfeyer
1
100
Inspiring conference 2016 - Automation & external service integration
dfeyer
0
43
Inspiring Conference 2016 - architectes.ch case study
dfeyer
0
65
Neos CMS Introduction, Webmardi, Lausanne, February 2015
dfeyer
0
50
Neos CMS: Node Kingdom
dfeyer
0
90
Other Decks in Programming
See All in Programming
Create a website using Spatial Web
akkeylab
0
310
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
280
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
240
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
980
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
CursorはMCPを使った方が良いぞ
taigakono
1
190
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
500
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
240
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Six Lessons from altMBA
skipperchong
28
3.9k
Visualization
eitanlees
146
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Side Projects
sachag
455
42k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Automating Front-end Workflow
addyosmani
1370
200k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Orchestrator
shlominoach
188
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
A Tale of Four Properties
chriscoyier
160
23k
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!'
[email protected]
= ${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