7. AFX-Grundlagen
In diesem Kapitel geht es um AFX – eine Schreibweise für Fusion, die sich besonders für Präsentations-Komponenten eignet.
Domänenspezifische Sprachen
HTML mit Fusion zu “schreiben” führt dazu, dass der Code schnell “in die Höhe” wächst. Fusion hat aber die Möglichkeit Domänenspezifische Sprachen (DSLs) zu definieren. Dadurch lässt sich eine andere Syntax verwenden, um Fusion-Code zu generieren. AFX ist auch eine DSL, mit der Fusion in einer HTML- bzw. JSX-Ähnlichen Syntax geschrieben werden kann.
AFX
AFX-Code wird mit Tagged Template-Strings (bekannt aus JavaScript) geschrieben. Also beginnt AFX-Code mit afx, gefolgt von Backticks (`) in denen der eigentliche Code steht. Also afx`CODE`. So sieht unser Banner-Renderer mit AFX aus:
// Vorher:
renderer = Neos.Fusion:Tag {
tagName = 'div'
attributes.class = 'card card-content title'
content = Neos.Neos:Editable {
property = 'text'
}
}
// Nachher:
renderer = afx`
<div class='card card-content title'>
<Neos.Neos:Editable property='text' />
</div>
`AFX kann praktisch überall verwendet werden und die Verwendung von AFX wird sogar als best practice angesehen.
So sieht der NeosTutorial.Site:Page-Prototype mit AFX aus:
prototype(NeosTutorial.Site:Page) < prototype(Neos.Neos:Page) {
head.stylesheets = afx`
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" @children="attributes.href">
<Neos.Fusion:ResourceUri package="NeosTutorial.Site" path="Styles/bulma.css" />
</link>
<link rel="stylesheet" type="text/css" @children="attrbutes.href">
<Neos.Fusion:ResourceUri package="NeosTutorial.Site" path="Styles/style.css" />
</link>
`
body = afx`
<div>
<Neos.Neos:ContentCollection nodePath='main' />
</div>
`
}Das ist jetzt natürlich ein ziemlicher Sprung von dem wie wir vorher Fusion-Code geschrieben haben, aber da sich beide Schreibweisen parallel verwenden und beliebig austauschen lassen, werden auch beide weiterhin verwendet. Letztendlich bietet jede Schreibweise seine eigenen Vorteile.
Neos Entwicklerschulung für Agenturen und Entwickler
Um AFX besser zu verstehen, sollte man sich dessen Funktionsweise genauer ansehen.
- HTML-Tags werden automatisch zu Neos.Fusion:Tag umgewandelt
- HTML Tag-Attribute (href, src, alt etc.) werden in die attributes-Property des Neos.Fusion:Tag-Objekts gesetzt.
- Kind-Elemente von HTML-Tags werden in die content-Property des Neos.Fusion:Tag-Objekts gesetzt.
- Anstelle von HTML-Tags können Fusion Prototypes in AFX geschrieben werden. Über Attribute lassen sich Properties setzen.
- Über @children wird gekennzeichnet, auf welche Property sich das Kind-Element beziehen soll.
- Bei mehreren AFX-Tags auf einer Ebene wird ein Neos.Fusion:Array erzeugt. Das gilt auch für Kind-Elemente.
- Die Key-Werte des Arrays werden generiert, über @key lässt sich dieser aber selbst wählen.
- Eel-Ausdrücke (${}) werden in AFX ohne $ geschrieben (wie in JSX).
Es gibt natürlich noch weitere Eigenschaften von AFX. Diese lassen sich aber besser erläutern wenn man einen Kontext dazu hat. Später kommen wir aber auch darauf zurück.
