web-dev-qa-db-fra.com

Meilleures pratiques pour la localisation et la mondialisation des chaînes et des étiquettes

Je suis membre d'une équipe de plus de 20 développeurs. Chaque développeur travaille sur un module séparé (environ 10 modules). Dans chaque module, nous pourrions avoir au moins 50 formulaires CRUD, ce qui signifie que nous en avons actuellement près de 500 boutons d’ajout, boutons d’enregistrement, boutons d’édition, etc.

Cependant, comme nous voulons globaliser notre application, nous devons pouvoir traduire les textes dans notre application. Par exemple, partout, le mot add devrait devenir ajouter pour les utilisateurs français.

Ce que nous avons fait jusqu’à présent, c’est que pour chaque vue de l’interface utilisateur ou du calque de présentation, nous avons un dictionnaire de paires de traductions clé/valeur. Ensuite, lors du rendu de la vue, nous traduisons les textes et les chaînes requis à l'aide de ce dictionnaire. Cependant, cette approche a abouti à quelque chose comme près de 500 ajouter dans 500 dictionnaires. Cela signifie que nous avons violé DRY principal.

D'autre part, si nous centralisons les chaînes communes, comme mettre add à un endroit donné, et demandons aux développeurs de l'utiliser partout, nous rencontrons le problème de ne pas savoir si une chaîne est déjà définie dans la liste centralisée. dictionnaire ou pas.

Une autre option pourrait être de ne pas avoir de dictionnaire de traduction et d'utiliser des services de traduction en ligne tels que Google Translate, Bing Translator, etc.

Un autre problème que nous avons rencontré est que certains développeurs, sous la contrainte de livrer le projet à temps, ne se souviennent pas de clés de traduction. Par exemple, pour le texte du bouton Ajouter, un développeur a utilisé add alors qu'un autre développeur a utilisé nouvea, etc.

Quelle est la meilleure pratique ou la méthode la plus connue pour la globalisation et la localisation des ressources de chaîne d'une application?

javascriptlocalizationtranslationclient-sideglobalization
106
user1968030

Autant que je sache, il existe une bonne bibliothèque appelée localeplanet pour la localisation et l'internationalisation en JavaScript. De plus, je pense que c'est natif et qu'il ne dépend pas d'autres bibliothèques (par exemple, jQuery)

Voici le site de la bibliothèque: http://www.localeplanet.com/

Regardez également cet article de Mozilla, vous pouvez trouver de très bonnes méthodes et algorithmes pour la traduction côté client: http://blog.mozilla.org/webdev/2011/10/06/i18njs-internationalize-your- javascript-with-a-little-help-from-json-and-the-server /

La partie commune de tous ces articles/bibliothèques est qu'ils utilisent une classe i18n et une méthode get (définissant également un nom de fonction plus petit comme _) pour récupérer/convertir le fichier key à la value. Dans mon explication, le key signifie la chaîne que vous voulez traduire et le value signifie la chaîne traduite.
Ensuite, vous avez simplement besoin d’un document JSON pour stocker les fichiers key et value.

Par exemple:

var _ = document.webL10n.get;
alert(_('test'));

Et voici le JSON:

{ test: "blah blah" }

Je crois que l’utilisation des solutions de bibliothèques populaires actuelles est une bonne approche.

48
Afshin Mehrabani

Lorsque vous êtes confronté à un problème à résoudre (et franchement, qui n’est plus le cas de nos jours?), La stratégie de base généralement adoptée par nous informaticiens s’appelle "diviser pour régner". Cela ressemble à ceci:

  • Conceptualisez le problème spécifique comme un ensemble de sous-problèmes plus petits.
  • Résoudre chaque petit problème.
  • Combinez les résultats dans une solution du problème spécifique.

Mais "diviser pour régner" n'est pas la seule stratégie possible. Nous pouvons également adopter une approche plus généraliste:

  • Conceptualisez le problème spécifique comme un cas particulier d’un problème plus général.
  • D'une certaine manière résoudre le problème général.
  • Adaptez la solution du problème général au problème spécifique.

- Eric Lippert

Je pense que de nombreuses solutions existent déjà pour résoudre ce problème dans des langages côté serveur tels que ASP.Net/C#.

J'ai exposé certains des principaux aspects du problème

  • Problème : Nous devons charger des données uniquement pour la langue souhaitée

    Solution : Pour cela, nous sauvegardons les données dans un fichier séparé pour chaque langue.

ex. res.de.js, res.fr.js, res.en.js, res.js (pour la langue par défaut)

  • Problème: les fichiers de ressources de chaque page doivent être séparés afin que nous n'obtenions que les données dont nous avons besoin.

    Solution : Nous pouvons utiliser des outils existants tels que https://github.com/rgrove/lazyload

  • Problème: nous avons besoin d'une structure de paire clé/valeur pour sauvegarder nos données

    Solution : Je suggère un objet javascript au lieu de string/string air. Nous pouvons bénéficier de l'intellisense d'un IDE

  • Problème: les membres généraux doivent être stockés dans un fichier public et toutes les pages doivent y accéder

    Solution : Pour ce faire, je crée un dossier à la racine de l'application Web appelé Global_Resources et un dossier pour stocker le fichier global de chaque sous-dossier nommé ' Local_Resources '

  • Problème: chaque membre de sous-systèmes/sous-dossiers/modules doit remplacer les membres de Global_Resources sur leur étendue.

    Solution : J'ai considéré un fichier pour chaque

Structure d'application

root/
    Global_Resources/
        default.js
        default.fr.js
    UserManagementSystem/
        Local_Resources/
            default.js
            default.fr.js
            createUser.js
        Login.htm
        CreateUser.htm

Le code correspondant aux fichiers:

Global_Resources/default.js 

var res = {
    Create : "Create",
    Update : "Save Changes",
    Delete : "Delete"
};

Global_Resources/default.fr.js 

var res = {
    Create : "créer",
    Update : "Enregistrer les modifications",
    Delete : "effacer"
};

Le fichier de ressources de la langue souhaitée doit être chargé sur la page sélectionnée dans Global_Resource. Il doit s'agir du premier fichier chargé sur toutes les pages.

UserManagementSystem/Local_Resources/default.js 

res.Name = "Name";
res.UserName = "UserName";
res.Password = "Password";

UserManagementSystem/Local_Resources/default.fr.js 

res.Name = "nom";
res.UserName = "Nom d'utilisateur";
res.Password = "Mot de passe";

UserManagementSystem/Local_Resources/createUser.js 

// Override res.Create on Global_Resources/default.js
res.Create = "Create User";

UserManagementSystem/Local_Resources/createUser.fr.js 

// Override Global_Resources/default.fr.js
res.Create = "Créer un utilisateur";

fichier manager.js (ce fichier doit être chargé en dernier)

res.lang = "fr";

var globalResourcePath = "Global_Resources";
var resourceFiles = [];

var currentFile = globalResourcePath + "\\default" + res.lang + ".js" ;

if(!IsFileExist(currentFile))
    currentFile = globalResourcePath + "\\default.js" ;
if(!IsFileExist(currentFile)) throw new Exception("File Not Found");

resourceFiles.Push(currentFile);

// Push parent folder on folder into folder
foreach(var folder in parent folder of current page)
{
    currentFile = folder + "\\Local_Resource\\default." + res.lang + ".js";

    if(!IsExist(currentFile))
        currentFile = folder + "\\Local_Resource\\default.js";
    if(!IsExist(currentFile)) throw new Exception("File Not Found");

    resourceFiles.Push(currentFile);
}

for(int i = 0; i < resourceFiles.length; i++) { Load.js(resourceFiles[i]); }

// Get current page name
var pageNameWithoutExtension = "SomePage";

currentFile = currentPageFolderPath + pageNameWithoutExtension + res.lang + ".js" ;

if(!IsExist(currentFile))
    currentFile = currentPageFolderPath + pageNameWithoutExtension + ".js" ;
if(!IsExist(currentFile)) throw new Exception("File Not Found");

J'espère que ça aide :)

43
Omid Shariati

jQuery.i18n est un plugin léger pour jQuery permettant d'activer l'internationalisation de vos pages Web. Il vous permet de regrouper des chaînes de ressources personnalisées dans des fichiers ‘.properties’, comme dans Java Resource Bundles. Il charge et analyse les ensembles de ressources (.properties) en fonction de la langue fournie ou de la langue indiquée par le navigateur.

pour en savoir plus à ce sujet, consultez le Comment internationaliser vos pages avec JQuery?

13
BalaKrishnan웃