A Round Trip through your Presentation Layer with Fusion

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

@dfeyer on twitter/slack Dominique Feyer

Slide 3

Slide 3 text

@dimaip on twitter/slack Dmitri Pisarev

Slide 4

Slide 4 text

a round trip through your presentation layer in Neos

Slide 5

Slide 5 text

Logicless Templates, Smart Fusion Objects

Slide 6

Slide 6 text

Conditions

Slide 7

Slide 7 text

Secret stuff!

Slide 8

Slide 8 text

secrectStuff = 'Secret stuff!' [email protected] = ${node.context.inBackend}

Slide 9

Slide 9 text

{secrectStuff}

Slide 10

Slide 10 text

Loops

Slide 11

Slide 11 text

{blogPost.title}

{blogPost.teaser}

Slide 12

Slide 12 text

prototype(Your.Site:BlogPostsList) < prototype(Neos.Fusion:Collection) { collection = ${blogPosts} itemName = 'node' itemRenderer = Your.Site:BlogTeaser }

Slide 13

Slide 13 text

Partials

Slide 14

Slide 14 text

Website content

Slide 15

Slide 15 text

prototype(Your.Site:Page) { header = Your.Site:Header }

Slide 16

Slide 16 text

{header -> f:format.raw()}

Website content

Slide 17

Slide 17 text

Layouts

Slide 18

Slide 18 text

The content

Slide 19

Slide 19 text

prototype(Your.Site:MainPage) < prototype(Page) { @process.layout = Your.Site:Components.Layout }

Slide 20

Slide 20 text

prototype(Your.Site:Components.Layout) < prototype(Neos.Fusion:Template) { templatePath = .../Layout.html value = ${value} }

Slide 21

Slide 21 text

structure is everything

Slide 22

Slide 22 text

collocate component's resources

Slide 23

Slide 23 text

Fusion/Components/Menu/ Menu.fusion Menu.html Menu.js Menu.css

Slide 24

Slide 24 text

project directory structure

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Override.fusion

Slide 27

Slide 27 text

prototype(Neos.Fusion:Collection) { itemName = ‘node’ }

Slide 28

Slide 28 text

Shame.fusion

Slide 29

Slide 29 text

prototype(Neos.Neos:Page) { googleAnalyticsTrackingCode = Neos.GoogleAnalytics:TrackingCode }

Slide 30

Slide 30 text

select rendering based on the node type

Slide 31

Slide 31 text

root { default { renderPath = ‘page’ } } root.blog { @position = ‘before default’ condition = ${q(node).is(‘[instanceof Your.Site:Blog]’)} type = ‘Your.Site:Blog.Document’ }

Slide 32

Slide 32 text

root { default { type = ${q(node).property(‘_nodeType') + ‘.Document’} renderPath > } }

Slide 33

Slide 33 text

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' } }

Slide 34

Slide 34 text

fusion prototype generator

Slide 35

Slide 35 text

'Neos.Neos:Node': options: fusion: prototypeGenerator: ~

Slide 36

Slide 36 text

'Neos.Neos:Node': options: fusion: prototypeGenerator: Your\Site\Generators\Generator

Slide 37

Slide 37 text

opinionated template object

Slide 38

Slide 38 text

prototype(Your.Site:Components.Footer) < prototype(Neos.Fusion:Template) { templatePath = ‘resource://Your.Site/Private/ Fusion/Components/Footer/Footer.html’ }

Slide 39

Slide 39 text

prototype(Your.Site:SimpleTemplate) { @class = ‘Your\\Site\\FusionObjects\\TemplateImplementation’ } https://gist.github.com/dfeyer/f13c5e35004493956c9fef0bbc5efb0f

Slide 40

Slide 40 text

prototype(Your.Site:Components.Footer) < prototype(Your.Site:SimpleTemplate) Will automatically look for template in resource://Your.Site/Private/Fusion/Components/Footer/Footer.html

Slide 41

Slide 41 text

more to come

Slide 42

Slide 42 text

fusion is just another language

Slide 43

Slide 43 text

Your.Site:Book is not Your.Site:Book

Slide 44

Slide 44 text

Your.Site:Book NodeTypes.Book.yaml

Slide 45

Slide 45 text

‘Your.Site:Book': superTypes: 'Neos.Neos:Document': true ‘Your.Site:SeoMixins': true ‘Your.Site:JsonLd.Document’: true

Slide 46

Slide 46 text

Your.Site:Book Book.fusion

Slide 47

Slide 47 text

prototype(Your.Site:Book) < prototype(Neos.Fusion:Template)

Slide 48

Slide 48 text

prototype(Your.Site:Book) { title = ${q(node).property(‘title’)} }

Slide 49

Slide 49 text

one node type multiple fusion prototypes

Slide 50

Slide 50 text

Your.Site:Book Your.Site:Book.Document Your.Site:Book.Title Your.Site:Book.QrCode Your.Site:Book.SearchResult

Slide 51

Slide 51 text

one fusion prototype multiple nodetypes

Slide 52

Slide 52 text

Your.Site:Defaut.SearchResult Your.Site:Defaut.Document Your.Site:Defaut.JsonLd.Document

Slide 53

Slide 53 text

composition or inheritance… again

Slide 54

Slide 54 text

prototype(Your.Site:Library) { ownerName = … ownerEmail = … contactName = … contactEmail = … }

Slide 55

Slide 55 text

prototype(Your.Site:Library) { owner = Your.Site:Person contact = Your.Site:Person address = Your.Site:Address }

Slide 56

Slide 56 text

‘Your.Site:Library': childNodes: 'owner': type: ‘Your.Site:Person' 'contact': type: 'Your.Site:Person' 'address': type: 'Your.Site:Address'

Slide 57

Slide 57 text

naming… again

Slide 58

Slide 58 text

schema.org

Slide 59

Slide 59 text

small objects are beautiful

Slide 60

Slide 60 text

Neos.Fusion:Value prototype(Your.Site:Anything) < prototype(Neos.Fusion:Value)

Slide 61

Slide 61 text

Query

Slide 62

Slide 62 text

prototype(Your.Site:AllBooks.Query) { value = ${q(site).find(...).get()} }

Slide 63

Slide 63 text

prototype(Your.Site:LatestBooks.Query) { value = Your.Site:AllBooks.Query { @process.latest = ${Array.slice(value,0,3} } }

Slide 64

Slide 64 text

Decorator

Slide 65

Slide 65 text

prototype(Your.Site:Components.Article) { tagName = ‘article’ content = ${value} } prototype(Your.Site:Components.Article) < prototype(Neos.Fusion:Tag)

Slide 66

Slide 66 text

prototype(Your.Site:Book.Teaser) { … @process.wrap = Your.Site:Components.Article }

Slide 67

Slide 67 text

Neos.Fusion:RawArray prototype(Your.Site:Anything) < prototype(Neos.Fusion:RawArray)

Slide 68

Slide 68 text

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)

Slide 69

Slide 69 text

Neos.Fusion:RawCollection Neos.Fusion:Tag

Slide 70

Slide 70 text

take care of your domain logic

Slide 71

Slide 71 text

${q(node).property('discount') > 0 ? q(node).property('price') - (q(node).property('price') * q(node).property('discount') / 100) : q(node).property(‘price’)}

Slide 72

Slide 72 text

‘Your.Site:Book’: class: Your\Site\Domain\Model\Book

Slide 73

Slide 73 text

${book.price}

Slide 74

Slide 74 text

start from scratch

Slide 75

Slide 75 text

fusion in ﬂow application

Slide 76

Slide 76 text

workshop anyone ?

Slide 77

Slide 77 text

hijack us

Slide 78

Slide 78 text

demo site reboot

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

in the making https://github.com/Flowpack/fusion-bp