A Round Trip through your Presentation Layer with Fusion

Transcript

1. 1.

   None
2. 2.

   @dfeyer on twitter/slack Dominique Feyer

3. 3.

   @dimaip on twitter/slack Dmitri Pisarev

4. 4.

   a round trip through your presentation layer in Neos

5. 5.

   Logicless Templates, Smart Fusion Objects

6. 6.

   Conditions

7. 7.

   <f:if condition="{neos:rendering.inBackend()}"> Secret stuff! </f:if>

8. 8.

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

9. 9.

   {secrectStuff}

10. 10.

    Loops

11. 11.

    <f:for each="{blogPosts}" as="blogPost"> <div class="BlogPost-teaser"> <h2>{blogPost.title}</h2> <div>{blogPost.teaser}</div> </div> </f:for>

12. 12.

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

    itemRenderer = Your.Site:BlogTeaser }
13. 13.

    Partials

14. 14.

    <f:render partial="Header"/> <div>Website content</div>

15. 15.

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

16. 16.

    {header -> f:format.raw()} <div>Website content</div>

17. 17.

    Layouts

18. 18.

    <f:layout name="Layout"/> <f:section name="main"> <div class="Content">The content</div> </f:section>

19. 19.

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

20. 20.

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

    }
21. 21.

    structure is everything

22. 22.

    collocate component's resources

23. 23.

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

24. 24.

    project directory structure

25. 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. 26.

    Override.fusion

27. 27.

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

28. 28.

    Shame.fusion

29. 29.

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

30. 30.

    select rendering based on the node type

31. 31.

    root { default { renderPath = ‘page’ } } root.blog

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

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

    > } }
33. 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. 34.

    fusion prototype generator

35. 35.

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

36. 36.

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

37. 37.

    opinionated template object

38. 38.

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

39. 39.

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

40. 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. 41.

    more to come

42. 42.

    fusion is just another language

43. 43.

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

44. 44.

    Your.Site:Book NodeTypes.Book.yaml

45. 45.

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

46. 46.

    Your.Site:Book Book.fusion

47. 47.

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

48. 48.

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

49. 49.

    one node type multiple fusion prototypes

50. 50.

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

51. 51.

    one fusion prototype multiple nodetypes

52. 52.

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

53. 53.

    composition or inheritance… again

54. 54.

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

    … contactEmail = … }
55. 55.

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

    Your.Site:Address }
56. 56.

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

    'Your.Site:Address'
57. 57.

    naming… again

58. 58.

    schema.org

59. 59.

    small objects are beautiful

60. 60.

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

61. 61.

    Query

62. 62.

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

63. 63.

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

    }
64. 64.

    Decorator

65. 65.

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

    < prototype(Neos.Fusion:Tag)
66. 66.

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

67. 67.

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

68. 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. 69.

    Neos.Fusion:RawCollection Neos.Fusion:Tag

70. 70.

    take care of your domain logic

71. 71.

    ${q(node).property('discount') > 0 ? q(node).property('price') - (q(node).property('price') * q(node).property('discount') /

    100) : q(node).property(‘price’)}
72. 72.

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

73. 73.

    ${book.price}

74. 74.

    start from scratch

75. 75.

    fusion in flow application

76. 76.

    workshop anyone ?

77. 77.

    hijack us

78. 78.

    demo site reboot

79. 79.

    None
80. 80.

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