Локализация: сравнительный анализ Express.js, PHP Laravel и Total.js

Когда дело доходит до локализации в веб-приложениях, способность поддерживать несколько языков и адаптироваться к региональным предпочтениям имеет решающее значение. Давайте сравним Express.js, PHP Laravel и Total.js с точки зрения их возможностей локализации:

Обзор

Экспресс.js:

Express.js — это минималистичный фреймворк для веб-приложений для Node.js. Хотя он не предоставляет встроенных функций локализации, он предлагает гибкую среду для реализации локализации в вашем приложении. Express.js можно комбинировать с различными библиотеками и инструментами для достижения функциональности локализации, такими как i18n, i18next или пользовательское промежуточное ПО.

Плюсы:

Гибкость выбора из нескольких библиотек локализации.
Позволяет настраивать и внедрять на основе конкретных требований проекта.
Хорошо интегрируется с другими библиотеками и инструментами Node.js.

Минусы:

Требует дополнительной настройки и настройки для локализации.
Отсутствие встроенных функций локализации увеличивает усилия разработчиков.
Использование внешних библиотек может привести к проблемам с совместимостью или обслуживанием.

Пример

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

1. Установите необходимые зависимости:

npm install express i18n

2. Создайте папку с именем locales в корневом каталоге вашего проекта.

В папке «locales» создайте файлы JSON для каждого поддерживаемого языка. Например, создайте en.json для английского языка и fr.json для французского. Эти файлы будут содержать пары ключ-значение для переведенных строк.

en.json:

{
     "welcome": "Welcome to the User CRUD App!",
     "create": "Create User",
     "read": "Read User",
     "update": "Update User",
     "delete": "Delete User"
   }

fr.json:

{
     "welcome": "Bienvenue dans l'application CRUD utilisateur !",
     "create": "Créer un utilisateur",
     "read": "Lire un utilisateur",
     "update": "Mettre à jour un utilisateur",
     "delete": "Supprimer un utilisateur"
   }

3. Настройте Express.js и промежуточное ПО локализации в вашем `app.js` или основном файле приложения:

const express = require('express');
   const i18n = require('i18n');

   const app = express();

   // Localization middleware
   i18n.configure({
     locales: ['en', 'fr'], // Supported languages
     directory: __dirname + '/locales', // Path to language files
     defaultLocale: 'en', // Default language
     cookie: 'lang', // Cookie name to store the selected language
   });

   app.use(i18n.init);

   // Set up views directory and templating engine (e.g., using EJS)
   app.set('views', __dirname + '/views');
   app.set('view engine', 'ejs');

   // Routes
   app.get('/', (req, res) => {
     res.render('index');
   });

   app.listen(3000, () => {
     console.log('Server started on port 3000');
   });

4. Создайте файл `index.ejs` в папке «views» со следующим содержимым:

<!DOCTYPE html>
   <html lang="<%= res.locale %>">
   <head>
     <meta charset="UTF-8">
     <title>User CRUD App</title>
   </head>
   <body>
     <h1><%= res.__('welcome') %></h1>
     <ul>
       <li><a href="/create"><%= res.__('create') %></a></li>
       <li><a href="/read"><%= res.__('read') %></a></li>
       <li><a href="/update"><%= res.__('update') %></a></li>
       <li><a href="/delete"><%= res.__('delete') %></a></li>
     </ul>
   </body>
   </html>

5. Запустите свой сервер Express.js:

node app.js

Теперь, когда вы открываете http://localhost:3000 в своем браузере, представление будет отображать локализованные строки на основе выбранного языка. Вы можете переключаться между языками, установив файл cookie lang с кодом нужного языка («en» для английского или «fr» для французского).

В этом примере демонстрируется базовая реализация локализации в представлении Express.js для пользовательского приложения CRUD. Вы можете распространить этот подход на другие представления и маршруты в вашем приложении и добавить дополнительные языковые файлы для поддержки дополнительных языков.

PHP Ларавель:

Laravel — это популярный PHP-фреймворк, предлагающий всестороннюю поддержку локализации «из коробки». Он предоставляет такие функции, как файлы перевода, помощники по локализации и автоматическое определение языка. Возможности локализации Laravel основаны на стандартной инфраструктуре Gettext и обеспечивают простой и эффективный способ обработки переводов.

Плюсы:

Встроенная поддержка локализации с файлами перевода и языковыми файлами.
Предоставляет помощники по переводу и удобные функции локализации.
Автоматическое определение языка на основе пользовательских предпочтений или настроек браузера.

Минусы:

Требуется знакомство с синтаксисом и соглашениями локализации Laravel.
Ограничено приложениями на основе PHP.
Требуется сервер с поддержкой PHP.

Пример

Вот пример того, как вы можете реализовать локализацию в Laravel для пользовательского CRUD-приложения:

1. Настройте локализацию Laravel:

Откройте файл config/app.php и убедитесь, что для параметра locale задан язык по умолчанию, который вы хотите использовать. Например:

'locale' => 'en',

2. Создайте языковые файлы:

Laravel использует языковые файлы для хранения переводов. Внутри каталога resources/lang создайте папку для каждого языка, который вы хотите поддерживать (например, en для английского и fr для французского). Внутри каждой языковой папки создайте файл с именем messages.php.

resources/lang/en/messages.php:

<?php
   
   return [
       'welcome' => 'Welcome to the User CRUD App!',
       'create' => 'Create User',
       'read' => 'Read User',
       'update' => 'Update User',
       'delete' => 'Delete User',
   ];

resources/lang/fr/messages.php:

<?php
   
   return [
       'welcome' => 'Bienvenue dans l\'application CRUD utilisateur !',
       'create' => 'Créer un utilisateur',
       'read' => 'Lire un utilisateur',
       'update' => 'Mettre à jour un utilisateur',
       'delete' => 'Supprimer un utilisateur',
   ];

3. Используйте локализацию в представлении:

Откройте пользовательский файл представления CRUD (например, resources/views/users/index.blade.php) и используйте вспомогательную функцию trans() для отображения переведенных строк.

<!DOCTYPE html>
   <html lang="{{ app()->getLocale() }}">
   <head>
       <meta charset="UTF-8">
       <title>User CRUD App</title>
   </head>
   <body>
       <h1>{{ trans('messages.welcome') }}</h1>
       <ul>
           <li><a href="/create">{{ trans('messages.create') }}</a></li>
           <li><a href="/read">{{ trans('messages.read') }}</a></li>
           <li><a href="/update">{{ trans('messages.update') }}</a></li>
           <li><a href="/delete">{{ trans('messages.delete') }}</a></li>
       </ul>
   </body>
   </html>

4. Обновляйте язык динамически:

Чтобы пользователи могли переключаться между языками, вы можете добавить в представление ссылки для выбора языка или раскрывающееся меню. Например, вы можете создать раскрывающееся меню выбора языка, которое отправляет запрос POST на маршрут, например /language, для обновления языка:

<form action="/language" method="POST">
       @csrf
       <select name="locale" onchange="this.form.submit()">
           <option value="en" {{ app()->getLocale() === 'en' ? 'selected' : '' }}>English</option>
           <option value="fr" {{ app()->getLocale() === 'fr' ? 'selected' : '' }}>French</option>
       </select>
   </form>

5. Добавьте маршрут для обработки переключения языков:

В вашем файле маршрутов web.php добавьте маршрут для обработки запроса на переключение языка:

Route::post('/language', function (Illuminate\Http\Request $request) {
       $request->validate([
           'locale' => 'required|string|in:en,fr',
       ]);

       session(['locale' => $request->locale]);

       return redirect()->back();
   });

6. Запустите сервер разработки Laravel:

Запустите следующую команду в каталоге вашего проекта:

php artisan serve

Теперь, когда вы получаете доступ к представлению своего пользовательского приложения CRUD, строки будут отображаться на выбранном языке. При изменении выбора языка представление будет обновляться соответствующим образом.

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

Итого.js:

Total.js — это полнофункциональная среда JavaScript, которую можно использовать для разработки веб-приложений, особенно приложений реального времени и/или приложений на основе микросервисов. Когда дело доходит до локализации, у него также есть встроенные функции локализации, такие как Laravel, но более продвинутые и чрезвычайно быстрые. Вот некоторые преимущества Механизма локализации Total.js.

Отличный и гениальный механизм локализации.
отсутствие зависимости
Вы можете сгенерировать словарь локализации непосредственно из исходного кода.
Предлагает гибкость для создания и обновления словаря перевода через интерфейс командной строки.
Платформа локализует представления и статические файлы .html во время компиляции, поэтому она быстро обрабатывается.
Каждый переведенный вид хранится в памяти
Локализация применяется ко всем статическим файлам .html и views
Текст для перевода заключен в разметку @(Text to translate)

Инициализация

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

/definitions/localization.js:

LOCALIZE(function(req, res) {
    // if "query.language" will be undefined then the framework uses default resource
    return req.query.language;
});

также язык можно изменить в controller.language = 'en'

Файлы языковых ресурсов (словари)

Сначала установите Total.js как глобальный модуль через $ npm install -g total4, потому что NPM регистрирует инструменты командной строки Total.js и помощники терминала.

Создание файла ресурсов

Откройте терминал и напишите:

$ cd myapp
$ total4 --translate

Вывод будет таким:

// Total.js translation file
// Created: 2020-12-04 10:32

// index.html
T1c4854        : Title
T1y5ksfx       : Hello world!
Tpfol3         : Total.js is web application framework for Node.js

// IMPORTANT: This line was created manually
message        : Direct reading

Total.js находит все тексты для перевода и создает файл ресурсов translate.resource для перевода. Ключи в файле ресурсов представляют собой хэши из-за производительности и потребления памяти. Скопируйте файл: /resources/fr.resource и переведите его, например:

// Total.js translation file
// Created: 2020-12-04 10:32

// index.html
T1c4854        : Titre
T1y5ksfx       : Bonjour tout le monde!
Tpfol3         : Total.js est un framework web pour Node.js

// IMPORTANT: This line was created manually
message        : Lecture direct

Локализация в представлениях

@{meta('@(Title)')}

<h1>@(Hello world!)</h1>
<p>@(Total.js is web application framework for Node.js)</p>

<!-- READS THE TITLE DIRECTLY FROM THE RESOURCE FILE -->
<!-- YOU CAN USE OWN CUSTOM KEY -->
<div>@(#message) or @(#T1c4854) is same as @(Title) (read below)</div>

Применение

Запустите приложение $ node index.js и посетите:

http://127.0.0.1:8000/:

...
...
    <title>Title</title>
...
...
    <h1>Hello world!</h1>
    <p>Total.js is web application framework for Node.js</p>
    <div>Direct reading or Title is same as Title (read below)</div>
...
...

http://127.0.0.1:8000/?language=fr:

...
...
    <title>Titre</title>
...
...
    <h1>Bonjour tout le monde</h1>
    <p>Total.js je webový framework pre Node.js</p>
    <div>La lecture directe est la meme que le Titre</div>
...
...

Пример

Создать приложение

Давайте создадим проект и установим Total.js

mkdir users-crud && cd users-crud
npm init -y
npm install total4

создать index.js

// /index.js
require('total4/debug')({ port: 5000 });

Инициализировать обработчик локализации

Локализация может быть объявлена в файле определения

// /definitions/localization.js
// via LOCALIZE(fn);
LOCALIZE(function (req, res) {
    var lang = 'en'; // default
    
    // From connected user session
    // if (req.user)
    //     lang = req.user.language
    
    // From query params
    if (req.query.language)
        lang = req.query.language
        
        
    return lang;
});

Создание конечных точек в контроллере

// /controllers/default.js

exports.install = function() {
    ROUTE('GET /', home);
};

function home() {
    var self = this;

    self.view('index');
}

Создание представлений

@{layout('')}
    <!DOCTYPE html>
           <html lang="@{controller.language}">
       <head>
           <meta charset="UTF-8">
           <title>@(Title)</title>
       </head>
       <body>
           <h1>@(Welcome to the users page)</h1>
           <ul>
               <li><a href="/create">@(Create)</a></li>
               <li><a href="/read">@(Read)</a></li>
               <li><a href="/update">@(Update)</a></li>
               <li><a href="/delete">@(Delete)</a></li>
           </ul>
       </body>
   </html>

Создание файлов локализации

Не забудьте сначала установить Total.js как глобальный модуль $ npm install -g total4, потому что NPM регистрирует помощники терминала/командной строки Total.js.

Создание файла ресурсов

Откройте терминал и напишите:

$ cd users-crud
$ total4 --translate

Вывод будет:

// /transalate.resource
// Total.js translation file
// Created: 2023-07-06 02:08

// views/index.html
T1c4854        : Title
T10fad25       : Welcome to the users page
Txijsik        : Create
T1ii7q         : Read
T1608rft       : Update
Txskn2j        : Delete

Содержимое этого /translate.resource можно перевести на любой язык, который вы хотите.

Просто скопируйте файл /translate.resource в папку /resources/.

Пример для французского языка:

Скопируйте /translate.resource в /resources/fr.resource и сделайте необходимые переводы.

// Total.js translation file
// Created: 2023-07-05 05:02

// views/index.html
T1c4854        : Titre
T10fad25       : Bienvenu a la page des utilisateurs
Txijsik        : Creer
T1ii7q         : Afficher
T1608rft       : Modifier
Txskn2j        : Supprimer

Таким образом, в то время как Express.js обеспечивает гибкость для реализации локализации с использованием различных библиотек, Laravel выделяется своей всеобъемлющей встроенной поддержкой локализации. Total.js явно имеет самый продвинутый, полный и быстрый механизм локализации, поскольку он может даже поддерживать запись строки перевода в любом месте исходного кода, таким образом, даже Rest API, вывод ошибок может быть локализован без каких-либо проблем. Но, в конце концов, при выборе платформы для локализации учитывайте конкретные требования вашего проекта, стек разработки и необходимый уровень поддержки локализации.

Локализация: сравнительный анализ Express.js, PHP Laravel и Total.js

Обзор

Экспресс.js:

Плюсы:

Минусы:

Пример

1. Установите необходимые зависимости:

2. Создайте папку с именем locales в корневом каталоге вашего проекта.

3. Настройте Express.js и промежуточное ПО локализации в вашем app.js или основном файле приложения:

4. Создайте файл index.ejs в папке «views» со следующим содержимым:

5. Запустите свой сервер Express.js:

PHP Ларавель:

Плюсы:

Минусы:

Пример

1. Настройте локализацию Laravel:

2. Создайте языковые файлы:

3. Используйте локализацию в представлении:

4. Обновляйте язык динамически:

5. Добавьте маршрут для обработки переключения языков:

6. Запустите сервер разработки Laravel:

Итого.js:

Инициализация

Файлы языковых ресурсов (словари)

Локализация в представлениях

Применение

Пример

Создать приложение

Инициализировать обработчик локализации

Создание конечных точек в контроллере

Создание представлений

Создание файлов локализации

Вопросы по теме

3. Настройте Express.js и промежуточное ПО локализации в вашем `app.js` или основном файле приложения:

4. Создайте файл `index.ejs` в папке «views» со следующим содержимым: