План статьи:

1. Вводная часть
1. Что такое мультиязычность
2. Локаль сайта
2. Как правильно вводить мультиязычность на сайте, и как я ее ввел на свой сайт
3. Выводы

Вводная часть

Всем привет, меня зовут Александр, я являюсь фронтенд разработчиком с 4-х летним опытом работы. В этой статье я решил поделится своим опытом введения мультиязычности на своем блоге.

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

Еще хочу затронуть такое понятие как локаль, потому что оно используется вместе с мультиязычностью. Иногда люди, которые поверхностно знакомы с интернет технологиями и веб разработкой, могут использовать этот термин, как синоним к термину «мультиязычность». В моем понимании локаль — это регион, в котором будет использоваться сайт.

Для большего понимания я приведу пример с сайтом для терминов «мультиязычность» и «локаль». Исходные данные для сайта таковы: сайт используется для жителей России, но будет еще сайт «клон», например для жителей Турции. Для основного сайта локаль будет российской, для сайта клона — турецкая, то есть локаль — это территория или регион, на которую нацелен сайт и будет ее обслуживать. Учитывая, что целевая аудитория обоих сайтов и это русские и турки, на обои версии сайтов могут зайти как русские, так и турки, то они должны иметь две версии отображения языка сайта: русскую и турецкую, вот здесь это уже мультиязычность.

Как правильно вводить мультиязычность на сайте, и как я ее ввел на свой сайт

Для понимания работы этого функционала необходимо понимание базовое понимание, что такое сайт и адресная строка сайта. Далее я приведу пример описания работы мультиязычности из документации к одному из моих проектов:

При заходе на страницу необходимо определить локаль(вспомогательный параметр в адресной строке) для пользователя. Для основного языка локаль определять не нужно, потому что с нее(адрес с дефолтной локалью) будет производится редирект на адрес сайта без локали. 

Когда пользователь зашел первый раз на сайт, то у него будет выводится версия сайта относительно локали, например, если зашел из Англии — английская версия сайта, если из России — русская версия.

После этого можно выбрать перевод на тот, который необходим. Например, после захода на английскую версию сайта пользователь переключился на русский перевод, в итоге на английской версии сайта нужно вывести русский перевод сайта. При повторном заходе на сайт английской версии нужно также выводить русский перевод сайта. Информацию об переводе необходимо сохранить в куках, либо локальной истории.

На практике это обзначает, что либо сразу необходимо подключать мультиязычность на сайте, либо на каком-либо этапе разработки. Если это сделать в начале, то здесь никаких потерь не будет и разработка пойдет дальше как по маслу. Если это сделать на каком-либо другом этапе, то здесь необходимо будет сделать лишние телодвижения: написать переводы для уже существующего текста на самом сайте на стороне фронтенда и внедрить его в кодовую базу; внести правки в уже существующую базу данных с оглядкой на мультиязычность для статей и добавлением двух и более языков; поправить кодовую базу бекенда, если в этом есть потребность, и ответ для фронтенда; на стороне фронтенда поправить кодовую базу, которая работает с данными, которые приходят с разными версиями языков от бекенда. В большинстве случаев все сходится ко второму варианту, как это было и у меня. Для себя считаю, что в этом ничего нет страшного и главное понимать, как можно поправить данный случай на практике и в теории, донести это до клиента.

В плане реализации мультиязычность много времени не занимает. В своем блоге я использую библиотеку i18n и для react это занимает 30-40 минут с учетом ознакомления документации, примеров кода из нее и применении в своем проекте, большим плюсом для нее является — это возможность ее использования вместе с server side rendering. Больше всего времени у меня заняло перевод существующего функционала и внедрение его в кодовую базу, расширение базы данных для разных версий языков. Так как я реализовал мультиязычность на ранней стадии разработки, то у меня правки, связанные с мультиязычностью, заняли от 5 до 8 часов. Я считаю, что это не очень много, но если бы я сразу внедрил бы мультиязычность, то у меня бы ушло гораздо меньше времени.

Выводы

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

Надеюсь тебе было интересно и статья тебе была полезна, счастливо и веселого кодинга.