Meilleures pratiques pour Angular i18n

Dans cet article de blog, nous couvrirons les meilleures pratiques que les développeurs vertueux d’Angular utilisent lors de la mise en œuvre d’interfaces utilisateur internationalisées.

Si vous avez déjà créé un site Web ou une application en pensant à différents marchés, vous savez à quel point il peut être difficile de créer une expérience utilisateur qui s’adresse aux utilisateurs du monde entier. Différentes cultures répondent à divers éléments de conception d’interface utilisateur de différentes manières. Lors du développement d’un produit avec un public mondial à l’esprit, il est essentiel de prendre en compte ces détails importants dès le départ.

Une bonne internationalisation (i18n) dès le début peut vous éviter des pièges potentiels et soutenir la croissance future de votre produit. Dans cet article de blog, nous explorerons certaines des techniques les plus efficaces pour intégrer ces principes dans vos applications angulaires. Commençons!

Définissez votre stratégie i18n

Avant de commencer toute implémentation, vous devez d’abord réfléchir à votre stratégie i18n. Quelles langues devez-vous prendre en charge et pourquoi ?

Pourquoi est-ce important? Cela vous aidera à décider quels composants de l’interface utilisateur vous devez traduire. Cette stratégie vous informera également sur la façon dont vous abordez le processus de traduction proprement dit. Vous devrez décider si vous souhaitez traduire les chaînes de votre application avec l’aide d’une agence de traduction ou si vous souhaitez effectuer les traductions en interne. Dans le premier cas, vous devrez décider du nombre de traducteurs à embaucher et des langues qu’ils doivent maîtriser.

Une fois que vous avez décidé quelles langues vous devez prendre en charge, vous devez décider comment structurer la configuration i18n de votre application. La structure doit être conçue de manière à permettre aux traducteurs de trouver et de modifier facilement les chaînes de l’application.

Utiliser des tuyaux angulaires

Lorsque vous travaillez avec Angular, vous rencontrerez de nombreux tuyaux différents. Ceux-ci sont généralement utilisés pour formater les données afin qu’elles ressemblent à ce que vous voulez. Il est important de le savoir car cela peut vous aider à résoudre les problèmes au fur et à mesure qu’ils surviennent. Peut-être avez-vous besoin de formater une date. Au lieu de tâtonner avec le code, vous pouvez simplement ajouter un tuyau à votre modèle ! Les tuyaux dans Angular peuvent être utilisés pour transformer les données de différentes manières.

Par exemple, le DatePipe peut être utilisé pour formater les dates, le CurrencyPipe peut être utilisé pour formater les valeurs monétaires et le UpperCasePipe peut être utilisé pour convertir des chaînes en majuscules.

Les tuyaux peuvent être utilisés en conjonction avec le tuyau (|) dans les expressions de modèle. Voici un exemple d’opérateur de canal, l’opérateur du modèle :

<p>The hero's birthday is {{ birthday | date }}</p>

Cela utilise le même canal que dans le modèle dans le cadre d’un modèle en ligne dans un composant qui aide à définir la valeur d’anniversaire :

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-birthday',
  template: "<p>The hero's birthday is {{ birthday | date }}</p>"
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); 
}

La valeur de l’anniversaire du composant passe par l’opérateur pipe, | , à la fonction date. Ceci est utilisé dans le format du modèle pour la propriété d’anniversaire, ainsi que la sortie de la fonction de date dans le modèle. La fonction de date est ensuite utilisée dans la sortie du modèle.

Traduisez les éléments de marque de votre application

Des éléments tels qu’un logo d’entreprise, un jeu de couleurs et le nom de l’application sont des éléments importants de l’expérience utilisateur d’une application. Ils représentent l’entreprise et aident les utilisateurs à identifier l’application. Si ces éléments ne sont pas traduits, les utilisateurs qui ne maîtrisent pas la langue de l’application auront des difficultés à identifier et à utiliser l’application.

Vous devez traduire autant d’éléments de marque que possible. Cela inclut le nom de l’application, la palette de couleurs, les graphismes du logo et tout autre élément visuel important. Dans la plupart des cas, vous devez stocker les éléments de marque traduits dans un seul fichier. Cela vous permettra de charger les éléments de marque traduits dans votre application avec une seule ligne de code.

Utiliser des caractères adaptés à la plate-forme et spécifiques à la langue

Quelques caractères sont communs à plusieurs langues, mais beaucoup d’autres sont spécifiques à une langue donnée. Lorsque vous décidez d’utiliser un caractère dans votre application, vous devez décider s’il doit être spécifique à la langue ou à la plate-forme. Vous pouvez utiliser des caractères spécifiques à une langue là où il n’y a aucune implication culturelle ou linguistique.

Par exemple, vous pouvez utiliser des caractères spécifiques à la langue dans une étiquette si l’étiquette contient des dates ou des heures. Vous pouvez également utiliser des caractères spécifiques à la langue lorsque vous devez afficher un mot ou une expression ayant une signification spécifique. Vous devez utiliser des caractères spécifiques à la plate-forme lorsqu’il n’y a aucune implication linguistique ou culturelle. Un bon exemple est le symbole séparateur entre les nombres dans une date. Vous devez également utiliser des caractères spécifiques à la plate-forme lorsqu’il n’y a pas de mot ou de phrase qui signifie ce que vous devez transmettre. Un bon exemple est le signe de pourcentage.

Utiliser l’énumération

Une énumération est un outil utile pour i18n. Il peut stocker les noms lisibles par l’homme des données que vous utilisez dans votre application. Les données stockées dans une énumération peuvent être traduites en plusieurs langues et affichées aux utilisateurs dans leur langue. Les énumérations sont particulièrement utiles pour stocker des dates, des devises et d’autres unités de mesure.

Vous pouvez créer une énumération avec un nom pour chaque unité de données, puis définir le code de chaque unité dans un fichier de classe distinct. Lorsqu’une unité de données est référencée dans votre code d’application, vous pouvez utiliser le nom de l’énumération au lieu du code. Un exemple simple d’énumération dans Angular :

Définissez les clés enum dans un fichier JSON distinct :

export enum Test {
 test1 = 'dropdown.doSomething.test1',
 test2 = 'dropdown.doSomething.test2',
}

Ensuite, traduisez facilement la valeur de enum avec :

const enTranslations = {
  dropdown: {
    doSomething: {
     test1: "1 - do something"
    }
  }
};

const getTranslatedText = (tranlations, keys: string[]) => keys.reduce((acc, curr) => acc[curr], translations);

const key1 = Test.test1
const translatedEnText = getTranslatedText(enTranslations, key1.split('.'));

L’application peut alors afficher l’unité de données dans la langue préférée de l’utilisateur. Les énumérations sont utiles car elles vous permettent de remplacer un nombre dans votre code par un nom lisible par l’homme. Cela facilite la maintenance de votre application.

Rechercher dans d’autres bibliothèques angulaires i18n

La plupart des bibliothèques i18n ont une base de code open source, sont bien entretenues et ont une documentation bien écrite. En tant que tels, ils offrent une meilleure expérience utilisateur et peuvent vous aider à économiser du temps et de l’argent. Si vous décidez d’utiliser une bibliothèque Angular i18n, vous n’avez pas à mettre en œuvre toutes les meilleures pratiques à partir de zéro. Vous pouvez profiter du temps et des efforts fournis par les développeurs de la bibliothèque et utiliser leur code comme point de départ pour votre application.

Il existe quelques bibliothèques i18n pour Angular. Beaucoup d’entre eux sont encore en phase bêta et sont activement développés. Comme il n’y a pas de normes définies pour les implémentations i18n dans Angular, vous devez sélectionner une bibliothèque i18n en fonction de ses fonctionnalités et de sa communauté. Voici quelques-uns des plus populaires :

Si vous recherchez une bibliothèque de composants d’interface utilisateur professionnelle avec des options d’internationalisation intégrées, ne cherchez pas plus loin que Progress Interface utilisateur de Kendo pour Angular. Avec la Localisation paquet, le Internationalisation le paquet fournit robuste fonctionnalités de globalisation de l’interface utilisateur de Kendo pour Angular.

Derniers mots

Les meilleures pratiques répertoriées dans l’article vous aideront à créer une stratégie i18n robuste qui servira bien votre application. Certaines des meilleures pratiques sont spécifiques aux applications angulaires, mais d’autres peuvent être appliquées aux applications Web en général. Toutes ces meilleures pratiques sont faciles à mettre en œuvre et rendront le processus de mise en œuvre i18n beaucoup plus fluide. Vous pouvez également utiliser les bibliothèques Angular i18n et les suites de composants comme Kendo UI pour Angular.