It’s #FrontendFriday – Nutzung von YAML anstatt JSON für Frontend Ressourcen
JSON (JavaScript Object Notation) ist in der Webentwicklung weitverbreitet und gilt als Standardübertragungsformat. Frontend Ressourcen, welche nicht über Schnittstellen bereitgestellt werden, sind häufig als JSON definiert. Für diese Ressourcen empfiehlt sich je nach Anwendungsfall der Einsatz von YAML.
YAML ist eine vereinfachte Auszeichnungssprache, die im Gegenteil zu JSON die Ergänzung durch Kommentare zulässt. Je nach Anforderung kann es vorkommen, dass bestimmte Ressourcen regelmäßig verändert werden müssen. Durch die Kommentarfunktion ergibt sich die Möglichkeit zusätzliche Informationen zu den Attributen hinzuzufügen, umso zu verdeutlichen welche Änderungen / Nebenwirkungen die Anpassung von gewissen Werten mit sich bringen kann.
Die Transformation von JSON zu YAML oder anders herum ist ein leichtes. Es gibt unzählige Webanwendungen aber auch Libraries, die dies unterstützen:
Beispiele:
Ein kleines konkretes Beispiel wie sich die Vorteile von YAML nutzen lassen, um Übersetzungsdateien als YAML zu definieren, obwohl das unterliegende Framework i18next https://react.i18next.com/, welche die Übersetzungsdateien verarbeitet nur das JSON Dateiformat unterstützt:
Das nachfolgende Schaubild stellt eine Übersetzungsdatei als YAML auf Englisch dar.
Das nachfolgende Schaubild stellt die Konfiguration von i18next mit der Transformation von YAML zu JSON dar.
Die Funktion parse ermöglicht den Aufruf einer Callback Methode. In der Methode wird die Library yaml verwendet, um über die darin enthaltende Funktion .load(yamlContent) die Datei als JSON zu parsen.
Für die Übersetzungsdateien lassen sich YAML Dateien sehr gut verwenden, um Informationen in Form von Kommentaren anzureichern. Dadurch kann auf eine zusätzliche (eventuell sogar externe) Dokumentation der JSON Datei ggfs. vollständig verzichtet werden. Dabei spielt es keine Rolle, ob das unterliegende Framework oder Library nur mit JSON arbeiten kann, da die Transformation von YAML zu JSON ohne weiteres möglich ist.
Mehr über Frontend Entwicklung erfahren
