The Fluent Language - A localization system for natural-sounding translations

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.

Meetup page: https://www.meetup.com/pt-BR/women-devs-sg/events/306858571/

Transcript

1. THE FLUENT LANGUAGE A localization system for natural-sounding translations by Bruno Macabeus
6. A language for localization Do we need it?
8. First version “Let’s hardcode all strings! It won’t be an issue!”
9. Second version “Let’s map our strings in both languages into json fi les”
10. Third version 🤷
11. Each language is unique
12. Let’s see how it applies to our codebase
21. In French, zero is singular!
22. In French, zero is singular!
23. In French, zero is singular!
24. Polish is a language with the paucal numbers. We have one word for few, and another word for many ?????
26. Do you want to remove the fi le(s)? File A
 File B
 …
27. Do you want to remove the fi le(s)? File A
 File B
 …
28. Do you want to remove the fi le(s)? File A
 File B
 …
29. Do you want to remove the fi le(s)? File A
 File B
 …
31. Gender Article Grammatical Case Politeness …
32. How to make easy adding a new language?
33. XLIFF
34. ICU MessageFormat
35. Hey, he found 2 results. {
 GENDER: 'male',
 RES: 2
 } ICU MessageFormat + =
36. ARB
37. ARB
38. ARB ✔ Popular format
39. ARB ✔ Popular format 𝓍 Don’t have comments
40. ARB ✔ Popular format 𝓍 Don’t have comments 𝓍 Verbose
41. ARB ✔ Popular format 𝓍 Don’t have comments 𝓍 Verbose 𝓍 Code reuse is hard
42. FLUENT
44. Fluent is a Mozilla language developed with the aim of solving issues - and we can also take advantage of it to solve our issues
45. “ With almost 100 supported languages, Firefox faces many localization challenges. ”
48. “ There are many grammatical and stylistic variations that don’t map one-to-one between languages. ”
49. Asymmetric Localization
58. Referencing Messages Selectors Variables Attributes Comments Functions Writing Text
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 The star indicates the “default” variant. A default variant is required
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. Fluent is just the format. We need a client
85. @ fl uent/bundle (vanilla)
86. @ fl uent/bundle @ fl uent/react (vanilla)
87. @ fl uent/bundle @ fl uent/react (vanilla) Developed by Mozilla
88. @ fl uent/bundle @ fl uent/react (vanilla) (it isn't fl uent- fi rst) i18next Developed by Mozilla
89. @ fl uent/bundle @ fl react-i18next
90. @ fl uent/bundle @ fl react-i18next
91. @ fl uent/bundle @ fl react-i18next
92. @ fl uent/bundle @ fl react-i18next
93. @ fl uent/bundle @ fl react-i18next
94. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
95. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon Check the full code here
96. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
97. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
98. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
99. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
100. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
101. @ fl @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
102. @ fl @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
103. @ fl @ fl uent/react react-i18next Original and full code on github.com/coralproject/talk
104. @ fl @ fl uent/react react-i18next Original and full code on github.com/coralproject/talk
105. @ fl @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
106. @ fl @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
107. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
108. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
109. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
110. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
111. @ fl @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
112. @ fl @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
113. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/fxa
114. @ fl @ fl react-i18next
115. @ fl @ fl react-i18next
116. @ fl @ fl react-i18next
122. Who is using Fluent?
127. Furthermore…
128. project fl uent.org/play
129. github.com/mozilla/pontoon
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/vscode- fl uent
134. github.com/macabeus/vscode- fl uent
135. github.com/macabeus/vscode- fl uent
136. github.com/macabeus/vscode- fl uent
137. github.com/macabeus/vscode- fl uent
147. Macabeus Software Engineer at Anima /macabeus /bmacabeus macabeus.github.io