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

Question

我正在开发基于Sails JS后端和Web和Mobile前端的应用程序.我对前端框架的计划是:

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

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

从理论上讲,我可以:

1. 完整的后端本地化 - 我将使用Sails JS功能构建,并将所有本地化资源作为json文件放到后端
2. 完整的前端本地化 - 我可以在前端或上添加AngularJS附加组件和本地化接口
3. 混合后端和前端本地化.

如果有更多实践经验的人详细讨论该主题,我会很感激,考虑应用程序架构,并对可用选项的可能优缺点给出一些启示.

Answer 1

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

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

但是当应用程序越来越大时，管理 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")); }
    }
  })

编译后：

源文件.en.html

<header>Hello {{name}}</header>

源.tr.html

<header>Merhaba {{name}}</header>

示例.en.js

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

示例.tr.js

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

Answer 2

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

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

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