Fluent: A localization system for natural-sounding translations

When developing a project for many cultures, it's important to start from day-0 with a proper localization system - otherwise, we would have many reworks. So, let's talk about Fluent, Mozilla's DSL that offers the correct way to provide the localization for your system. It's flexible to support as many languages as necessary without messing up the code.

Transcript

1. The Fluent Language A localization system for natural-sounding translations
2. A language for localization? Do we need it?
4. First version “Let’s hardcode all strings! It won’t be an issue!”
5. Second version “Let’s map our strings in both languages into json fi les”
6. Third version 🤷
10. Before talking the technical side, let’s talk about our languages
11. Our languages are diverse
20. In French, zero is singular!
21. In French, zero is singular!
22. In French, zero is singular!
23. Polish is a language with the paucal system. We have one word for few, and another word for many ?????
25. Do you want to clear the fi le(s)? File A
 File B
 …
26. Do you want to clear the fi le(s)? File A
 File B
 …
27. Do you want to clear the fi le(s)? File A
 File B
 …
28. Do you want to clear the fi le(s)? File A
 File B
 …
30. Gender Article Grammatical Case Politeness …
31. There are many rules within each language
32. We need to map these rules to our software
33. But how to do it in a scalable way?
34. XLIFF
35. ICU MessageFormat
36. Hey, he found 2 results. {
 GENDER: 'male',
 RES: 2
 } ICU MessageFormat + =
37. ARB
38. Fluent
40. Fluent is a Mozilla language developed with the aim of solving issues - and we can also take advantage of it to solve our issues
41. “ With almost 100 supported languages, Firefox faces many localization challenges. ”
44. “ There are many grammatical and stylistic variations that don’t map one-to-one between languages. ”
45. Asymmetric Localization
54. Referencing Messages Selectors Variables Attributes Comments Functions Writing Text
55. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
56. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
57. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
58. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
59. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
60. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
61. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
62. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
63. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
64. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
65. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
66. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
67. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
68. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
69. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
70. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
71. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
72. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
73. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
74. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
75. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
76. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
77. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
78. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
79. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
80. Fluent is just the format. We need a client
86. @ fl uent/bundle (vanilla)
87. @ fl uent/bundle @ fl uent/react (vanilla)
88. @ fl uent/bundle @ fl uent/react (vanilla) Developed by Mozilla
89. @ fl uent/bundle @ fl uent/react (vanilla) (it isn't fl uent- fi rst) i18next Developed by Mozilla
90. @ fl uent/bundle @ fl
91. @ fl uent/bundle @ fl
92. @ fl uent/bundle @ fl
93. @ fl uent/bundle @ fl
94. @ fl uent/bundle @ fl
95. @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
96. @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
97. @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
98. @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
99. @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
100. @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
101. @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
102. @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
103. @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
104. @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
105. @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
106. @ fl uent/react react-i18next Original and full code on github.com/mozilla/fxa
107. @ fl
108. @ fl
109. @ fl
112. Who is using?
120. Furthermore…
121. project fl uent.org/play
122. github.com/mozilla/pontoon
123. github.com/macabeus/ fl uent-typescript
124. github.com/macabeus/ fl uent-typescript
125. github.com/macabeus/vscode- fl uent
126. github.com/macabeus/vscode- fl uent
127. github.com/macabeus/vscode- fl uent
128. github.com/macabeus/vscode- fl uent
129. github.com/macabeus/vscode- fl uent
130. github.com/macabeus/vscode- fl uent
131. github.com/macabeus/vscode- fl uent
132. github.com/macabeus/vscode- fl uent
133. github.com/macabeus/jest-environment-vscode-extension
134. github.com/macabeus/jest-environment-vscode-extension
135. gambiconf.dev
136. twitter.com/gambiconf
137. Macabeus Software Engineer at Anima. We are recruiting! /macabeus /bmacabeus