WYSIWYG Package für Umbraco 15+
Backoffice vs Frontend
Ich war schon zu Desk-Top-Publishing (DTP)-Zeiten ein Freund von What You See Is What You Get. Jetzt bin ich bemüht, dieses Thema auch im Web umzusetzen.
Für Umbraco 13 wurde in einem Community-Projekt gezeigt, dass man mit dem neuen Block-Grid im Backoffice eine bearbeitbare Vorschau ermöglichen kann, die der Frontenddarstellung nahezu entspricht. Das dafür notwendige CSS kann dabei auf beiden Seiten verwendet werden.
Mit dem neuen Backoffice Bellissima hat sich allerdings einiges geändert und soweit ich bisher ergründen konnte, ist eine vergleichbare Lösung aktuell (Version 15.4.0) nicht möglich.
Allerdings handelt es sich dabei lediglich um ein Element zum Bearbeiten der einzelnen Layout-Blöcke und meiner Meinung nach sollte dafür eine Lösung machbar sein. Das sollte jedoch mit dem Entwicklungsteam von Umbraco abgestimmt werden, da die notwendigen Änderungen recht aufwendig sein würden.
Was ich bisher erreicht habe, ist dennoch beeindrucken und eine große Hilfe für Redakteure. Eine Demonstration (nur in English) kann man sich auf YouTube ansehen. Das Github-Projekt ist Open-Source und ich hoffe, dass sich Unterstützer finden werden, die weitere Module beisteuern oder Verbesserungsvorschläge machen.
Für mich selbst, ist dies mein Einstieg in die neue Backoffice-Technologie von Bellissima. Entscheidende Technologien und Konzepte, die selbst einiges an Lernaufwand mit sich bringen, sind u.a. TypeScript, Vite, Lit, Web-Components, RxJS.
Einige waren mir nicht gänzlich neu und sind mir bereits im Zusammenhang mit Angular-Projekten begegnet. Allerdings lag mein persönlicher Schwerpunkt auf Backend Technologien wie ASP.Net, c#, Datenbanken, REST-APIs, Razor etc.
Da Umbraco selbst eine Menge an APIs mitbringt, werde ich diesen Schwerpunkt wahrscheinlich verschieben.
Besonders zwei Unterschiede zwischen TypeScript und C# empfinde ich als besonders gewöhnungsbedürftig:
- Der as bzw. is-Operator funktioniert in C# anders als in TypeScript. Wichtig ist, dass man die tsc (TypeScript-Validierung) konfiguriert, weil JavaScript keine Typsicherheit mitbringt und zur Laufzeit anders als C#-Kode Objekte nicht auf ihren Typ prüft. Was dazu führt, das man irgend ein Objekt bekommen kann das nicht null ist. Mit anderen Worten bedeutet das mehr Aufwand in Javascript, um sicher zu stellen, dass einer Funktion bzw. Methode das erwartete Objekt übergeben wurde.
- Die Verwendung asynchroner Methoden unterschiedlich. Auch hier nimmt - wie ich finde - C# dem Entwickler etwas an Arbeit ab. Vor allem muss man sich an eine andere Vorgehensweise gewöhnen und erstmal in die Konzept reindenken. Wahrscheinlich sind auch hier gleiche Schlüsselworte der Grund für die Verwirrung.
Ein weiteres Thema war neu und ich musste einiges recherchieren. CSS hat sich in den letzten Jahren (besser seit ich mich eigehender damit befasst hatte) sehr stark weiterentwickelt. Außerdem bringen Web-Components ein neues Konzept der Einkapselung mit sich, in das ich mich ebenfalls erst gewöhnen musste. Hier werde wohl die nächsten Verbesserungen bzw. Erweiterungen in meine Packet vornehmen. Letztlich besteht der einzige Weg auf das Styling einer Komponente von Außen Einfluss zu nehmen über CSS-Variablen. Deren Verwendung muss natürlich von der Komponente berücksichtigt bzw. definiert werden.