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
520
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
44
Inspiring Conference 2016 - architectes.ch case study
dfeyer
0
66
Neos CMS Introduction, Webmardi, Lausanne, February 2015
dfeyer
0
51
Neos CMS: Node Kingdom
dfeyer
0
93
Other Decks in Programming
See All in Programming
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
CSC305 Lecture 11
javiergs
PRO
0
270
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
380
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
Cursorハンズオン実践!
eltociear
2
1.2k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
660
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
250
Software Architecture
hschwentner
6
2.3k
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
970
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
How to Ace a Technical Interview
jacobian
280
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
GitHub's CSS Performance
jonrohan
1032
470k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Side Projects
sachag
455
43k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
It's Worth the Effort
3n
187
28k
Making Projects Easy
brettharned
120
6.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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