O documento discute os desafios da internacionalização de software, incluindo a variedade de línguas, formatos, convenções culturais e como bibliotecas como RequireJS, Handlebars e FormatJS podem ajudar a internacionalizar aplicações web.

1. Reconstruindo a
torre de Babel
com RequireJS
e outras bibliotecas legais
Criado por /Leo Moura @lfsmoura

2. Pedra de Rosetta

4. Internacionalização - desenvolver software de maneira que
dê suporte ou seja facilmente adaptado a usuários de
diferentes línguas ou expectativas culturais.

5. i18n
"i" + "nternationalizatio".length + "n"
// > "i18n"
l10n - localization
g11n - globalization
NLS - native language support

6. Linguistas estimam que o número de línguas existentes
seja em torno de 6000
> 70% da Internet não fala inglês
Localizar para 8 línguas significa atingir 80% da população
mundial

7. Internacionalização - dificuldades

8. Greece, Iran, Lebanon, Syria, Palestine, Turkey, Macedonia,
Bulgaria, Albania, and Sicily

9. Lost in Translation

10. Internacionalização é muito mais
que traduzir strings
People have exactly one canonical full name.
People have exactly N names, for any value of N.
People’s names fit within a certain defined amount of
space.
People’s names are written in ASCII.
People’s names are written in any single character set.
People’s names are all mapped in Unicode code points.
People’s names are case sensitive.
People’s names are case insensitive.
People’s names do not contain numbers.

11. My system will never have to deal with names from China.
I can safely assume that this dictionary of bad words
contains no people’s names in it.
People have names.
Falsehoods programmers believe about names
Falsehoods programmers believe about adressess

12. Como as linguas podem variar
direção (esquerda para direita, direita para a esquerda)
formato de data e hora
formato dos números
plurais
símbolos e pontuação
unidades de medida
tamanhos de folhas de impressão
atalhos e teclas
questões culturais

13. Estou ausente fui "almoçar"
Estou ausente fui „almoçar“
Estou ausente fui ”almoçar”
Estou ausente fui «almoçar»
Estou ausente fui 「almoçar」

14. Microsoft Checklist
Look for geo-political sensitivity issues (e.g., borders may
be disputed between neighboring countries)
Run with Complex scripts and Right to Left (RTL) support
Verify all controls function correctly with the East Asian
(IME)
Verify switching the keyboard to a different mapping
works correctly
Verify ANSI, double-byte, and Unicode text are handled
correctly for display, input, and elsewhere (e.g., double-
byte characters will be split if treated as ANSI)
Verify any language-dependant features work correctly

15. Javascript has a Unicode problem

16. Microsoft Checklist
Verify extended and non-standard characters are
displayed and handled correctly
Verify controls in dialogs and elsewhere are aligned and
sized correctly (e.g., text is not truncated)
Verify any functionality affected by the localization
process works correctly
Verify data is ordered correctly
Verify tab order is correct
Verify no unlocalized strings remain
Verify hot keys are [sic] localzied

17. Show me the code
1. RequireJS + plugin i18n
2. RequireJS + plugin Handlebars + FormatJS

18. Detectando a língua no servidor
var app = require('express')();
var appLocales = ['de', 'en', 'fr'];
app.get('/', function (req, res) {
var locale = req.acceptsLanguages(appLocales) || 'en';
// ...customize the response to locale
});

19. BCP47
en - inglês
mas - Maasai
pt-BR - Português do Brasil
es-419 - Espanhol da América Latina
zn-Hans - Chinês com caracteres simplificados

20. Usando o plugin i18n

21. Usando o plugin i18n

22. Usando o plugin i18n
// js/nls/main.js
define({
root: true,
"pt-br": true
});
// js/nls/root/main.js
define({
greetings: "hello world",
home: "Home",
about: "About"
});
// js/nls/pt-br/main.js
define({
greetings: "Olá mundo",
home: "Home",
about: "Sobre"
});

23. Usando o plugin i18n
requirejs(['i18n!nls/main'], function(lang) {
console.log(lang);
});

26. Configurando manualmente a língua
require.config({
config: {
i18n: {
locale: 'pt-br'
}
}
});

27. Para formatar datas

28. Usando handlebars e FormatJS

29. Handlebars
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
<ul>
{{#each items}}
<li>{{agree_button}}</li>
{{/each}}
</ul>
</div>
var context = {
items: [
{name: "Handlebars", emotion: "love"},
{name: "Mustache", emotion: "enjoy"},
{name: "Ember", emotion: "want to learn"}
]
};
Handlebars.registerHelper('agree_button', function() {
var emotion = Handlebars.escapeExpression(this.emotion),
name = Handlebars.escapeExpression(this.name);
return new Handlebars.SafeString(
"<button>I agree. I " + emotion + " " + name + "</button>"
);
});

30. var source = $("#entry-template").html();
var template = Handlebars.compile(source);

31. require.config({
paths: {
hbs: 'lib/require-handlebars-plugin/hbs'
},
hbs: {
helpers: false
}
});
require(['hbs!templates/main'], function(tplMain) {
var text = tplMain();
}

32. <!-- js/templates/main.hbs -->
<div class="content">
<div>
{{formatMessage (intlGet "messages.welcome")}} {{name}}
</div>
<footer>
<p>{{formatDate date day="numeric" month="long" year="numeric"}}</p>
</footer>
</div>

33. // js/nls/pt-br.js
define({
locales: 'pt-BR',
messages: {
welcome: "Bem-vindo!"
}
});

34. requirejs(['hbs/handlebars', 'handlebars-intl',
'hbs!templates/main',
'nls/pt-BR'],
function(Handlebars, HandlebarsIntl, mainTpl, intlData) {
HandlebarsIntl.registerWith(Handlebars);
var context = {
name: 'Leo',
price: 1000,
date: new Date()
};
var text = mainTpl(context, {
data: {intl: intlData}
});
document.body.innerHTML = text;
});

35. Bem-vindo! Leo
24 de setembro de 2015

36. fr
pt-BR
<ul>
<li>{{formatNumber num}}</li>
<li>{{formatNumber completed style="percent"}}</li>
<li>{{formatNumber price style="currency" currency="USD"}}</li>
</ul>
42 000
90 %
100,95 $US
42.000
90%
US$100,95

37. en-US
pt-BR
<p>{{formatDate date day="numeric" month="long" year="numeric"}}</p>
September 24, 2015
24 de setembro de 2015

38. <p>
<b>{{formatRelative postDate}}</b>
<b>{{formatRelative postDate units="minute"}}</b>
</p>
yesterday
1,320 minutes ago

39. <div>
{{formatMessage (intlGet "messages.coffee_drinking")
name=name
numCups=numCups}}
</div>
<div>
{
coffee_drinking: "Usuário {name} {numCups, plural,
=0 {não}
other {} } tomou {numCups, plural,
=0 {nenhuma xícara}
=1 {uma xícara}
other {# xícaras}} de café"
}
</div>
Usuário Leo não tomou nenhuma xícara de café

40. Concluindo
Internacionalização é mais do que traduzir strings
Produzir software internacionalizado compensa no longo
prazo
Não reinventar a roda
Contratar um nativo ou profissional
Incorporar internacionalização nos testes

41. ECMA-402 JavaScript internalization specification
Microsoft test checklist

42. Muchas Gracias!
@lfsmoura