๐ฉ๐ผ๐๐ฟ๐ฒ ๐ฝ๐น๐๐ ๐ด๐ฟ๐ฎ๐ป๐ฑ๐ฒ ๐ฒ๐ฟ๐ฟ๐ฒ๐๐ฟ ๐๐๐ฟ ๐น๐ฎ ๐ด๐ฒ๐๐๐ถ๐ผ๐ป ๐ฑ๐ฒ๐ ๐๐ฟ๐ฎ๐ฑ๐๐ฐ๐๐ถ๐ผ๐ป๐ ?
Penser quโun seul fichier JSON suffit.
Gรฉrer les traductions dโune grosse app Angular dans un seul fichier, cโest comme chercher une aiguille dans une meule de foin.
Je lโai fait. Et jโen ai souffert :
โ Naviguer devenait un cauchemar.
โ Les traducteurs ne savaient plus oรน donner de la tรชte.
โ Retrouver une clรฉ ? Une mission commando.
Puis jโai changรฉ dโapproche.
Et jโai mis en place un workflow ๐บ๐ผ๐ฑ๐๐น๐ฎ๐ถ๐ฟ๐ฒ ๐ฒ๐ ๐ฎ๐๐๐ผ๐บ๐ฎ๐๐ถ๐๐ฒฬ :
๐ญ- ๐๐ฒฬ๐ฐ๐ผ๐๐ฝ๐ฎ๐ด๐ฒ ๐ฝ๐ฎ๐ฟ ๐ณ๐ผ๐ป๐ฐ๐๐ถ๐ผ๐ป๐ป๐ฎ๐น๐ถ๐๐ฒฬ :
Chaque feature = son propre fichier de traduction.
Les termes globaux ? Dans un fichier commun.
๐ฎ- ๐๐๐๐ถ๐ผ๐ป ๐ฎ๐๐๐ผ๐บ๐ฎ๐๐ถ๐๐ฒฬ๐ฒ :
Un script assemble tout proprement pour ngx-translate, transloco ou autre.
Avec des GUIDs pour une traรงabilitรฉ chirurgicale.
๐ฏ- ๐๐ฒฬ๐๐ฒ๐ฐ๐๐ถ๐ผ๐ป ๐ถ๐ป๐๐ฒ๐น๐น๐ถ๐ด๐ฒ๐ป๐๐ฒ ๐ฑ๐ฒ๐ ๐ฐ๐ต๐ฎ๐ป๐ด๐ฒ๐บ๐ฒ๐ป๐๐ :
Rien nโest รฉcrasรฉ inutilement. Moins de bugs. Moins de stress.
Rรฉsultat ?
โ Des fichiers lisibles pour les traducteurs
โ Une structure claire pour les devs
โ Un systรจme robuste, scalable et serein
Et le meilleur ?
Je lโai mis ร dispo sur GitHub : https://buff.ly/4hf9T8r
๐ฌ Alors, toi aussi tu t'es battu avec tes fichiers de traduction ?
Racontez-moi tapire galรจre. Je suis curieuse.
La plus grande erreur c'est surtout d'utiliser des fichiers JSON ... En utilisant des fichiers typescript on obtient le mรชme rรฉsultat, sauf que:
On peut renforcer le typage pour รฉviter les traductions manquantes (un fichier defaults qui s'exporte type, importรฉ par les autres)
On peut encore plus renforcer le typage pour crรฉer des template literals qui valident chaque clef
On peut lazy loader les fichiers de traduction ร la demande
On rรฉduit les dรฉpendances (pas besoin de http)
Les traductions sont versionnรฉes avec le code
Autant je suis d'accord sur le fait que 1 fichier c'est trop volumineux, trop complexe ร entretenir (merci ngx-translate-zombie).
Autant dรฉcouper le fichier de traduction par fonctionnalitรฉ - je trouve รงa trop bas niveau. Le seul avantage serait de faciliter l'export du groupe de composant (qui rรฉgie la fonctionnalitรฉ) vers une librairie partagรฉe : ce qui arrive rarement puisque ce qui rรฉgie une fonctionnalitรฉ dans une app c'est trรจs souvent le contexte.
Je prรฉfรจre dรฉcouper mes fichiers de traduction en fonction de la navigation de l'app.
Et plutรดt que de dรฉcrire mes clรฉs de trad au format Object, je dรฉclare sous forme de chaine : APP__ARTICLES__LIST__UNEVALEUR
Et j'ajoute en plus un suffixe : LABEL ou TITLE pour avertir le dรฉveloppeur du niveau dans la page.
Exemple bateau :