Ответ вслух Middle System design на фронте обновлено

Мультиязычность

Вопрос

Спроектируй локализацию: несколько языков, склонения, даты, валюты, RTL.

Веди разговор вслух, как на секции. Начинать с решения - главная ошибка: первые полторы минуты только вопросы.

Попробуйте сами

Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.

Показать ответ и разбор

Коротко

Тексты - ключами, переводы - отдельными файлами, грузятся по языку: класть пять языков в бандл ради одного нет смысла. Множественные формы - место, где в русском все спотыкаются: у нас три формы, и правило нетривиальное.

Что должно прозвучать в ответе

  • уточнил число языков, нужен ли RTL и кто переводит

  • ключи, а не тексты в коде; переводы отдельными файлами по языкам

  • множественные формы через Intl.PluralRules, а не самописный switch

  • даты, числа и валюты через Intl, с созданием форматтера один раз

  • перевод грузится по языку, а не все языки в бандле

  • SSR: язык определяется на сервере, иначе мигает

  • RTL - это не только direction: отступы, иконки, порядок

  • что делать с отсутствующим переводом: запасной язык и заметно в разработке

Что могут спросить следом

  • Как правильно сделать «5 файлов» и «112 файлов»?
  • Где хранить переводы и как их обновлять без релиза?
  • Что ломается при RTL кроме направления текста?

Разбор

Тексты - ключами, переводы - отдельными файлами, грузятся по языку: класть пять языков в бандл ради одного нет смысла.

Множественные формы - место, где в русском все спотыкаются: у нас три формы, и правило нетривиальное. Intl.PluralRules знает его для всех языков; самописный switch ошибается на 112 («файлов», а не «файла»).

Даты, числа, валюты - Intl.DateTimeFormat и NumberFormat. Важная деталь: форматтер создаётся один раз и переиспользуется, иначе он заметно медленный в списках.

SSR: язык определяется на сервере по заголовку или домену. Если определять на клиенте, первый кадр будет на языке по умолчанию и мигнёт - а заодно сломается гидратация.

RTL - не только direction: rtl: логические свойства вместо left/right, зеркалирование иконок направления, порядок элементов.

Отсутствующий перевод: запасной язык в проде и заметный маркер в разработке, чтобы пропуск нашли до релиза.

Ответьте сами, а не прочитайте

В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.