Quem usa internacionalização?

Quando você começa a programar com Vue.js é natural não dar atenção para aspectos relacionados a internacionalização. Isso acontece porque você está tão focado em aprender novos conceitos e técnicas que isso parece pouco importante em relação aos demais itens.

Normalmente você só pensa em internacionalização quando pessoas de outros países começam a utilizar o seu software ou site. Somente neste momento que o programador busca por alternativas que possam lhe ajudar.

Quando a legibilidade do código é importante

Outro fator, que no meu caso também foi muito decisivo, é a questão da legibilidade do código. É fato que ao programar em inglês, seu código fica mais coerente e evita aqueles misturas de idiomas. Por exemplo, quem nunca viu um método "getPessoa".

Sempre gostei de código legível, mas quando comecei a programar com Ruby percebi a importância de programar em inglês. No Ruby on Rails existem as Inflections que são responsáveis por gerar o singular e plural de Strings, ou seja, programando em português você pode ter problemas ao usar as Inflections.

Pessoas de outros países podem contribuir

Ainda tem a questão de trabalhar com equipes de diferentes naturalidades, algo bem comum em projetos Open Source. Se seu software não está escrito em inglês, isso pode ser um limitante para que pessoas de outros países contribuam com seu código.

Vue.js com código em português

Com base nisso, desde que eu comecei a programar com Vue.js, sempre procurei escrever o código em inglês. Porém, inicialmente eu não dava atenção para a internacionalização, o que ao longo do tempo começou a deixar a legibilidade do meu código comprometida. Por exemplo:

<div>
  Nome da pessoa: {{ person.name }}
</div>
<div>
  Endereço: {{ person.street }}
</div>

Isso pode parecer um código inofensivo, mas é assim que começa aquelas misturas de idiomas que citei acima. E conforme o software vai crescendo, cada vez fica mais difícil de mudar.

Buscando uma boa biblioteca

Existe uma lista das ferramentas mais populares para quem programa com Vue.js, é o Vue.js Awesome. Quando preciso de alguma biblioteca, este é o primeiro lugar que eu procuro.

Nesta lista, há um espaço reservado especificamente para bibliotecas de internacionalização (i18n) e no momento que escrevo este artigo existem 20 ferramentas listadas para este fim. Vale ressaltar que existem outras bibliotecas além das listadas nessa página, mas essas 20 são as que possuem maior popularidade.

Olhei todas as bibliotecas e testei algumas (as que eu julguei mais relevantes). A partir disso tirei minhas conclusões.

Por que eu escolhi a biblioteca i18next

A biblioteca que mais me chamou a atenção é a i18next. Primeiramente é um projeto bem maduro, ele foi criado em 2011 e é bem popular. Se você procurar no Google encontra vários materiais e no GitHub o repositório possui mais de 4000 Stars.

Em seguida é fácil perceber que o projeto é muito bem documentado. Os tópicos da documentação são bem sintetizados e facilmente você se localiza no site. Atualmente existe apenas a documentação em inglês, mas é fácil de entender independente do seu nível de inglês.

Navegando na documentação, você encontra as principais funcionalidades que uma biblioteca de internacionalização precisa ter. Eu particularmente, gostei muito das seguintes funcionalidades:

• Namespace: Você pode criar módulos, extremamente útil para sistemas maiores e evita problemas com entradas com nomes iguais.
• Interpolação: Você pode passar parâmetros para a tradução, por exemplo: "Você adicionou elemento(s)", aqui você passa um parâmetro "count".
• Plugins: É possível criar extensões para personalizar algum comportamento, inclusive no site existem vários Plugins prontos.
• Plugin "LanguageDetector": Serve para automaticamente identificar o idioma do navegador e selecionar uma tradução.

Óbvio que existem outras funcionalidades e você pode consultá-las na documentação completa.

Vue.js e i18next: Plugin de Integração

Atualmente, na documentação do i18next existem três Plugins para Vue.js, porém um deles é muito completo e também se destaca pela documentação. Este plugin foi desenvolvimento por uma empresa da Suiça e pode ser encontrado neste repositório.

As principais funcionalidades deste plugin são:

• Integração com as interpolações.
• Definir Namespace padrão por componente.
• Vários meios de chamada: Global Variable ($t), Directive e Filter.

Como você percebeu, são muitas as funcionalidades do i18next e existem muitos meios para integrar o i18next com o Vue.js. Agora você entendeu o motivo que eu gostei tanto da biblioteca?

Espero ter esclarecidos as suas dúvidas. Para sugestões é só entrar em contato. Abraço.