A Round Trip through your Presentation Layer with Fusion

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