ПРОДВИНУТАЯ РАБОТА С МУЛЬТИЯЗЫЧНОСТЬЮ В REACT | i18n
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- В данном видео мы поговорим о мультиязычности. Поделюсь советами из своего опыта. Также расскажу, почему я не использую готовые пакеты для i18n и поделюсь своим кастомным решением.
Ссылка на Телеграмм канал:
telegram.me/ayub_begimkulov_c...
Код из видео:
github.com/Ayub-Begimkulov/yo...
Ссылка на пакет:
NPM - www.npmjs.com/package/@ayub-b...
GitHub - github.com/Ayub-Begimkulov/i18n
Таймкоды:
00:00-00:48 - Интро
00:48-03:33 - Что такое i18n?
03:33-06:20 - Смотрим на пример
06:20-09:54 - Работа с RTL интерфейсами
09:54-12:38 - Формат и нейминг ключей
12:38-16:57 - Расположение файлов с ключами
16:57-17:51 - Переводы дат и времени
17:51-22:22 - Форматирование переводов
22:22-28:00 - Почему я не использую готовые инструменты
28:00-35:51 - Смотрим полноценный пример
35:51-44:28 - Смотрим код моего решения
44:28-46:15 - Пару бонусных советов
46:15-46:37 - Заключение
Друзья, все таки решил выложить свое решение для i18n на npm, кажется, что есть люди, кому это может быть полезно.
Собственно, вот ссылка на GitHub:
github.com/Ayub-Begimkulov/i18n
И вот ссылка на npm:
www.npmjs.com/package/@ayub-begimkulov/i18n
Выпустил пока в персональном скоупе (@ayub-begimkulov/i18n), так как не придумал еще название.
Также дока пока совсем скудноватая, в ближайшие пару дней планирую улучшить. Должны еще доехать пару улучшений с точки зрения TS.
Накидайте звезд, если хотите, чтобы проект развивался.
Очень информативное видео! Спасибо, что делишься своим глубочайшим пониманием технологий.
Рад помочь!
Спасибо! Очень своевременно вышло видео. Пишу свою первую мультиязычную апку на реакте. С i18-n разобрался, это не сложно. Однако практические рекомендации на основе опыта трудно переоценить!
Рад помочь!
Очень крутое видео! Спасибо за контент Айюб!
Рад помочь!
Видео - огонь! Очень полезно, спасибо
Рад помочь !
Лайк сразу, гляну чуть позже)
Спасибо!
Отличный доклад, спасибо
Рад, что понравилось!
Очень внятное объяснение, и все разобрал по этапно и очень красиво всё объяснил. Спасибо за такой контент мог бы сделать контент про next js и rtk . Спасибо заранее!
По rtq уже есть видос с топ 6 ошибок. По нексту надо подумать, что можно снять.
Тема очень актуальная, хорошее видео
Спасибо за фидбэк!
Спасибо, очень познавательно. Было бы очень интересно посмотреть лайв-кодинг библиотеки, просто без монтажа, в формате стрима.
Спасибо за фидбэк! Про стрим можно подумать, это должно быть что-то отдельное от остальных видосов, так как такой формат не всем заходит.
Классное видео ! Спасибо. Немного быстро для меня было, но думаю в пакете смогу сам разобраться с типизацией. Аюб , а сможешь сделать видео о том как правильно работать с NextJS и тайпскрипт? Было бы очень занятно посмотреть. И вообще, по next было бы полезно любой материал в твоём исполнение. Спасибо большое, очень рад что на тебя наткнулся.
Привет! Спасибо за обратную связь.
Касательно некст - запишу себе и попробую подумать, что можно интересного сделать.
new level of quality!
Thanks!
комментарий в поддержку канала
Спасибо!
Проблема кастомных решений - отсутствие поддержки из коробки автопереводов или хелперов заполняющий или создающих новые ключи. Например в vscode есть замечательное расширение lokalise.i18n-ally которое поддерживает большую часть решений из списка популярных. В целом наверное хотелось бы увидеть твоё кастомное решение как отдельный пакет учитывая насколько узкую задачу с маленьким размером кода оно выполняет и делает это судя по всему на отлично)
Салютб спасибо за ролекю А если в аппе один язык, но хочется чтобы все лежало так же по ключам и подгружалось не сразу все в бандле, а только нужные лэйблы для текущей страницы? был бы рад ссылочки с примерами или туторами.
👏👍
👍
Спасибо за видео!
Почему не использовали Intl.PluralRules вместо собственной реализации pluralize?
А я даже и не знал о нем)
Кажется реально удобно, если не надо поддерживать старые браузеры.
Спасибо за фидбэк!
👀👏👏
Спасибо!
Привет. Есть вопрос, какое оптимальное решение для локализации - если мы используем crud blog с хранением данных на бэке. Хранить все переводы в базе?
Тут мне кажется стоит разделить переводы на 2 части.
1) Интерфейсные текста. Всякие кнопки, менющки, модалки и тд. В общем, все что храниться коде.
2) Контент.
Собственно 1-я храниться также, как и показано в данном видео. 2-я - уже на беке. Но тут нужно, чтобы контент писался на 2-х языках.
А есть/будет ли возможность асинхронно подгружать переводы для отдельных страниц, чтоб не тянуть переводы страниц на которые юзер потенциально не зайдет ему с языком сразу?
На сколько это вообще критично и необходимо и как такое реализовать?
Мы на проекте разбивали загрузку по языку/странице. Т.к. начались проблемы с SEO из-за огромного json с переводами
Разбивать можно. По поводу необходимости - не знаю. Все зависит от того, насколько много переводов у тебя на каждой странице и повлияет ли это реально на размер бандла.
Тут нужно смотреть от проекта в проект. А касательно решения, которое я тут показываю - пока это не поддержано. Но если есть нужда - можно подумать.
translate(🔫🏎🔥)😁
Тебе бы над изложением мысли поработать. Зачастую непонятно, что ты хочешь сказать. Например, на 17:00, про перевод времени. Я три раза переслушал, и так и не понял, что означает "они приходят из коробки", почему я не должен использовать moment, и что означает "информация не должна быть связана с вашим кодом". В чем вообще суть проблемы и в чем суть твоего решения?
Привет. Спасибо за фидбэк! В плане подачи да, есть над чем поработать.
1) Из коробки - значит уже с пакетом. Я имел в виду, что библиотеки для работы со временем (moment, date-fns, Luxon и тд.) уже имеют функционал перевода и не надо этим заниматься самому.
2) Суть моего решения такая:
- Маленький размер библиотеки.
- Полная поддержка TS.
- Поддержка необходимого функционала.
- Простота и отсутствие 100 разных способов делать одно и то же.
- Асинхронная подгрузка ключей.
Мое решение использовать не обязательно, я просто поделился тем, почему мне не нравятся текущие решения и почему я написал свое. Все, понятное дело, субъективно.
Как-то так)
Кажется это можно проще написать function pluralizeRu(count: number){
const rem = Math.abs(count) % 100
if (rem >= 11 && rem
Хорошое решение!
Спасибо, НО НЕ ТАРАТОРЬ!!! Люди, которые смотрят - только учатся и для них такая подача очень быстрая. А так за старание спасибо)
Да, есть такая проблема. Особенно под конец видео сильно торопиться начинаю.
Спасибо за фидбэк, буду работать над этим.
Поставьте скорость видео 0.75 и все будет ок
Смотрю на скорости 1,5, этот канал скорее от джун+ уровня, чтоб понимать о чём тут речь нужно хотя бы раз самому написать это. Новичкам лучше в школу идти и долбить пол года на курсах а потом уже смотреть каналы типа этого )
Спасибо
не за что!
next-i18next - best of the best)