Traducción de variables en javascript
Escenario
Estoy trabajando en una aplicación multi-lenguaje desarrollada con la plataforma spring boot. Para quien no conozca esta plataforma de desarrollo, spring boot te permite gestionar varios lenguajes gracias a un sistema que utiliza ficheros de tipo propiedades para almacenar las traducciones. Los nombres de estos ficheros han de respetar la siguiente convención, messages_{código ISO del lenguaje}.properties. Así, un fichero para la traducción en castellano se llamaría messages_es.properties, en el que las traducciones se asignarían a un nombre único:|
1 2 |
app.name=Aplicación technoage app.description=Una aplicación inexistente |
|
1 2 |
app.name=Technoage Application app.description=A non-existent application |
|
1 |
<h1 th:text="#{app.name}"></h1> |
Problema
No existe una forma establecida para usar estas traducciones en javascript. En stackoverflow y blogs he visto soluciones en las que se propone incluir un array asociativo con las traducciones que se van a utilizar en el javascript en cuestión. O un controlador que devuelva las traducciones y luego se pinten en la vista para ser utilizadas por el código de javascript. Ninguna de las soluciones me parecían mantenibles. Algunas requerían actualizar las traducciones en dos sitios, otras no gestionaban bien el cambio de lenguaje dinámico.Solución
La aplicación en cuestión usa un gestor de tareas (grunt) para preparar los archivos estáticos (js, css, etc) que va a usar la parte web. Se me ocurrió que bastaría con traducir la estructura de un fichero de tipo properties en un objecto de javascript y luego referenciarlo desde los ficheros javascript. Gracias a este módulo de nodejs, la conversión de un formato a otro resulta sencillo y rápido. Luego solo tenía que crear un plugin para grunt que genere los ficheros javascript a partir del contenido convertido. Por ejemplo messages_es.properties se convertiría en messages_es.js:|
1 |
const messages = {app: {name: "Applicación technoage", description: "Una aplicación inexistente"}}; |
|
1 2 3 4 |
<script th:src="@{'/js/messages_' + ${#locale} + '.js'}"></script> <script> console.log(messages.app.name, messages.app.description); </script> |