All geek questions in one place

Infrastructure and internationalization of web applications (s) using only the JSON API

Here's what I'm going to build: There is a service that provides data using RESTful JSON- only an API. Server setup Python+ Flask. There are several clients using this API, for example, a regular web application, a mobile compatible client, and a Facebook application.

Now my assumptions / solutions:

  • I decided on the server to provide only data through JSON, thus completely transmitting the presentation on the client side.
  • I want to make a mobile application for web applications compatible, thereby eliminating the need for a separate mobile client.
  • Also, for the Facebook application, I decided to use Facebook Canvas, which will display parts of a regular web application, thus reusing the code. Feel free to correct me if something is wrong with the above assumptions. Although theoretically this is possible, I would like to know whether practical implementation is possible or not.

Now the web application after receiving the base page / template from the server will have to dynamically process the rendering after retrieving the data through the API JSON. The data is pretty simple: multiple-choice questions to which the user receives another question. At the end, the user can share the results or invite other users.

With this setting, do I need a framework like angularjsor jQuery?

, ? Flask-Babel HTML-. , API JSON, , / : ? ?

, , , JSON , , .

, . .

+4
7

.

, API JSON.

:

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");
});
+1

, , i18n. i18n, JavaScript. angular angular-gettext.

, i18n . , gettext.po - .

0

, , :

  • "/", , , , I18N . .

  • "/", , , , , I18N .

JSON API, , Q/A - , .

: , ?

:

, , , JSON , , .

(): . (, , ..) i18n. .

0

. , :

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, , , , .

, !!!

0

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>

loader jQuery.Mustache(https://github.com/jonnyreeves/jquery-Mustache), , , . , . , , , JS Mustache render() . / , . , . , .

, . , , .

/ , (Mustache) , / .

, script, RequireJS StealJS, .

0

i18n js json:

  • css i18n, . <span class="i18n" id="i18n_username"></span>
  • i18n .properties, . userhome_en_US.properties : username = Username
  • backend API .properties json key-value, . param: lang=en_US, page=userhome I18nAction -> loadI18n(), json ajax: {"username":"Username"},
  • js i18n lang page,
  • i18n -, css , . jquery span class="i18n", i18n_ , json, ,

I wrote programs like this, it is quite flexible and easy to use. The basic concept is taken from the struts2 framework i18n function.

0
source

Source: https://habr.com/ru/post/1534795/

More articles:


All Articles