2

I've to implement globalization in a phonegap app. Question is if I should go for translation before compiling the app, or translation on run time.


I can go 2 directions:

  1. First one is using a plugin like gulp-i18n-localize to translate the source code into every language I want and then compile every translated source code into different folders (en,sp,it, etc..). And then in the app call the folder I need depending on what I get from navigator.language.
  2. The second one is creating a service that I will be calling every time I load a component or controller, that will translate every word/phrase to the target language before presenting it. Something like: global.trans('Save'). It will also be getting the language from navigator.language.

  • It's an app so there will be no big paragraphs but just words or small sentences used in titles, buttons, labels or messages/alerts.
  • Data will come from the server already in the desired language thanks to a language parameter sent when calling apis.
  • App for sure will have some modifications in the future, so main source code should be centralized to not be having to perform the same changes in several sources cause of different languages every time we go for an update.

Has someone already implemented one of these solutions and has encountered any issue with it? Or has thought about issues that one of these can have or think which should be the best solution? Any other options you can think about?

Only issue I see is that in the first case the apk will grow in size cause will have a "site" per language and that I will have to modify the gulpfile.js every time I want to add a language (Apart from the dictionary). And in the second case it will add some load to the app as it will be translating every word/phrase given (Translating meaning calling the service, and the service searching the dictionary (json) for the word/phrase/language and returning the value, although there's not much to translate per page/screen).

2 Answers 2

2

We recently went through a very similar thought process, and the steps we took and the solution we eventually came to, may be of help to you.

TL;DR

Do this: https://www.positronx.io/angular-internationalization-i18n-with-ngx-translate-tutorial/

Context

We are using ionic/angular/capacitor rather than straight cordova, but I believe that the scenario is very similar.

In my scenario, we have a website-SPA and an Android Mobile App, with a lot of shared code, so naturally we wanted to choose a single approach that worked for both.

What we tried first

I initially had a similar thought process to you which led me to initially using the "build time" localization approach currently espoused by Angular ( https://angular.io/guide/i18n ). This worked OK for the SPA, although it only became feasible with the addition of https://github.com/martinroob/ngx-i18nsupport to allow remerging of the XLIFF files as the application evolved.

A minor drawback was the need to setup an XLIFF-compatible tool to make actually doing the translations, minimally efficient. (We used https://omegat.org/ ).

However once we applied the same solution to the mobile app, serious drawbacks became apparent:

  1. A separate build command (with associated scaffolding in angular.json/package.json ) is required for each locale. Given that we already have different build script variants for different environments and scenarios, this would lead to a "combinatorial explosion" of variants as we add more locales.
  2. A separate APK is produced for each locale, which is a total PITA, and will soon enough become almost impossible to deploy on Google Play ( see plans stated here for making "App Bundles" compulsory).
  3. Capacitor does not play nicely with Angular i18n at build time, as described in detail on this Ionic forum post. Basically your build script has to hack capacitor.config.json for each build.

What we ended up doing

Given all the above, we went back to the drawing board and tried a different approach, basically using @ngx-translate as described in this tutorial.
Although we initially had some concerns about bandwidth/performance, observing the way it works in practice, put these to rest:

  • translations for each language are in a single JSON file which is loaded once - if the app asks for that language. Pure text so compresses nicely on the wire. Request overhead for a single file (in the SPA scenario) about 400 bytes.
  • our SPA is served from an S3 bucket, and with a CDN (CloudFront in our case), that bucket is served from an edge node hopefully pretty close to the client device. In the APK scenario, the language files are already on the device.
  • in both scenarios switching language is very fast, close to instantaneous even at the moment of the initial load of the new language file.

Leaving aside performance, there were other benefits:

  • the library takes advantage of Angular's Pipe scaffolding to make the syntax for translating labels in your .html files, quite clean
  • the JSON translation files are editable with a text-editor, and the syntax is so obvious that even a non-programmer can edit - unlike XLIFF files
  • only ONE BUILD VARIANT and ONE APK - hooray: this build contains all languages
  • compiled APK is actually a bit smaller than with the previous approach, perhaps because the tooling is lighter
  • no need to regenerate and re-merge the master XLIFF file every time your app changes its labels.

Version info:

"@angular/core": "^9.1.12",
"@ionic/angular": "^5.3.2"
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
3
  • UPDATE: @federico-massi 's comment below, however I would like to point out a few things... Re 1. and 3. Data transfer time is minimal... JSON is compressed over the wire by modern browsers if it is at all large. Often the total size of the Request headers exceeds the size of the file! 2. Good point - we may release an offline version of our app in Q3, in that case we will first look for a way to preload+cache the translation files - allows a single dev workflow for online and offline translation.
    – marracuene
    Apr 27, 2021 at 11:31
  • This doesn't really work when the translation files are getting big, because the app is getting too big and you want to split them into a per-module basis. We've tried but ngx-translate doesn't support this - it kind of does but it's buggy at best. In any case, ngx-translate is no longer being maintained. The only viable options are i18next, transloco and angular's way.
    – nCr78
    Jan 19 at 15:08
  • @nCr78 I agree that big files can be a challenge. We order the keys alphabetically and also break them into groups - but indeed this is a convention. JSON as a fileformat doesn't support comments or neat structuring. Indeed its a pity about the maintenance - 29 PRs waiting for review! We're using it with Angular 12, haven't hit any bugs - but could be because we only use a subset of its features.
    – marracuene
    Jan 20 at 15:45
0

If the app is designed to work also offline, it would be surely better to have a translation as in your Case 1.

  1. It would save data transfer and loading time at the cost of a few Kb;
  2. the app could communicate relevant information in correct language when offline;
  3. it will improve user experience by giving a faster and fluid rendering of internationalized (and so, understandable by everyone) user interface.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.