Frontend vs backend localization strategy comparison

Question

I am developing an application based on Sails JS backend and Web and Mobile frontends. My plans for the frontend frameworks are:

• Web fronend - AngularJS + Bootstrap
• Mobile frontend - AngularJS + Ionic with later port from Apache Cordova

With regards to the above brief explanation, I have to add a localization feature to the application. And this is where my question arises - since both Sails JS and AngularJS support localization, which one to pick up for my project?

Theoretically, I can have:

1. complete backend localization - I will use build in Sails JS capabilities and will put all localized resources as json files to the backend
2. complete frontend localization - I could add AngularJS add-on and localize interfaces on the frontend or
3. mixing backend and frontend localizations.

I would appreciate it if people with more hands-on experience elaborate on the topic, considering application architecture, and give me some enlightenment for possible pros / cons of the available options.

Answer 1

I prefer something like 1.

We are working on a pretty huge Angular.js SPA application that has i18n support as well. First we were using complete frontend localization (if I remember correct this one)

But when application got bigger and bigger, it became a hassle to manage i18n files, loading them into page (and you only need to load the needed strings because i18n file it is huge!) etc etc.

Also, user will change language rarely, it doesn't need to be dynamic, fast, two way bound or anything else. It's OK if we reload whole app.

So we thought why? We don't need i18n in frontend. We need i18n in our "app". Then, I wrote a build system on node.js, basically it is a preprocessor that parses all *.html and *.js files we have, extracts strings from them, looks them up using an i18n file, puts the localized string and creates copies of files per language count.

So basically, we create n apps instead of 1, all programmatically generated, each one is in a different language.

It works pretty well. When user changes language, we reload page and include another localized file set, and language is changed!

Sample source html file:

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

Sample js file:

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

After compilation:

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