A Round Trip through your Presentation Layer with Fusion

A Round Trip through your Presentation Layer with Fusion

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

5c35ea5ff0ba6e46116b1470509f96d1?s=128

Dominique Feyer

March 31, 2017
Tweet

Transcript

  1. None
  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

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