Schema: Facebook I18n architecture overview. Excalidraw
What: Facebook’s internationalization system is based on Facebook Translate framework (FBT). FBT stands out by handling translations at build time rather than runtime.
It combines a markup-based approach with source code parsing to extract translatable content, making it particularly efficient for React applications. The framework automatically handles complex grammatical cases, pluralization rules, and pronouns across different languages while maintaining type safety.
FBT uses JSX-like syntax:
<fbt desc="Greeting">
Hello <fbt:param name="username">{username}</fbt:param>
</fbt>
The framework processes these declarations during build time, generating optimized translation tables and ensuring that all strings are properly cataloged and translated before deployment.
At runtime, FBT operates through a lightweight lookup system:
Each translatable string is replaced with a unique hash key
Each locale can have its own translation tables or they could be split on chunks per component
Parameter substitution happens on-demand using the current locale's rules
This design means translations become simple hash lookups rather than complex string operations, keeping memory usage minimal and performance optimal.
Use Cases:
Large-scale web applications requiring multiple language support
React-based international platforms
Applications needing complex grammatical rules handling
Reliability:
Build-time validation of translation completeness
Automated handling of complex linguistic rules
Robust handling of plural forms across languages
Fallback mechanisms for missing translations
Scalability:
Supports hundreds of languages simultaneously
Build-time processing eliminates runtime overhead
Automated string extraction and collection
Maintainability:
Clear separation of code and translations
Inline documentation through desc attributes
Source code parsing for automatic string extraction
Performance:
There’s little evidence about the framework performance but if it works for Facebook it will probably work for your app. However, certain characterists are baked into the framework:
Near-zero runtime overhead for translations
No runtime parsing of translation files
Quick language switching capabilities
Users:
Resources:
Tags: #frontend #i18n
Disclaimer: Found a mistake or have a different perspective? Please drop a comment! I aim to keep this content accurate and valuable for everyone.