The Fluent Language - 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.

Bruno Macabeus is a Sr. Full-Stack Engineer at Anima, a startup company focused on enhancing the experience for designers and front-end developers through workflow automation. He is responsible for constructing plugins for design platforms like Figma and Adobe XD, in addition to contributing to the development of the Python/Node backend.

Transcript

1. THE FLUENT LANGUAGE A localization system for natural-sounding translations by Macabeus
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 🤷
7. But I'm sure sure I need to support English only...
9. Before talking the technical side, let’s talk about our languages
10. Our languages are diverse
14. In French, zero is singular!
15. Polish is a language with the paucal numbers. We have one word for few, and another word for many ?????
16. Do you want to remove the fi le(s)? File A
 File B
 …
17. Gender Article Grammatical Case Politeness …
18. There are many rules w i thin each language
19. We need to map these rules in our code
20. But how to do it in a scalable way?
21. XLIFF
22. ICU MessageFormat
23. Hey, he found 2 results. {
 GENDER: 'male',
 RES: 2
 } ICU MessageFormat + =
24. ARB
25. ARB ✔ Popular format 𝓍 Don’t have comments 𝓍 Verbose 𝓍 Code reuse is hard
26. FLUENT
28. Fluent is a Mozilla language developed with the aim of solving issues - and we can also take advantage of it to solve our issues
29. “ With almost 100 supported languages, Firefox faces many localization challenges. ”
32. “ There are many grammatical and stylistic variations that don’t map one-to-one between languages. ”
33. Asymmetric Localization
37. Referencing Messages Selectors Variables Attributes Comments Functions Writing Text
38. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
39. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
40. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
41. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
42. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes The star indicates the “default” variant. A default variant is required
43. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
44. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
45. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
46. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
47. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
48. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
49. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
50. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
51. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
52. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
53. Selectors Variables Comments Functions Writing Text Referencing Messages Attributes
54. Fluent is just the format. We need a client
56. @ fl uent/bundle @ fl uent/react (vanilla) (it isn't fl uent- fi rst) i18next Developed by Mozilla
57. @ fl uent/bundle @ fl react-i18next
58. @ fl uent/bundle @ fl react-i18next
59. @ fl uent/bundle @ fl react-i18next
60. @ fl uent/bundle @ fl react-i18next
61. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon Check the full code here
62. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
63. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
64. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
65. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
66. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
67. @ fl @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
68. @ fl @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
69. @ fl @ fl uent/react react-i18next Original and full code on github.com/coralproject/talk
70. @ fl @ fl uent/react react-i18next Original and full code on github.com/coralproject/talk
71. @ fl @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
72. @ fl @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
73. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
74. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
75. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
76. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/pontoon
77. @ fl @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
78. @ fl @ fl uent/react react-i18next Original and full code on github.com/ fi refox-devtools/pro fi ler
79. @ fl @ fl uent/react react-i18next Original and full code on github.com/mozilla/fxa
80. @ fl @ fl react-i18next
81. @ fl @ fl react-i18next
82. @ fl @ fl react-i18next
87. Who is using Fluent?
92. Furthermore…
93. project fl uent.org/play
94. github.com/mozilla/pontoon
95. github.com/macabeus/ fl uent-typescript
96. github.com/macabeus/ fl uent-typescript
97. github.com/macabeus/vscode- fl uent
98. github.com/macabeus/vscode- fl uent
99. github.com/macabeus/vscode- fl uent
100. github.com/macabeus/vscode- fl uent
101. github.com/macabeus/vscode- fl uent
102. github.com/macabeus/vscode- fl uent
103. github.com/macabeus/vscode- fl uent
104. github.com/macabeus/vscode- fl uent
108. Macabeus Software Engineer at Anima /macabeus /bmacabeus macabeus.github.io