ПРОДВИНУТАЯ РАБОТА С МУЛЬТИЯЗЫЧНОСТЬЮ В REACT | i18n
Рет қаралды 7,523
Күн бұрынВ данном видео мы поговорим о мультиязычности. Поделюсь советами из своего опыта. Также расскажу, почему я не использую готовые пакеты для 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 - Заключение
@ayub_begimkulov Жыл бұрын
Друзья, все таки решил выложить свое решение для i18n на npm, кажется, что есть люди, кому это может быть полезно. Собственно, вот ссылка на GitHub: github.com/Ayub-Begimkulov/i18n И вот ссылка на npm: www.npmjs.com/package/@ayub-begimkulov/i18n Выпустил пока в персональном скоупе (@ayub-begimkulov/i18n), так как не придумал еще название. Также дока пока совсем скудноватая, в ближайшие пару дней планирую улучшить. Должны еще доехать пару улучшений с точки зрения TS. Накидайте звезд, если хотите, чтобы проект развивался.
@user-fd3gp1ft5k 11 ай бұрын
Очень информативное видео! Спасибо, что делишься своим глубочайшим пониманием технологий.
@ayub_begimkulov 11 ай бұрын
Рад помочь!
@Nuts_Cracker Жыл бұрын
Спасибо! Очень своевременно вышло видео. Пишу свою первую мультиязычную апку на реакте. С i18-n разобрался, это не сложно. Однако практические рекомендации на основе опыта трудно переоценить!
@ayub_begimkulov Жыл бұрын
Рад помочь!
@malsagov6331 Жыл бұрын
Очень крутое видео! Спасибо за контент Айюб!
@ayub_begimkulov Жыл бұрын
Рад помочь!
@demiurgen13 Жыл бұрын
Видео - огонь! Очень полезно, спасибо
@ayub_begimkulov Жыл бұрын
Рад помочь !
@raidenraiden7938 Жыл бұрын
Лайк сразу, гляну чуть позже)
@ayub_begimkulov Жыл бұрын
Спасибо!
@kombuchamp Жыл бұрын
Отличный доклад, спасибо
@ayub_begimkulov Жыл бұрын
Рад, что понравилось!
@user-dw8lb8lc7u Жыл бұрын
Тема очень актуальная, хорошее видео
@ayub_begimkulov Жыл бұрын
Спасибо за фидбэк!
@SnegurkaBu Жыл бұрын
Спасибо, очень познавательно. Было бы очень интересно посмотреть лайв-кодинг библиотеки, просто без монтажа, в формате стрима.
@ayub_begimkulov Жыл бұрын
Спасибо за фидбэк! Про стрим можно подумать, это должно быть что-то отдельное от остальных видосов, так как такой формат не всем заходит.
@komilolimov2257 Жыл бұрын
Очень внятное объяснение, и все разобрал по этапно и очень красиво всё объяснил. Спасибо за такой контент мог бы сделать контент про next js и rtk . Спасибо заранее!
@ayub_begimkulov Жыл бұрын
По rtq уже есть видос с топ 6 ошибок. По нексту надо подумать, что можно снять.
@aleksandrmisnov Жыл бұрын
Классное видео ! Спасибо. Немного быстро для меня было, но думаю в пакете смогу сам разобраться с типизацией. Аюб , а сможешь сделать видео о том как правильно работать с NextJS и тайпскрипт? Было бы очень занятно посмотреть. И вообще, по next было бы полезно любой материал в твоём исполнение. Спасибо большое, очень рад что на тебя наткнулся.
@ayub_begimkulov Жыл бұрын
Привет! Спасибо за обратную связь. Касательно некст - запишу себе и попробую подумать, что можно интересного сделать.
@rostyslavnahornyi691 Жыл бұрын
new level of quality!
@ayub_begimkulov Жыл бұрын
Thanks!
@7iomka 9 ай бұрын
Проблема кастомных решений - отсутствие поддержки из коробки автопереводов или хелперов заполняющий или создающих новые ключи. Например в vscode есть замечательное расширение lokalise.i18n-ally которое поддерживает большую часть решений из списка популярных. В целом наверное хотелось бы увидеть твоё кастомное решение как отдельный пакет учитывая насколько узкую задачу с маленьким размером кода оно выполняет и делает это судя по всему на отлично)
@mercury_2379 Жыл бұрын
комментарий в поддержку канала
@ayub_begimkulov Жыл бұрын
Спасибо!
@jamjam3337 Жыл бұрын
👏👍
@ayub_begimkulov Жыл бұрын
👍
@fedordostoevskiy4209 Жыл бұрын
👀👏👏
@ayub_begimkulov Жыл бұрын
Спасибо!
@wardi9013 8 ай бұрын
Салютб спасибо за ролекю А если в аппе один язык, но хочется чтобы все лежало так же по ключам и подгружалось не сразу все в бандле, а только нужные лэйблы для текущей страницы? был бы рад ссылочки с примерами или туторами.
@AlexanderPozhidaev Жыл бұрын
Спасибо за видео! Почему не использовали Intl.PluralRules вместо собственной реализации pluralize?
@ayub_begimkulov Жыл бұрын
А я даже и не знал о нем) Кажется реально удобно, если не надо поддерживать старые браузеры. Спасибо за фидбэк!
@user-ex9ju3sz2x Жыл бұрын
translate(🔫🏎🔥)😁
@dimetriss5122 Жыл бұрын
А есть/будет ли возможность асинхронно подгружать переводы для отдельных страниц, чтоб не тянуть переводы страниц на которые юзер потенциально не зайдет ему с языком сразу? На сколько это вообще критично и необходимо и как такое реализовать?
@denissmirnov766 Жыл бұрын
Мы на проекте разбивали загрузку по языку/странице. Т.к. начались проблемы с SEO из-за огромного json с переводами
@ayub_begimkulov Жыл бұрын
Разбивать можно. По поводу необходимости - не знаю. Все зависит от того, насколько много переводов у тебя на каждой странице и повлияет ли это реально на размер бандла. Тут нужно смотреть от проекта в проект. А касательно решения, которое я тут показываю - пока это не поддержано. Но если есть нужда - можно подумать.
@dmitrysuhotskylessonjs3981 Жыл бұрын
Привет. Есть вопрос, какое оптимальное решение для локализации - если мы используем crud blog с хранением данных на бэке. Хранить все переводы в базе?
@ayub_begimkulov Жыл бұрын
Тут мне кажется стоит разделить переводы на 2 части. 1) Интерфейсные текста. Всякие кнопки, менющки, модалки и тд. В общем, все что храниться коде. 2) Контент. Собственно 1-я храниться также, как и показано в данном видео. 2-я - уже на беке. Но тут нужно, чтобы контент писался на 2-х языках.
@elena_sva Жыл бұрын
Кажется это можно проще написать function pluralizeRu(count: number){ const rem = Math.abs(count) % 100 if (rem >= 11 && rem
@ayub_begimkulov Жыл бұрын
Хорошое решение!
@ReaktorGaming86 Жыл бұрын
Тебе бы над изложением мысли поработать. Зачастую непонятно, что ты хочешь сказать. Например, на 17:00, про перевод времени. Я три раза переслушал, и так и не понял, что означает "они приходят из коробки", почему я не должен использовать moment, и что означает "информация не должна быть связана с вашим кодом". В чем вообще суть проблемы и в чем суть твоего решения?
@ayub_begimkulov Жыл бұрын
Привет. Спасибо за фидбэк! В плане подачи да, есть над чем поработать. 1) Из коробки - значит уже с пакетом. Я имел в виду, что библиотеки для работы со временем (moment, date-fns, Luxon и тд.) уже имеют функционал перевода и не надо этим заниматься самому. 2) Суть моего решения такая: - Маленький размер библиотеки. - Полная поддержка TS. - Поддержка необходимого функционала. - Простота и отсутствие 100 разных способов делать одно и то же. - Асинхронная подгрузка ключей. Мое решение использовать не обязательно, я просто поделился тем, почему мне не нравятся текущие решения и почему я написал свое. Все, понятное дело, субъективно. Как-то так)
@andreyh6934 Жыл бұрын
Спасибо, НО НЕ ТАРАТОРЬ!!! Люди, которые смотрят - только учатся и для них такая подача очень быстрая. А так за старание спасибо)
@ayub_begimkulov Жыл бұрын
Да, есть такая проблема. Особенно под конец видео сильно торопиться начинаю. Спасибо за фидбэк, буду работать над этим.
@alekz888 Жыл бұрын
Поставьте скорость видео 0.75 и все будет ок
@sharkman6434 Жыл бұрын
Смотрю на скорости 1,5, этот канал скорее от джун+ уровня, чтоб понимать о чём тут речь нужно хотя бы раз самому написать это. Новичкам лучше в школу идти и долбить пол года на курсах а потом уже смотреть каналы типа этого )
@dfkadyr Жыл бұрын
Спасибо
@ayub_begimkulov Жыл бұрын
не за что!
@artyomtaranenko2267 Жыл бұрын
next-i18next - best of the best)
Ilya Krukowski
Рет қаралды 6 М.
GDG Russia
Рет қаралды 2,2 М.