4

Here is what I intend to build: There is a service providing data with RESTful JSON-only API. The server setup is Python + Flask. There are several clients making use of this API, like a normal web app, mobile-compatible client and a Facebook App.

Now, my assumptions/decisions:

  • I decided on the server providing only data through JSON, thus handing over the presentation completely to the client-side.
  • 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. Feel free to correct me if anything is wrong in above assumptions. Though the above is theoretically possible, I would like to know if the practical implementation is feasible or not.

Now, the web app, after having fetched the base page/template from server, will have to handle the rendering dynamically after fetching data through JSON API. The data is quite simple: multiple-option questions, answering which user receives another question. At the end, user can share the result or invite other users.

With this setup, do I need a framework like angularjs or jQuery would suffice?

My main concern here is how do I handle internationalization? I initially intended to user Flask-Babel to internationalize HTML templates. But having zeroed in on JSON-only API, I don't have a clue as to how/where I handle it now: on client-side or server-side? What are the tools I use for it?

One approach I could think of was to have data in different languages on server itself, and send the JSON response with data in appropriate language, depending on some attribute the client sends in request.

Another approach is to let client do all the translation for a common dataset that server sends. I am not sure of this approach though.

Arafat
  • 1,390
  • 2
  • 12
  • 18
bhootjb
  • 1,501
  • 1
  • 21
  • 33

7 Answers7

1

You could find this plugin really helpful.

As far as the usage , it is quite simple to set it up for a single page application that is powered by a JSON API.

If we take a look at a sample usage :

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 (loaded resource):

{
  "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");
});
Aditya
  • 4,453
  • 3
  • 28
  • 39
0

https://github.com/wikimedia/jquery.i18n may be close match. It can handle a lot of languages and messages are in json files and it is complete client side library.

Santhosh
  • 51
  • 2
0

If all of your interface code lives on the client side, so should your i18n. You would use a i18n library that works with the JavaScript framework you are using. For angular, that might be angular-gettext.

If you are developing several client you might use different i18n libraries in different client applications. Try to make sure they all compile gettext .po files – it will make it easier for your translators.

lyschoening
  • 18,170
  • 11
  • 44
  • 54
0

Although I don't know your technical constraints in detail, I believe it all depends on your volume of data :

  • If you have few "questions / answers" that probably won't evolve much over time, you can treat I18N as constants. Putting everything on the client side makes sense.

  • If you have a big amount of "questions / answers" that will probably evolve, I believe you have to treat I18N as data.

Since you have made a JSON API, the odds are that your Q/A is your data, and it already belongs to your server side.

The real question is : do you want to deliver a new version of your client app everytime you add or correct a question?

That's why I would do this :

One approach I could think of was to have data in different languages on server itself, and send the JSON response with data in appropriate language, depending on some attribute the client sends in request.

edit (precision) : I'm talking about the questions and answers. For the application messages (menus, text, help messages, etc), you should use your client framework's i18n components. The other answers provide a lot of good tools.

Michael Técourt
  • 3,457
  • 1
  • 28
  • 45
0

Your question is too broad. I can only answer part of it and here are some of the answers:

I desire to make the web app mobile compatible, thus eliminating need of a separate mobile client.

In order to make sure that things are working fine you need to handle 

Also, for Facebook app, I decided to use Facebook Canvas, which would render parts of the normal web app, thus reusing the code.

I am not sure.

    With this setup, do I need a framework like angularjs or jQuery would suffice?

As you tagged that you are targeting this as a single page application. Therefore, I would recommend you to go for single page frameworks like Anglarjs, knockout.js or Node.js. A quick and good comparison between these frameworks can be found from here

Also this post shares how to implement Internationalization in Angularjs 

   My main concern here is how do I handle internationalization?

some of these frameworks provide support for handling internationalization and localization natively. For other you can find some links that will help you achieve internationalization.

Whereas if you use jQuery you will to define your own framework for handling single-page-application and apart for that you will need a huge bunch of add-on's to accomplish your objective.

Hope this helps!!!

Community
  • 1
  • 1
Arafat
  • 1,390
  • 2
  • 12
  • 18
0

Using jQuery, Angular, etc. is a decision you should make based on your comfort with the technology, the needs of your application, and compatibility with the Facebook Canvas approach. Angular has powerful data binding, but it requires a mind shift compared to jQuery, for instance, so I suggest poking around with each to see if they meet your needs.

As for internationalization, you can use a plugin like jQuery.i18n, or you could roll your own, something I have done with jQuery and jQuery.Mustache for templating. The short version is that you use HTML templates to store your layout, then render them from inside jQuery like so:

var data = {myLabel: 'Some label', myOtherLabel: 'Some Other Label'};

$("#myDiv")
    .html( $.Mustache.render( "MyTemplateId", data ) );

in html template:

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

and on your page layout:

<div id="myDiv>
    <!-- dynamic content inserted here -->
</div>

You use a loader command with jQuery.Mustache (https://github.com/jonnyreeves/jquery-Mustache) to load your templates from the server, and since you are using templates, you can fill in your values based on user language selection. How you store your internationalized data is dependent on your app. As Michael suggested, if it is a small amount of static content, maybe you just store it all in your JS files as constants and load into your Mustache render() methods as needed. If you have a larger amount/dynamic multilingual content, you should probably store it on the server and load it dynamically. One consideration is the number of languages you plan to support. If you go beyond a handful of languages, consider storing it on the server and loading language data on demand.

I like this approach because it gives you granular, runtime control over your layout and over internationalization. It also stores the data on the server but loads programatically from the client, maintaining a clean separation of concerns for your application layers.

As for responsive/mobile friendly design, using templating (Mustache) and checking the viewport at load time allows you to determine browser capabilities and serve the approrpriate layout without having to prompt the user to select a mobile/desktop experience.

If you go this route, you should also research script loaders like RequireJS and StealJS to handle dependency loading for your scripts, and to handle the initial browser check and layout generation.

Robert Munn
  • 778
  • 7
  • 12
0

Steps to implement i18n via js & json:

  • define css class for i18n tag, e.g. <span class="i18n" id="i18n_username"></span>
  • define i18n values for different language in different .properties file, e.g. in userhome_en_US.properties, there is a key value: username = Username
  • write backend API to load .properties file by language, and return in json key-value format, e.g. send param: lang=en_US, page=userhome to I18nAction -> loadI18n(), then it will return json value via ajax: {"username":"Username"},
  • write js function to load i18n key-value by lang & page param,
  • update i18n text on web page, by get the tag via css class, and replace content, e.g. use jquery to get all span tag that has class="i18n", then remove the i18n_ prefix of the id, then use it as key to get the value from returned json, then replace the content of span,

I did write util programs like this, it's quite flexible & easy to use. The basic concept is come from struts2 framework's i18n feature.

Eric
  • 22,183
  • 20
  • 145
  • 196