Building Angular apps with internationalization (i18n) in mind

on YouTube ↗31m

" summary

Adobe describes internationalizing a mixed Angular/React/backbone/jQuery codebase by marking strings, running ng xi18n to extract XLF, translating, snapshot- and behavior-testing per locale, then using the Angular compiler to emit per-locale builds. Continuous localization pipelines and a pre-push hook that injects machine translations for length tests are practical. Recommendations include the Intl API, moment.js, Globalize.js and i18next for formats and plurals, use localeCompare for sorting, CSS Grid/Flex and postcss-rtl, and sizing rules like 300% expansion for short labels.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 15:00FORMAT ALL NUMBERS
3. 16:25Test all the things!
4. 17:57Use Angular compiler to generate new version of app for each locale
5. 22:47Keep strings separate from graphics, icons, and photos
6. 25:08TRANSLATE DOCUMENTATION

" related talks

• 53mLost in TranslationOliver Combe · ng-conf 2017
• 20mBetter i18n for your Angular appsPascal Precht, Chirayu Krishnappa · ng-conf 2015
• 23mInternationalization, New and Upcoming FeaturesOlivier Combe · AngularConnect 2017
• 23mTransloco: Internationalization in Angular Done RightShahar Kazaz · AngularUP Experience 2020
• 39mThink globally, act locally with i18n on the webEli Schutze · JSDay 2019
• 35mAngularJS and i18nPascal Precht · Kod.io 2014
• 25mLocalization: Implementation and Testing... LocallyIsabela Moreira · Nordic.js 2019
• 22mInternationalizing ReactDaria Caraway · React Summit Remote Edition 2021