Wichtige Entwicklertools für Internationalisierung: JSON Differ & ICU Message Editor

Lokalisierung (i18n) ist mehr als nur das Übersetzen von Wörtern – es geht um das Verwalten komplexer Dateistrukturen, den Umgang mit dynamischen Inhalten und die Sicherstellung der Qualität in allen Sprachen. Als Entwickler kämpfen wir oft mit zwei spezifischen Problemen:

1. Verwaltung riesiger JSON-Übersetzungsdateien: Herauszufinden, was sich zwischen zwei Versionen einer 5.000 Zeilen langen JSON-Datei geändert hat, ist mit Standard-Diff-Tools ein Albtraum.
2. Schreiben komplexer ICU-Nachrichten: Syntaxfehler in Pluralen oder Select-Anweisungen bringen Anwendungen zur Laufzeit oft zum Absturz.

Bei IntlPull standen wir vor genau denselben Herausforderungen. Deshalb haben wir zwei leistungsstarke Tools entwickelt, um sie zu lösen, und stellen sie der Community kostenlos zur Verfügung.

1. Visueller JSON-Übersetzungs-Differ

Standard-Diff-Tools wie git diff oder Textvergleicher basieren auf Zeilen. Sie verstehen die Struktur von JSON nicht. Wenn Sie Schlüssel neu ordnen oder die Einrückung ändern, zeigen Standard-Tools die gesamte Datei als geändert an.

Unser JSON-Übersetzungs-Differ ist semantisch bewusst. Er versteht, dass JSON ein Objekt ist, nicht nur Textzeilen.

Hauptmerkmale

• Strukturbewusster Vergleich: Ignoriert Änderungen der Schlüsselreihenfolge und Formatierungsunterschiede. Er hebt nur tatsächliche Inhaltsänderungen hervor.
• Unterstützung verschachtelter Schlüssel: Flacht verschachtelte Objekte automatisch ab und vergleicht sie (z. B. auth.login.title), sodass Sie genau sehen können, welcher Blattknoten sich geändert hat.
• "Unverändertes anzeigen/ausblenden": Umschalten, um sich ausschließlich auf das zu konzentrieren, was neu, entfernt oder geändert ist.
• Visuelle Farbcodierung:
  • <span style="color: #4ade80">Grün</span> für hinzugefügte Schlüssel.
  • <span style="color: #f87171">Rot</span> für entfernte Schlüssel.
  • <span style="color: #facc15">Gelb</span> für geänderte Werte.
• Exportierbare Berichte: Generieren Sie einen JSON-Bericht der Unterschiede, um ihn mit Ihrem Lokalisierungsteam zu teilen oder an einen Pull Request anzuhängen.

Anwendungsfall: Überprüfung von Übersetzungsaktualisierungen

Stellen Sie sich vor, Ihre Übersetzungsagentur sendet eine neue de.json zurück. Bevor Sie sie in Ihre Codebasis zusammenführen, möchten Sie sicherstellen, dass nicht versehentlich Schlüssel gelöscht oder Schlüssel geändert wurden, die nicht hätten berührt werden sollen.

Mit dem JSON Differ:

1. Fügen Sie Ihre ursprüngliche de.json links ein.
2. Fügen Sie die neue Datei rechts ein.
3. Sehen Sie sofort, dass 5 Schlüssel hinzugefügt, 0 entfernt und 12 geändert wurden.
4. Überprüfen Sie, ob kritische Schlüssel fehlen, bevor Sie zusammenführen.

2. ICU Message Editor & Validator

Das ICU Message Format ist der Industriestandard für den Umgang mit Pluralen, Geschlechterauswahl und Variablenersetzung. Die Syntax ist jedoch bekanntermaßen schwer zu schreiben und leicht zu brechen.

Eine fehlende schließende Klammer } oder ein Tippfehler in einem Schlüsselwort kann dazu führen, dass Ihre gesamte React- oder Next.js-Anwendung zur Laufzeit einen Fehler auslöst.

Unser ICU Message Editor bietet eine sichere Sandbox zum Schreiben, Testen und Validieren Ihrer Nachrichten.

Hauptmerkmale

• Echtzeit-Vorschau: Geben Sie Ihre Nachricht ein und sehen Sie sofort, wie sie gerendert wird.
• Variablen-Spielplatz: Das Tool erkennt automatisch Variablen (z. B. {name}, {count}) und generiert Eingabefelder, damit Sie verschiedene Werte testen können.
• Syntax-Validierung: Erhalten Sie sofortiges Feedback, wenn Ihre Klammern unausgeglichen sind oder Ihre Syntax ungültig ist.
• Vorgefertigte Vorlagen: Verwirrt darüber, wie man einen Plural schreibt? Ein-Klick-Vorlagen für:
  • Plurale: {count, plural, =0 {Keine Artikel} other {# Artikel}}
  • Select: {gender, select, male {Er} female {Sie} other {Sie}}
  • Datum/Zeit/Nummer: Standardformatierungsmuster.

Anwendungsfall: Tief verschachtelte Plurale

Einen Satz wie "Sie haben 3 Nachrichten in 2 Ordnern" zu schreiben, bei dem beide Zahlen dynamisch sind, ist komplex.

Standardansatz: Syntax raten, App ausführen, Absturz sehen, erneut versuchen.

Mit ICU Editor:

1. Öffnen Sie den ICU Editor.
2. Verwenden Sie die Vorlage "Mehrere Variablen".
3. Tippen Sie: Sie haben {msgCount, plural, =1 {# Nachricht} other {# Nachrichten}} in {folderCount, plural, =1 {# Ordner} other {# Ordnern}}.
4. Testen Sie mit msgCount=1, folderCount=5 -> "Sie haben 1 Nachricht in 5 Ordnern."
5. Testen mit msgCount=2, folderCount=1 -> "Sie haben 2 Nachrichten in 1 Ordner."
6. Kopieren Sie den validierten String in Ihren Code.

Warum wir das gebaut haben

Wir haben diese Tools gebaut, weil wir sie für IntlPull, unsere Plattform für Lokalisierungsmanagement, benötigten. Beim Aufbau eines Systems zur Automatisierung von Übersetzungen stellten wir fest, dass die "einfachen" Aufgaben der Überprüfung von Unterschieden und des Schreibens von Syntax immer noch manuell und fehleranfällig waren.

Diese Tools sind kostenlose Teile unserer Mission, die Entwicklererfahrung für die Internationalisierung zu verbessern.

Bereit, Ihren Workflow zu optimieren?

• Beginnen Sie mit dem Vergleich von Dateien mit dem JSON Differ.
• Testen Sie Ihre Strings mit dem ICU Message Editor.
• Für eine vollständige Lösung schauen Sie sich IntlPull an, um Ihren gesamten Übersetzungsworkflow zu automatisieren.