Architektur der Internationalisierung in React Apps: Umfassender Leitfaden zur skalierbaren Lokalisierung

Einführung

In den letzten drei Monaten habe ich alleine an einer Mega-SaaS-Idee gearbeitet. Obwohl es eine aufregende Reise war, waren die Herausforderungen immens. In den letzten zwei Wochen war es für mich oberste Priorität, Anwendungsfälle mit hoher Priorität bereitzustellen und gleichzeitig die Qualität aufrechtzuerhalten.

Eine der wichtigsten Entscheidungen, vor denen ich stand, war, ob ich die Internationalisierung (i18n) integrieren sollte, um mehrere Sprachen zu unterstützen. Anfangs tendierte ich dazu, mit einer rein englischsprachigen Version zu starten und LLMs für zukünftige Übersetzungen zu nutzen. Als Ein-Personen-Team habe ich mich jedoch entschieden, mich vorerst auf einen einzigen lukrativen Markt zu konzentrieren.

Obwohl die Internationalisierung für mein Projekt optional ist, ist sie im beruflichen Umfeld aufgrund gesetzlicher und behördlicher Anforderungen unerlässlich. In diesem Blog wird untersucht, wie man eine skalierbare und effiziente i18n-Architektur entwirft und Fallstricke wie hohe Komplexität oder schlechte Struktur vermeidet – Erkenntnisse, die sowohl Einzelentwicklern als auch Teams zugute kommen können.

Da ich mich entschieden habe, i18n nicht in meinem Projekt zu implementieren, teile ich diesen Leitfaden, um anderen (und meinem zukünftigen Selbst!) zu helfen.

---

Ziele

Ein gutes Internationalisierungssystem sollte:

• Skalierbarkeit:Unterstützen Sie die nahtlose Zusammenarbeit zwischen Teams für Übersetzungen und Sprachaktualisierungen.
• Modularität: Behalten Sie eine einfache Struktur bei, die sich ohne Mehraufwand leicht erweitern lässt.
• Vorhersehbarkeit: Befolgen Sie konsistente, durchsetzbare Muster für die Lokalisierung.
• Einsteigerfreundlich: Seien Sie für Entwickler mit unterschiedlichen Erfahrungsstufen zugänglich.

---

Verfügbare Tools

Für die Internationalisierung in JavaScript finden Sie hier einige beliebte Tools:

• i18next: Eine ausgereifte, funktionsreiche Bibliothek, ideal für skalierbare, professionelle Lokalisierung.
• Alternativen: FormatJS, Polyglot.js, LinguiJS, GlobalizeJS, Fluent von Mozilla.

Jedes Tool hat seine Vor- und Nachteile. Der Einfachheit halber konzentriert sich dieser Leitfaden auf i18next.

---

Entwerfen der Architektur

Ordnerstruktur für die Internationalisierung

Die Architektur dreht sich um einen Ordner i18n, der drei Schlüsselkomponenten enthält:

1. Übersetzungsordner: Speichert JSON-Dateien für jede Sprache (z. B. en.json, ar.json, ch.json) und eine base.json-Vorlage für neue Sprachen.

2. index.js: Konfiguriert und initialisiert die i18n-Bibliothek (z. B. i18next) und legt Fallback-Sprachen und andere Optionen fest.

3. keys.js: Eine zentralisierte Struktur, die Übersetzungsschlüssel definiert, Konsistenz gewährleistet und Duplikate vermeidet.

Beispiel einer Ordnerstruktur:

src/
├── i18n/
│   ├── translations/
│   │   ├── en.json       # English translations
│   │   ├── ar.json       # Arabic translations
│   │   ├── ch.json       # Chinese translations
│   │   └── base.json     # Template for new languages
│   ├── index.js          # i18n configuration
│   └── keys.js           # Centralized keys for consistency

---

keys.js als zentralen Hub

Die Datei keys.js spiegelt die Struktur des Projekts wider und gruppiert Schlüssel nach Funktion oder Modul. Diese Struktur macht die Verwaltung von Schlüsseln intuitiv und skalierbar.

Beispielkeys.js:

const keys = {
  components: {
    featureA: {
      buttonText: "components.featureA.buttonText",
      label: "components.featureA.label",
    },
    featureB: {
      header: "components.featureB.header",
    },
  },
};

export default keys;

---

Übersetzungsdateien

Übersetzungs-JSON-Dateien richten sich nach der Struktur in „keys.js“ und gewährleisten so Konsistenz.

Beispiel en.json:

{
  "components": {
    "featureA": {
      "buttonText": "Submit",
      "label": "Enter your name"
    },
    "featureB": {
      "header": "Welcome to Feature B"
    }
  }
}

Beispiel ar.json:

{
  "components": {
    "featureA": {
      "buttonText": "إرسال",
      "label": "أدخل اسمك"
    },
    "featureB": {
      "header": "مرحبًا بكم في الميزة ب"
    }
  }
}

---

i18next einrichten

Installieren Sie i18next und seine React-Integration:

npm install i18next react-i18next

i18n/index.js:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./translations/en.json";
import ar from "./translations/ar.json";

i18n.use(initReactI18next).init({
  resources: { en: { translation: en }, ar: { translation: ar } },
  lng: "en", // Default language
  fallbackLng: "en",
  interpolation: { escapeValue: false }, // React handles escaping
});

export default i18n;

---

Integration von i18n in Komponenten

Beispielkomponente (FeatureA):

import React from "react";
import { useTranslation } from "react-i18next";
import keys from "../../i18n/keys";

const FeatureA = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h2 id="Feature-A">Feature A</h2>
      <button>{t(keys.components.featureA.buttonText)}</button>
      <label>{t(keys.components.featureA.label)}</label>
    </div>
  );
};

export default FeatureA;

---

Hinzufügen eines Sprachumschalters

Ein Sprachumschalter ermöglicht Benutzern das Umschalten zwischen Sprachen.

LanguageSwitcher.jsx:

import React from "react";
import { useTranslation } from "react-i18next";

const LanguageSwitcher = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    <div>
      <button onclick="{()"> changeLanguage("en")}>English</button>
      <button onclick="{()"> changeLanguage("ar")}>العربية</button>
    </div>
  );
};

export default LanguageSwitcher;

---

Endgültige Ordnerstruktur

src/
├── components/
│   ├── featureA/
│   │   ├── index.jsx
│   │   └── featureAStyles.css
│   └── shared/
│       └── LanguageSwitcher.jsx
├── i18n/
│   ├── translations/
│   │   ├── en.json
│   │   ├── ar.json
│   │   └── base.json
│   ├── keys.js
│   └── index.js
├── App.jsx
├── index.js

---

Darüber hinausgehen

1. Nutzung von KI für Übersetzungen:Verwenden Sie LLMs für schnelle Übersetzungen. Geben Sie beispielsweise Folgendes ein:
   
   „Übersetzen Sie den folgenden JSON-Code ins Chinesische: {contents of en.json}.“

2. Backend-gesteuerte Übersetzungen: Zentralisieren Sie Übersetzungen im Backend, um dynamische Updates ohne Codebereitstellungen zu ermöglichen. Zu den Optionen gehören GitOps oder ein dedizierter Backend-Dienst.

---

Demo

Sandbox: https://codesandbox.io/p/sandbox/785hpz

---

Abschluss

Internationalisierung ist ein entscheidender Schritt für die globale Skalierung von Anwendungen. Wenn Sie diesem Leitfaden folgen, erhalten Sie eine skalierbare, modulare und einsteigerfreundliche Architektur, die eine nahtlose Lokalisierung für Einzelprojekte oder große Teams unterstützt.

Viel Spaß beim Codieren!

— Ahmed R. Aldhafeeri

Das obige ist der detaillierte Inhalt vonArchitektur der Internationalisierung in React Apps: Umfassender Leitfaden zur skalierbaren Lokalisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!