This document discusses modern JavaScript localization using the c-3po library. It covers setting up localization infrastructure, choosing between ICU and gettext formats, using c-3po to localize strings and plural forms, extracting translations, validating translations, resolving translations at build time using Babel plugins, and integrating with continuous translation services like Weblate. The c-3po library provides a clean API for localization, extraction tools, and integrates with build tools to localize strings directly in code without needing a separate library at runtime.

1. Modern js localization

2. @MostovenkoA

4. About this talk

5. Localization in general

6. Localization in general
c-3po

7. Localization in general
c-3po
Continuous translations

8. Initial tasks

9. Localize interfaces

10. Setup localization infrastructure

11. Setup localization infrastructure
+
Split work for devs and translators

12. Translators are adding translations

13. Devs are coding

14. Localization format

15. ICU vs gettext

16. ICU
or
gettext

17. Features
ICU >>> gettext

18. ICU is cool but ...

19. Poor tooling

20. Poor tooling
Complicated format

21. Poor tooling
Complicated format
Already had gettext for py

22. "{gender_of_host, select, "
"female {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to her party.}"
"=2 {{host} invites {guest} and one other person to her party.}"
"other {{host} invites {guest} and # other people to her party.}}}"
"male {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to his party.}"
"=2 {{host} invites {guest} and one other person to his party.}"
"other {{host} invites {guest} and # other people to his party.}}}"
"other {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to their party.}"
"=2 {{host} invites {guest} and one other person to their party.}"
"other {{host} invites {guest} and # other people to their party.}}}}"

23. "{gender_of_host, select, "
"female {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to her party.}"
"=2 {{host} invites {guest} and one other person to her party.}"
"other {{host} invites {guest} and # other people to her party.}}}"
"male {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to his party.}"
"=2 {{host} invites {guest} and one other person to his party.}"
"other {{host} invites {guest} and # other people to his party.}}}"
"other {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to their party.}"
"=2 {{host} invites {guest} and one other person to their party.}"
"other {{host} invites {guest} and # other people to their party.}}}}"

24. GNU gettext

25. Rich ecosystem

26. Rich ecosystem
Simple format

27. Gettext idea

28. ‘Hello world’
Source code

29. gettext(‘Hello world’)
Source code

30. gettext(‘Hello world’)
Source code
‘Hello world’
.pot file

31. gettext(‘Hello world’)
Source code
‘Hello world’
.pot file
msgid: ‘Hello world’
msgstr: ‘’
.po file

32. gettext(‘Hello world’)
Source code
‘Hello world’
.pot file
msgid: ‘Hello world’
msgstr: ‘Здоровеньки
були’
.po file

33. Simple format

34. #: app.js:6
msgid "Choose locale"
msgstr "Оберіть локаль"
1 to 1 translations

35. #: app.js:10
msgid "${ n } second"
msgid_plural "${ n } seconds"
msgstr[0] "${ n } секунда"
msgstr[1] "${ n } секунди"
msgstr[2] "${ n } секунд"
Plural forms

36. msgctx "email"
msgid "Hello"
msgstr "Привіт"
msgctx "main page"
msgid "Hello"
msgstr "Вітаємо"
Contexts example

37. headers
mgsid/msgstr
plural forms
contexts

38. Translation
library

39. c-3po
https://c-3po.js.org/

41. Translation library
+
Babel plugin

42. c-3po lib

43. `Hello ${ name }`

44. import { t } from 'c-3po'
t`Hello ${ name }`;

45. tagged template
strings

46. Tagged template string
t`Hello ${ name }`

47. Template strings

48. 'Hello ' + name + ' ' + surname + '.'
`Hello ${ name } ${ surname }.`

49. 'Hello ' + name + ' ' + surname + '.'
t`Hello ${ name } ${ surname }.`

50. Alternatives suggest
sprintf formatting
gettext("Hello %s", name)

51. Alien to javascript

52. Alien to javascript
Extra work to parse

53. Alien to javascript
Extra work to parse
No reason to use es6
template strings

54. Alien to javascript :(
Extra work to parse x (
No reason to use es6
template strings =,(

55. Native javascript formatting

56. Native javascript formatting
String interpolation

57. Why tags ?

58. msgid

59. t(`Hello ${ name }`)
function t(str) {
// strs -> Hello Mike
// msgid -> ?
}

60. t(`Hello ${ name }`)
function t(str) {
// strs -> Hello Mike
// msgid -> ?
}

61. t`Hello ${ name }`
function t(strs, ...exprs) {
// strs -> [‘Hello’, ‘’]
// exprs -> [‘Mike’]
// msgid -> ‘Hello ${ 0 }`
}

62. t`Hello ${ name }`
function t(strs, ...exprs) {
// strs -> [‘Hello’, ‘’]
// exprs -> [‘Mike’]
// msgid -> ‘Hello ${ 0 }’
}

63. Plural forms

64. 1 banana
2 bananas

65. nplurals=2
n != 1

66. import { ngettext } from 'c-3po'
ngettext(
`${ n } banana`,
`${ n } bananas`,
n)

67. import { ngettext , msgid } from 'c-3po'
ngettext(
msgid`${ n } banana`,
`${ n } bananas`,
n)

68. Works for
English language
by default

69. What if another
default
locale?

70. import { setDefaultHeaders } from 'c-3po'
setDefaultHeaders({
'plural-forms': 'nplurals=...
plural=...'
})

71. import { setDefaultHeaders } from 'c-3po'
setDefaultHeaders({
'plural-forms': 'nplurals=...
plural=...'
})

72. import { ngettext , msgid } from 'c-3po'
ngettext(
msgid`${ n } банан`,
`${ n } банана`,
`${ n } бананов`,
n)

73. JSX

74. import { t } from 'c-3po'
const btn = <button>
{ t`me` }
</button>;
t`Click ${ btn }`

75. Click [object Object]

78. import { t } from 'c-3po'
const btn = <button>
{ t`me` }
</button>;
t`Click ${ btn }`

79. import { jt } from 'c-3po'
const btn = <button>
{ jt`me` }
</button>;
jt`Click ${ btn }`

80. babel-plugin-c-3po
https://github.com/c-3po-org/babel-plugin-c-3po

81. Why babel
plugin?

82. Code .potextract

83. Code .pot
.pot .po
extract
merge .po.po

84. Code .pot
.pot .po
extract
merge
trans.
.po.po
.po.po.po
.po.po
.po

85. Code .pot
.pot .po
extract
merge
trans.
.po.po
.po.po.po
.po.po
.po
resolve Code
.po.po
.po

86. Code .potextract
resolve Code
.po.po
.po

87. Code .potextract
resolve Code
.po.po
.po
+ Validation
+ Optimizations for production deploy

88. Good for es6 js AST traverse

89. Good for es6 js AST traverse
Works with any build tool

90. Extraction

91. t`Hello ${ name }`;
msgid "Hello ${ name }"
msgstr ""

92. Tags
discoverage

93. import { t } from 'c-3po'
t`Hello ${ name }`;
msgid "Hello ${ name }"
msgstr ""

94. import { t as i18n } from 'c-3po'
i18n`this translation will be extracted`

95. import { t as i18n } from 'c-3po'
i18n`this translation will be extracted`
t`this translation will not be extracted`

96. Validation
for
extracted strings

97. msgid ""
msgstr ?

98. No reason to translate an empty string

99. msgid "9876564532"
msgstr ?

100. No reason to translate only numbers

101. msgid "${ i }"
msgstr ?

102. No reason to translate just `${ i }`

103. msgid ""
"${ t ? fn()1 : fn2(arg) } test"
msgstr ?

104. No programs inside translated strings

105. Only vars :
t`${ test } var`
and member expressions:
t`${ this.user.name }`

106. Validation
for
Translation
existence

108. Validation
for
c-3po tags

109. ngettext(`${ n } banana`, `${ n } bananas`, n)

110. Validation is optional
and configurable
https://c-3po.js.org/configuration.html

111. Translations
resolve

112. Traditional flow

113. Load assets to
browser

114. Load assets to
browser
Resolve locale
(from cookie e.t.c)

115. Load assets to
browser
Resolve locale
(from cookie e.t.c)
Fetch locale

116. Load assets to
browser
Resolve locale
(from cookie e.t.c)
Fetch locale
Apply translations

117. Why just
not right at
a build time?

118. Load assets to
browser

119. Load assets to
browser

120. Less bundle size

121. Less bundle size
No extra requests

122. Less bundle size
No extra requests
No extra fn calls

123. Babel
transforms

124. t`Hello`;
+
msgstr “Hallo”;
“Hallo”

125. t`Hello ${ name }`;
+
msgstr “Hallo ${ name }”;
`Hallo ${ name }`

126. ngettext(
msgid`${ n } banana`,
`${ n } bananas`,
n)
msgid "${ i } banana"
msgid_plural "${ i } bananas"
msgstr[0] "${ i } banane"
msgstr[1] "${ i } bananen"

127. function __ngettext(n, args) {
return args[+(n != 1)];
}
__ngettext(n,
[`${n} banane`, `${n} bananen`]));

128. function __ngettext(n, args) {
return args[+(n != 1)];
}
__ngettext(n,
[`${n} banane`, `${n} bananen`]));

129. magically
disappearing
library

130. How about
Translators ?

131. Continuous
translations

132. Devs
VCS
repo
Trans.

133. Devs
VCS
repo
push
Trans.

134. Devs
VCS
repo
push notify
Trans.

135. Devs
VCS
repo
push
translate
notify
Trans.

136. Devs
VCS
repo
push
translate
notify
update Trans.

137. Devs
VCS
repo
push
translate
notify
update
?

138. Poeditor - https://poeditor.com/
Transifex -
https://www.transifex.com/
Weblate - https://weblate.org

139. Weblate
https://weblate.org

140. Devs
VCS
repo
push
push
pull
update Trans.
notify
translate

143. Future plans

144. Intl object integration
Contexts
React

145. PR’s are welcome
https://github.com/c-3po-org/c-3po

146. Thx :D
@MostovenkoA