前端与后端本地化策略比较

Posted 2023-02-19

【中文标题】前端与后端本地化策略比较

【英文标题】：Frontend vs backend localization strategy comparison

【发布时间】：2015-04-28 11:27:21

【问题描述】：

我正在开发一个基于 Sails JS 后端和 Web 和移动前端的应用程序。我对前端框架的计划是：

Web 前端 - AngularJS + Bootstrap 移动前端 - AngularJS + Ionic 以及后来的 Apache Cordova 端口

关于上面的简要说明，我必须在应用程序中添加一个本地化功能。这就是我的问题出现的地方 - 因为 Sails JS 和 AngularJS 都支持本地化，我的项目应该选择哪一个？

理论上，我可以：

完整的后端本地化 - 我将使用内置 Sails JS 功能并将所有本地化资源作为 json 文件放到后端 完整的前端本地化 - 我可以添加 AngularJS 插件并在前端本地化接口或 混合后端和前端本地化。

如果有更多实践经验的人详细说明该主题，考虑应用程序架构，并就可用选项的可能优缺点给我一些启发，我将不胜感激。

【参考方案1】：

我更喜欢后端本地化，因为：

我仍然觉得 angular i18n 还不够成熟，无法处理所有本地化用例，例如无代码翻译（直到 angular 8）。到现在为止最好 对于静态数据，但不适用于动态数据（来自服务器端的错误）。如果我们使用占位符，我们的静态数据中的多元化，所以它很复杂 理解其翻译文件，无法翻译材料、ng bootstrap 等库。

如果我们使用后端本地化，也许我们不会解决所有这些情况，而且用户几乎不会更改他们的语言环境，因此可以重新加载一次应用程序（尽管使用 angular i18n 我们仍然需要重新-在运行时引导应用程序）

【参考方案2】：

我更喜欢前端本地化。 在后端，您可以抛出任何包含异常代码和英文解释的异常 - 这些是针对开发人员的。在前端，您可以根据从后端获得的代码或基于前端的架构逻辑，为每种本地化语言使用每个 JSON（或其他）文件。

为什么我发现前端本地化更好 - 因为前端更接近用户那个后端，您可以向他提供一批文件，其中包含一个他的语言本地化文件。由于前端应用程序可以在他的一个应用程序中调用多个后端操作，甚至可以从多个服务（内部或外部）调用消息的本地化是多余的，因为用户必须获得任何可理解和用户忠诚的消息（但不是任何像“无法将数据插入表”或“外部服务器无法回答”） - 您忽略该消息并提供您的消息。更多的是——现在的后端是为了与许多其他服务（而不是人）联系而编写的，而且本地化在这里是多余的，因为每个开发人员都懂英语。

【参考方案3】：

我更喜欢像 1 这样的东西。

我们正在开发一个非常庞大的 Angular.js SPA 应用程序，它也支持 i18n。首先我们使用的是完整的前端本地化（如果我没记错的话this one）

但是当应用程序变得越来越大时，管理 i18n 文件、将它们加载到页面中变得很麻烦（而且您只需要加载所需的字符串，因为 i18n 文件很大！）等等。

另外，用户很少会改变语言，它不需要是动态的、快速的、双向绑定的或其他任何东西。如果我们重新加载整个应用程序就可以了。

所以我们想为什么？我们在前端不需要 i18n。我们的“应用程序”中需要 i18n。然后，我在 node.js 上编写了一个构建系统，基本上它是一个预处理器，它解析我们拥有的所有 *.html and *.js 文件，从中提取字符串，使用 i18n 文件查找它们，放置本地化字符串并为每个文件创建文件副本语言计数。

所以基本上，我们创建 n 应用程序而不是 1 个，所有这些都是以编程方式生成的，每个应用程序都使用不同的语言。

效果很好。当用户更改语言时，我们会重新加载页面并包含另一个本地化文件集，然后更改语言！

示例源 html 文件：

<header>@message("string.to.be.localized.1"i "name")</header>

示例 js 文件：

angular.module("app", [])
  .directive("x", function(i18n) 
    return 
      templateUrl: "@HTML/templates/a.html",
      link: function()  console.log(i18n("string.in.js", "Umut")); 
    
  )

编译后：

source.en.html

<header>Hello name</header>

source.tr.html

<header>Merhaba name</header>

sample.en.js

angular.module("app", [])
  .directive("x", function(i18n) 
    return 
      templateUrl: "/templates/a.en.html",
      link: function()  console.log("Hello 0", "Umut")); 
    
  )

sample.tr.js

angular.module("app", [])
  .directive("x", function(i18n) 
    return 
      templateUrl: "/templates/a.tr.html",
      link: function()  console.log("Merhaba 0", "Umut")); 
    
  )

【讨论】：

为什么不将可翻译单词/句子的集合和子集拆分为 JSON 文件，以便在批量修改包含大量单词/句子的语言集时轻松编辑它们。例如“sample.tr.js”对于那种场景来说似乎不太舒服。 （如果我理解正确你的例子）。