Explorer les solutions i18n pour traduire votre application React Native

    Dans un marché global de plus en plus concurrentiel, proposer votre application React Native en plusieurs langues peut améliorer considérablement l'accessibilité et la satisfaction des utilisateurs. L'internationalisation (i18n) est essentielle pour gérer efficacement les traductions, vous permettant d'afficher du texte spécifique à une langue, des formats de date et d'heure, des devises, et plus encore sans compliquer votre code. Dans cet article, nous explorerons diverses approches i18n, allant des bibliothèques dédiées aux solutions plus générales, et vous aiderons à trouver celle qui convient le mieux à votre projet React Native.


    illustration i18n

    Qu'est-ce que l'internationalisation (i18n)?

    L'internationalisation, ou i18n, implique la structuration d'une application afin qu'elle puisse facilement s'adapter à différentes langues, formats régionaux et normes culturelles. Dans React Native, l'i18n inclut la gestion des chaînes de caractères pour les boutons et les étiquettes, ainsi que le formatage des dates, des heures, des devises, et plus encore en fonction de la locale de l'utilisateur. Des applications React Native correctement préparées vous permettent d'intégrer facilement des langues supplémentaires et des comportements spécifiques à une locale ultérieurement, sans nécessiter de refontes massives.

    Pour une plongée plus approfondie dans les concepts d'internationalisation, consultez notre article :
    Qu'est-ce que l'internationalisation (i18n)? Définition et défis.


    Le défi de la traduction pour les applications React Native

    Travailler avec des traductions dans React Native présente ses propres considérations uniques :

    • Architecture basée sur des composants
      Tout comme dans React pour le web, le design modulaire de React Native peut disperser le texte à travers de nombreux composants. Il est crucial de centraliser ces traductions de manière robuste.

    • Données hors ligne et à distance
      Bien que certaines chaînes puissent être intégrées dans l'application, d'autres contenus (par exemple, les flux d'actualités, les données sur les produits) peuvent être récupérés à distance. Gérer les traductions pour des données qui arrivent de manière asynchrone peut être plus complexe sur mobile.

    • Comportements spécifiques à la plateforme
      iOS et Android ont chacun leurs propres paramètres de locale et particularités de formatage. Assurer un rendu cohérent des dates, des devises et des nombres sur les deux plateformes nécessite des tests approfondis.

    • Gestion de l'état et de la navigation
      Maintenir la langue sélectionnée par l'utilisateur à travers les écrans, les liens profonds ou les navigations basées sur des onglets signifie intégrer l'i18n dans votre solution de gestion d'état telle que Redux, l'API Context, ou autre.

    • Mises à jour de l'application et au-dessus de l'air (OTA)
      Si vous utilisez CodePush ou un autre mécanisme de mise à jour OTA, vous devez planifier comment les mises à jour de traduction ou les nouvelles langues seront livrées sans nécessiter un lancement complet sur l'App Store.


    Solutions i18n leaders pour React Native

    Voici plusieurs approches populaires pour gérer le contenu multilingue dans React Native. Chacune vise à simplifier votre flux de travail de traduction de différentes manières.

    1. Intlayer

    Site Web : https://intlayer.org/

    Aperçu
    Intlayer est une bibliothèque d'internationalisation innovante et open-source conçue pour rationaliser le support multilingue dans les applications JavaScript modernes, y compris React Native. Elle propose une approche déclarative de la traduction, vous permettant de définir des dictionnaires directement aux côtés des composants.

    Fonctionnalités clés

    • Déclaration de traduction
      Stockez les traductions dans un seul fichier ou au niveau du composant, facilitant ainsi la localisation et la modification du texte.

    • TypeScript et autocomplétion
      Génère automatiquement des définitions de type pour les clés de traduction, offrant à la fois une autocomplétion conviviale pour les développeurs et un contrôle rigoureux des erreurs.

    • Léger et flexible
      Fonctionne harmonieusement dans les environnements React Native, sans surcharge inutile. Facile à intégrer et à garder efficace sur les appareils mobiles.

    • Considérations spécifiques à la plateforme
      Vous pouvez adapter ou séparer les chaînes spécifiques à la plateforme pour iOS et Android, si nécessaire.

    • Chargement asynchrone
      Chargez dynamiquement les dictionnaires de traduction, ce qui peut être utile pour les grandes applications ou le déploiement progressif de langues.

    Considérations

    • Communauté et écosystème
      Encore une solution relativement nouvelle, vous trouverez peut-être moins d'exemples communautaires ou de plugins prêts à l'emploi par rapport aux bibliothèques bien établies.

    2. React-i18next

    Site Web : https://react.i18next.com/

    Aperçu
    React-i18next se base sur le célèbre framework i18next, offrant une architecture flexible, basée sur des plugins, et un ensemble de fonctionnalités robuste. Il est largement utilisé dans les applications React Native grâce à un processus de configuration bien documenté.

    Fonctionnalités clés

    • Intégration fluide de React Native
      Fournit des hooks (useTranslation), des composants de plus haut niveau (HOCs), et plus encore pour intégrer i18n de manière transparente dans vos composants.

    • Chargement asynchrone
      Chargez les traductions à la demande, ce qui est bénéfique pour les grandes applications ou lorsque vous ajoutez de nouveaux packs de langues au fil du temps.

    • Capacités de traduction riches
      Gérez des traductions imbriquées, l'interpolation, la pluralisation, et le remplacement de variables automatiquement.

    • TypeScript et autocomplétion
      React-i18next prend en charge les clés de traduction typées, bien que la configuration initiale puisse être plus manuelle par rapport aux solutions qui génèrent automatiquement les types.

    • Indépendant de la plateforme
      i18next n'est pas spécifiquement lié au web ou au mobile, vous pouvez donc utiliser la même bibliothèque à travers différents types de projets (par exemple, si vous partagez du code entre web et natif).

    Considérations

    • Complexité de configuration
      Mettre en place i18n avec des fonctionnalités avancées (formes plurielles, locales de secours, etc.) peut nécessiter une configuration minutieuse.

    • Performance
      Bien que React-i18next performe généralement bien, vous devrez prêter attention à la manière dont vous organisez et chargez les ressources de traduction pour éviter des surcharges sur les appareils mobiles.


    3. React Intl (de FormatJS)

    Site Web : https://formatjs.io/docs/react-intl/

    Aperçu
    React Intl, faisant partie de l'écosystème FormatJS, est conçu pour standardiser le formatage de messages pour diverses locales. Il met l'accent sur un flux de travail d'extraction de messages et est particulièrement fort dans le formatage correct des dates, des nombres et des heures pour un large éventail de locales.

    Fonctionnalités clés

    • Composants axés sur le format
      <FormattedMessage>, <FormattedDate>, <FormattedTime>, et d'autres rationalisent les tâches de formatage dans iOS et Android.

    • Léger et extensible
      Vous pouvez importer uniquement les parties de FormatJS dont vous avez besoin, gardant votre bundle global léger, ce qui est crucial pour les appareils mobiles.

    • Polyfills pour les locales non prises en charge
      Assure un formatage de date/nombre cohérent sur les anciennes versions d'Android ou d'iOS.

    • Compatibilité TypeScript
      S'intègre avec TypeScript, bien que vous puissiez avoir besoin d'outils supplémentaires pour obtenir des ID de message complètement typés.

    Considérations

    • Extraction de messages
      Nécessite un flux de travail d'extraction, ce qui peut ajouter de la complexité à votre processus de build. Cependant, c'est puissant pour les grandes équipes gérant de nombreuses traductions.

    • Taille de l'application et déploiements
      Si vous dépendez de plusieurs polyfills ou de grands fichiers de traduction, surveillez la taille globale de votre application, ce qui est particulièrement important dans des contextes mobiles.

    • Exemples communautaires
      Bien qu'il soit largement utilisé, les exemples d'utilisation spécifiques à React Native peuvent être moins nombreux que pour le web React. Vous devrez probablement adapter les documents et les modèles existants à un environnement natif.


    4. LinguiJS

    Site Web : https://lingui.js.org/

    Aperçu
    LinguiJS propose une approche moderne et conviviale pour l'i18n pour JavaScript et React (y compris React Native). Avec son extraction de messages basée sur CLI et sa compilation, elle se concentre sur la minimisation du surcoût à l'exécution.

    Fonctionnalités clés

    • Extraction automatique de messages
      Analyse votre code à la recherche de chaînes de traduction, réduisant le risque de messages manqués ou inutilisés.

    • Surcoût minimal à l'exécution
      Les traductions compilées gardent votre application performante et bien optimisée pour les appareils mobiles.

    • TypeScript et autocomplétion
      Configuré correctement, vous obtiendrez des ID typés pour les traductions, rendant les flux de travail des développeurs plus sûrs et intuitifs.

    • Intégration avec React Native
      Facile à installer et à lier dans un environnement React Native ; vous pouvez également gérer des traductions spécifiques à la plateforme si nécessaire.

    Considérations

    • Configuration initiale de la CLI
      Certaines étapes supplémentaires sont nécessaires pour configurer le pipeline d'extraction et de compilation pour les projets React Native.

    • Communauté et plugins
      L'écosystème de la bibliothèque est plus petit que celui d'i18next, mais il se développe rapidement et les outils CLI de base sont robustes.

    • Organisation du code
      Décider comment diviser vos catalogues de messages (par écran, fonctionnalité ou langue) est vital pour maintenir la clarté dans les grandes applications.


    Dernières réflexions

    Lorsque vous choisissez une solution i18n pour votre application React Native :

    1. Évaluez vos exigences

      • Combien de langues sont nécessaires maintenant et dans le futur ?
      • Avez-vous besoin d'un chargement à la demande pour les grandes applications ?
    2. Pensez aux différences de plateformes

      • Assurez-vous que toute bibliothèque prend en charge les variations de locale iOS et Android, en particulier les particularités de date/nombre/devises.
      • Pensez à l'utilisation hors ligne - certaines traductions pourraient devoir être intégrées dans l'application, tandis que d'autres peuvent être récupérées à distance.
    3. Choisissez une structure pour la scalabilité

      • Si vous prévoyez une application grande ou à long terme, un solide flux de travail d'extraction ou des clés typées peuvent aider à garder les traductions bien organisées.
    4. Performance et taille du bundle

      • Les contraintes de données mobiles signifient que vous devez garder un œil sur la taille de vos fichiers de traduction et tout polyfills.
    5. Expérience développeur (DX)

      • Recherchez des bibliothèques qui s'alignent sur les compétences de votre équipe - certaines solutions sont plus verbeuses mais simples, tandis que d'autres offrent plus d'automatisation au prix de la complexité de configuration.

    Chaque solution - Intlayer, React-i18next, React Intl, et LinguiJS - a prouvé son efficacité dans des environnements React Native, bien qu'avec des priorités légèrement différentes. Évaluer la feuille de route de votre projet, les préférences des développeurs et les besoins de localisation vous guidera vers le choix idéal pour offrir une application React Native véritablement mondiale.

    Si vous avez une idée d’amélioration pour améliorer cette blog, n’hésitez pas à contribuer en submitant une pull request sur GitHub.

    Lien GitHub du blog