Mises à jour produit//7 min de lecture

Plongée dans l'expérience développeur : comment l'UX de la plateforme Better i18n rend la localisation rapide et intuitive

Eray Gündoğmuş
Partager

Les plateformes de localisation ont la réputation d'avoir des interfaces maladroites, des éditeurs lents et des workflows qui semblent conçus par un comité. Nous avons construit Better i18n avec une philosophie différente : chaque interaction doit être intentionnelle, rapide et respectueuse du temps du développeur.

Cet article présente les fonctionnalités UX de la plateforme qui distinguent Better i18n — non pas comme une liste de fonctionnalités, mais comme une visite pratique de ce à quoi ressemble réellement votre workflow quotidien.

La palette de commandes : votre hub de navigation orienté clavier

Appuyez sur Cmd+K (ou Ctrl+K sur Windows/Linux) depuis n'importe où sur la plateforme. Un panneau de recherche apparaît instantanément, indexant tout — projets, espaces de noms, clés, paramètres et actions.

Tapez quelques caractères et les résultats se réduisent en temps réel. Sélectionnez un résultat et vous y êtes. Pas de clics sur les fils d'Ariane, pas de navigation dans la barre latérale, pas de rechargements de page. Pour les développeurs qui vivent dans VS Code ou Raycast, ce modèle d'interaction semble immédiatement familier.

La palette de commandes n'est pas seulement de la navigation. Elle expose aussi des actions — créer une nouvelle clé, changer de langue, déclencher une publication, ouvrir les paramètres du projet. Considérez-la comme un point d'entrée universel pour tout ce que vous souhaitez faire sur la plateforme.

Pourquoi cela est important pour les workflows i18n : Les projets de localisation ont souvent des dizaines d'espaces de noms et des milliers de clés. La navigation à la souris ne passe pas à l'échelle. La palette de commandes vous maintient dans un état de flux même lors de la gestion de projets complexes à plusieurs espaces de noms.

Intégration : de zéro à la première traduction en quelques minutes

Les premières impressions comptent. Lorsqu'un nouveau membre rejoint votre projet — ou lorsque vous configurez Better i18n pour la première fois — l'assistant d'intégration vous guide à travers chaque étape :

  1. Connectez votre dépôt — Liez votre dépôt GitHub, GitLab ou Bitbucket
  2. Configurez votre projet — Définissez la langue source, ajoutez les langues cibles, définissez les espaces de noms
  3. Installez le SDK — Instructions spécifiques au framework pour Next.js, React + TanStack Router, Expo ou Flutter
  4. Envoyez vos premières traductions — Vérifiez l'aller-retour de la plateforme au code

Chaque étape valide avant de vous laisser continuer. Si votre configuration SDK présente un problème, l'assistant le détecte immédiatement plutôt que de vous laisser le découvrir en production dix minutes plus tard.

L'assistant détecte également votre framework automatiquement. Si vous utilisez Next.js, vous obtenez des instructions de configuration spécifiques à Next.js, une configuration middleware et des exemples de routage. Les utilisateurs d'Expo voient des conseils spécifiques à Expo. Pas de pages de documentation génériques — tout est personnalisé.

L'éditeur de traduction : là où performance rime avec simplicité

Votre équipe passe la majeure partie de son temps dans l'éditeur de traduction, c'est donc là que nous avons investi le plus d'effort d'ingénierie.

Défilement virtuel pour les grands ensembles de clés

La plupart des éditeurs de traduction rendent chaque ligne dans le DOM. Cela fonctionne bien pour 200 clés. À 2 000 clés, ça ralentit. À 5 000+ clés, ça devient inutilisable.

Better i18n utilise un rendu virtualisé — seules les lignes visibles dans votre viewport (plus un petit tampon) existent dans le DOM à tout moment. Le résultat : faire défiler 10 000 clés ressemble exactement à faire défiler 50. L'utilisation de la mémoire reste stable. Les fréquences d'images restent élevées. Votre navigateur ne devient pas un radiateur.

Ce n'est pas juste un bonus agréable. Les vrais projets à grande échelle ont régulièrement entre 5 000 et 20 000 clés. Si votre éditeur ne peut pas gérer cela avec élégance, il devient un goulot d'étranglement plutôt qu'un outil.

Édition en ligne avec synchronisation automatique

Cliquez sur n'importe quelle cellule de traduction et commencez à taper. Pas de mode édition, pas de modal, pas de bouton « enregistrer ». Juste cliquer, taper et passer à autre chose.

En arrière-plan, un store propulsé par Zustand suit vos modifications et les synchronise avec le serveur avec un debounce de 3,5 secondes. Arrêtez de taper pendant 3,5 secondes et vos modifications sont automatiquement persistées. Un indicateur de synchronisation discret dans la barre d'outils affiche l'état actuel — en cours d'édition, synchronisation ou enregistré.

Ce modèle de synchronisation automatique élimine toute une catégorie d'erreurs utilisateur. Plus de travail perdu en oubliant d'enregistrer. Plus de données obsolètes en laissant un onglet ouvert toute la nuit. L'éditeur reflète toujours le dernier état.

Regroupement et filtrage par espace de noms

Les grands projets organisent les traductions en espaces de noms — common, auth, dashboard, emails, etc. L'éditeur les affiche sous forme de groupes réductibles. Développez l'espace de noms sur lequel vous travaillez, réduisez tout le reste.

Combinez cela avec un filtrage par langue et statut de traduction (traduit, non traduit, nécessite une révision) et vous pouvez vous concentrer exactement sur le travail qui compte. Besoin de voir toutes les clés allemandes non traduites dans l'espace de noms auth ? Deux clics de filtre et vous y êtes.

La recherche fonctionne sur les noms de clés et les valeurs de traduction. Vous cherchez cette clé où quelqu'un a écrit « Click here » ? Recherchez la valeur, trouvez la clé, corrigez-la.

Journal d'activité : piste d'audit complète pour chaque action

Le journal d'activité suit tout ce qui se passe dans votre projet — création de clés, mises à jour de traductions, publications, modifications de paramètres, ajouts de membres, et plus encore. Chaque entrée enregistre qui a effectué l'action, quand elle s'est produite et quelle ressource a été affectée.

Ce n'est pas seulement pour la conformité. Le journal d'activité est un outil de débogage pratique. Quand une traduction semble incorrecte en production, vous pouvez retracer le changement exact qui l'a causé — qui a mis à jour la clé, quand, et quelle était la valeur précédente.

Pour les chefs d'équipe gérant des traducteurs dans plusieurs langues, le journal d'activité offre une visibilité sur la vélocité de traduction et l'activité de l'équipe sans microgestion.

Tiroir IA global : assistance contextuelle partout

Ouvrez le panneau de chat IA depuis n'importe quelle page. Il maintient le contexte de votre projet actuel, de la page que vous consultez et des actions récentes. Demandez-lui de :

  • Générer des traductions pour de nouvelles clés dans toutes les langues cibles
  • Réviser les traductions existantes pour la cohérence et l'exactitude
  • Suggérer des améliorations au texte source pour une meilleure traduisibilité
  • Expliquer les erreurs quand quelque chose se passe mal avec la synchronisation ou la configuration

Le tiroir IA est alimenté par des fournisseurs LLM configurables. Via l'interface de gestion des fournisseurs LLM, vous pouvez connecter OpenAI, Anthropic, Google ou d'autres fournisseurs pris en charge. Définissez les préférences de modèle, établissez des priorités de repli et surveillez l'utilisation des tokens — tout depuis un seul panneau de paramètres.

Cette flexibilité signifie que vous n'êtes pas enfermé dans un seul fournisseur d'IA. Utilisez GPT-4o pour les traductions en masse et Claude pour la révision nuancée, ou configurez la combinaison qui convient à votre équipe et à votre budget.

Activez le modal des outils développeur en mode développement pour voir :

  • Délais des appels API — Combien de temps prend chaque requête, y compris les hits de cache CDN
  • Statut de synchronisation — État actuel du store Zustand et modifications en attente
  • Diagnostics du cache — Taux de hit du cache TTL et événements d'invalidation
  • Aperçu de la configuration — Paramètres du projet actif, version du SDK et statut de connexion

Ceci est conçu pour les ingénieurs qui souhaitent comprendre le comportement de la plateforme, optimiser les performances ou déboguer les problèmes d'intégration. Ce n'est pas une fonctionnalité que vous utilisez tous les jours, mais quand vous en avez besoin, l'avoir intégrée dans la plateforme vous évite des heures de suppositions.

Intégration PostHog Analytics

Better i18n intègre le suivi d'événements PostHog dans toute la plateforme. Cela vous donne des insights quantitatifs sur la façon dont votre équipe utilise réellement l'outil — quelles fonctionnalités apportent le plus de valeur, où les utilisateurs rencontrent des frictions et comment la vélocité de traduction évolue dans le temps.

Toutes les données analytiques transitent par votre propre instance PostHog, vous conservez donc un contrôle total sur les politiques de confidentialité et de rétention des données.

La philosophie derrière ces choix

Chaque fonctionnalité décrite ici suit un seul principe de conception : réduire les frictions entre l'intention et l'action. La palette de commandes élimine la surcharge de navigation. L'édition en ligne élimine la surcharge des modaux. La synchronisation automatique élimine la surcharge de sauvegarde. Le tiroir IA élimine la surcharge de changement de contexte.

La localisation est déjà suffisamment complexe — plusieurs langues, nuances culturelles, contraintes techniques, coordination d'équipe. La plateforme doit absorber la complexité, pas y ajouter.

Si vous évaluez des outils développeur i18n ou envisagez de passer de votre plateforme de gestion des traductions actuelle, nous vous encourageons à essayer Better i18n et à découvrir ces workflows par vous-même. L'expérience développeur n'est pas une fonctionnalité que nous avons ajoutée après coup — c'est le fondement sur lequel tout le reste est construit.

Comments

Loading comments...