A Round Trip through your Presentation Layer with Fusion

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

Transcript

1. View Slide

2. @dfeyer on twitter/slack
   Dominique Feyer
   

   View Slide

3. @dimaip on twitter/slack
   Dmitri Pisarev
   

   View Slide

4. a round trip through
   your presentation layer
   in Neos
   

   View Slide

5. Logicless Templates, Smart Fusion Objects
   

   View Slide

6. Conditions
   

   View Slide

7. 
   Secret stuff!
   
   

   View Slide

8. secrectStuff = 'Secret stuff!'
   secrectStuff.@if.onlyInBackend = ${node.context.inBackend}
   

   View Slide

9. {secrectStuff}
   

   View Slide

10. Loops
    

    View Slide

11. 
    
    {blogPost.title}
    {blogPost.teaser}
    
    
    

    View Slide

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

    View Slide

13. Partials
    

    View Slide

14. 
    Website content
    

    View Slide

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

    View Slide

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

    View Slide

17. Layouts
    

    View Slide

18. 
    
    The content
    
    

    View Slide

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

    View Slide

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

    View Slide

21. structure is everything
    

    View Slide

22. collocate
    component's resources
    

    View Slide

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

    View Slide

24. project directory structure
    

    View Slide

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
    

    View Slide

26. Override.fusion
    

    View Slide

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

    View Slide

28. Shame.fusion
    

    View Slide

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

    View Slide

30. select rendering based on the
    node type
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. fusion prototype generator
    

    View Slide

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

    View Slide

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

    View Slide

37. opinionated template object
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

41. more to come
    

    View Slide

42. fusion is just
    another language
    

    View Slide

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

    View Slide

44. Your.Site:Book
    NodeTypes.Book.yaml
    

    View Slide

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

    View Slide

46. Your.Site:Book
    Book.fusion
    

    View Slide

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

    View Slide

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

    View Slide

49. one node type
    multiple fusion
    prototypes
    

    View Slide

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

    View Slide

51. one fusion prototype
    multiple nodetypes
    

    View Slide

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

    View Slide

53. composition or
    inheritance… again
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. naming… again
    

    View Slide

58. schema.org
    

    View Slide

59. small objects
    are beautiful
    

    View Slide

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

    View Slide

61. Query
    

    View Slide

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

    View Slide

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

    View Slide

64. Decorator
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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)
    

    View Slide

69. Neos.Fusion:RawCollection
    Neos.Fusion:Tag
    

    View Slide

70. take care of your
    domain logic
    

    View Slide

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

    View Slide

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

    View Slide

73. ${book.price}
    

    View Slide

74. start from scratch
    

    View Slide

75. fusion in
    flow application
    

    View Slide

76. workshop anyone ?
    

    View Slide

77. hijack us
    

    View Slide

78. demo site reboot
    

    View Slide

79. View Slide

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

    View Slide