[英]Infrastructure and internationalization for web app(s) using JSON only API
这是我打算构建的：有一个服务提供REST ful JSON -only API的数据。 服务器设置是Python + Flask 。 有几个客户使用此API，如普通的网络应用程序，移动兼容的客户端和Facebook应用程序。
现在，我的假设/决定：
JSON提供数据，从而将演示文稿完全交给客户端。 现在，web服务器从服务器获取基页/模板后，必须在通过JSON API获取数据后动态处理呈现。 数据非常简单：多选项问题，回答哪个用户收到另一个问题。 最后，用户可以共享结果或邀请其他用户。
有了这个设置，我需要像angularjs或jQuery这样的框架吗？
我主要关注的是如何处理国际化？ 我最初打算使用Flask-Babel来国际化HTML模板。 但是我已经专注于仅使用JSON的API，我现在没有关于如何/在何处处理它的线索：在客户端或服务器端？ 我用它的工具是什么？
我能想到的一种方法是在服务器本身上使用不同语言的数据，并使用适当语言的数据发送JSON响应，具体取决于客户端在请求中发送的某些属性。
另一种方法是让客户端为服务器发送的公共数据集执行所有转换。 我不确定这种做法。
你会发现这个插件真有帮助。
就使用情况而言，为由JSON API提供支持的单页应用程序设置它非常简单。
如果我们看一下样本用法：
HTML：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="[PATH]/jquery.js" /> // optional
<script type="text/javascript" src="[PATH]/i18next.js" />
</head>
<body>
<ul class="nav">
<li><a href="#" data-i18n="nav.home"></a></li>
<li><a href="#" data-i18n="nav.page1"></a></li>
<li><a href="#" data-i18n="nav.page2"></a></li>
</ul>
</body>
Json（加载资源）：
{
"app": {
"name": "i18next"
},
"nav": {
"home": "Home",
"page1": "Page One",
"page2": "Page Two"
}
}
JS：
i18n.init(function(t) {
// translate nav
$(".nav").i18n();
// programatical access
var appName = t("app.name");
});
https://github.com/wikimedia/jquery.i18n可能是匹配的。 它可以处理很多语言和消息在json文件中，它是完整的客户端库。
如果您的所有接口代码都存在于客户端，那么您的i18n也应如此。 您将使用与您正在使用的JavaScript框架一起使用的i18n库。 对于角度，可能是angular-gettext 。
如果您正在开发多个客户端，则可以在不同的客户端应用程序中使用不同的i18n库。 尽量确保他们都编译gettext .po文件 - 这将使您的翻译更容易。
虽然我不太详细了解您的技术限制，但我相信这一切都取决于您的数据量：
如果您的“问题/答案”很少，可能不会随着时间的推移而发展很多，您可以将I18N视为常数 。 把一切都放在客户端是有道理的。
如果你有大量的“问题/答案”可能会发展，我相信你必须将I18N视为数据 。
由于您已经制作了JSON API，因此您的Q / A是您的数据，并且它已经属于您的服务器端。
真正的问题是： 您是否希望每次添加或更正问题时都提供新版本的客户端应用程序？
这就是为什么我会这样做：
我能想到的一种方法是在服务器本身上使用不同语言的数据，并使用适当语言的数据发送JSON响应，具体取决于客户端在请求中发送的某些属性。
编辑（精确）：我在谈论问题和答案。 对于应用程序消息（菜单，文本，帮助消息等），您应该使用客户端框架的i18n组件。 其他答案提供了很多好的工具。
你的问题太宽泛了。 我只能回答部分内容，以下是一些答案：
I desire to make the web app mobile compatible, thus eliminating need of a separate mobile client.
为了确保工作正常，你需要处理
Also, for Facebook app, I decided to use Facebook Canvas, which would render parts of the normal web app, thus reusing the code.
我不确定。
With this setup, do I need a framework like angularjs or jQuery would suffice?
当您标记为将其定位为单页应用程序时。 因此，我建议您使用Anglarjs，knockout.js或Node.js等单页框架。 从这里可以找到这些框架之间的快速和良好的比较
同时此后的股如何实现Angularjs国际
My main concern here is how do I handle internationalization?
其中一些框架为本地处理国际化和本地化提供了支持。 对于其他人，您可以找到一些有助于实现国际化的链接。
然而，如果你使用jQuery，你将定义自己的框架来处理单页面应用程序，除此之外，你需要一大堆附加组件来实现你的目标。
希望这可以帮助！！！
使用jQuery，Angular等是您应该根据您对技术的满意度，应用程序的需求以及与Facebook Canvas方法的兼容性做出的决定。 Angular具有强大的数据绑定功能，但与jQuery相比，它需要进行思维转换，因此我建议每个人都在寻找它们以确定它们是否满足您的需求。
至于国际化，你可以使用像jQuery.i18n这样的插件，或者你可以使用jQuery和jQuery.Mustache进行模板操作。 简短的版本是您使用HTML模板来存储您的布局，然后从jQuery内部渲染它们，如下所示：
var data = {myLabel: 'Some label', myOtherLabel: 'Some Other Label'};
$("#myDiv")
.html( $.Mustache.render( "MyTemplateId", data ) );
在html模板中：
<script type="text/html" id="MyTemplateId">
<div>
<label for="myInput">{{MyLabel}}</label> <input name="myInput" id="myInput type="text"/>
<label for="myOtherInput">{{MyOtherLabel}}</label> <input name="myOtherInput" id="myOtherInput type="text"/>
</div>
并在您的页面布局上：
<div id="myDiv>
<!-- dynamic content inserted here -->
</div>
您使用带有jQuery.Mustache（ https://github.com/jonnyreeves/jquery-Mustache ）的loader命令从服务器加载模板，并且由于您使用模板，您可以根据用户语言选择填写您的值。 如何存储国际化数据取决于您的应用。 正如迈克尔建议的那样，如果它是少量静态内容，也许您只需将它作为常量存储在JS文件中，并根据需要加载到您的Mustache render（）方法中。 如果您有更大的数量/动态多语言内容，您应该将其存储在服务器上并动态加载它。 一个考虑因素是您计划支持的语言数量。 如果您超越了少数几种语言，请考虑将其存储在服务器上并按需加载语言数据。
我喜欢这种方法，因为它为您提供了对布局和国际化的精细运行控制。 它还将数据存储在服务器上，但以编程方式从客户端加载，从而保持应用程序层关注点的清晰分离。
对于响应/移动友好设计，使用模板（Mustache）并在加载时检查视口允许您确定浏览器功能并提供适当的布局，而无需提示用户选择移动/桌面体验。
如果你走这条路，你还应该研究像RequireJS和StealJS这样的脚本加载器来处理脚本的依赖加载，并处理初始的浏览器检查和布局生成。
通过js和json实现i18n的步骤：
<span class="i18n" id="i18n_username"></span> username = Username lang=en_US, page=userhome到I18nAction -> loadI18n() ，然后它将通过ajax返回json值： {"username":"Username"} ， class="i18n"所有span标签，然后删除id的i18n_前缀，然后将其用作键从返回的json中获取值，然后替换span的内容， 我写过像这样的util程序，它非常灵活且易于使用。 基本概念来自struts2框架的i18n功能。
使用 vue-i18n 从 API 服务器获取 JSON 对象的 Vue.js 中的国际化
[英]Internationalization in Vue.js using vue-i18n getting JSON Object from API server
使用 Moment 或 Internationalization API 时更正时区列表
[英]Correct timezone list when using Moment or Internationalization API
Gatsby 和 React Context API：使用 Context 设置国际化语言
[英]Gatsby & React Context API: Using Context to set languages for internationalization
使用javascript和ORM仅使用json数据构建Web应用
[英]Building the web app with json only data with javascript and ORM
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.