Best practice for localization and globalization of strings and labels

Question

I m a member of a team with more than 20 developers  Each developer works on a separate module  something near 10 modules   In each module we might have at least 50 CRUD forms  which means that we currently have near 500 add buttons  save buttons  edit buttons  etc   However  because we want to globalized our application  we need to be able to translate texts in our application  For example  everywhere  the word add should become ajouter for French users   What we ve done till now  is that for each view in UI or Presentation Layer  we have a dictionary of key value pairs of translations  Then while rendering the view  we translate required texts and strings using this dictionary  However  this approach  we ve come to have something near 500 add in 500 dictionaries  This means that we ve breached DRY principal   On the other hand  if we centralize common strings  like putting add in one place  and ask developers to use it everywhere  we encounter the problem of not being sure if a string is already defined in the centralized dictionary or not   One other options might be to have no translation dictionary and use online translation services like Google Translate  Bing Translator  etc   Another problem that we ve encountered is that some developers under the stress of delivering the project on-time can t remember the translation keys  For example  for the text of the add button  a developer has used add while another developer has used new  etc   What is the best practice  or most well-known method for globalization and localization of string resources of an application

User · Answer

jQuery i18n is a lightweight jQuery plugin for enabling internationalization in your web pages  It allows you to package custom resource strings in     properties    files  just like in Java Resource Bundles  It loads and parses resource bundles   properties  based on provided language or language reported by browser   to know more about this take a look at the How to internationalize your pages using JQuery

User · Answer

As far as I know  there s a good library called localeplanet for Localization and Internationalization in JavaScript  Furthermore  I think it s native and has no dependencies to other libraries  e g  jQuery      Here s the website of library  http   www localeplanet com   Also look at this article by Mozilla  you can find very good method and algorithms for client-side translation  http   blog mozilla org webdev 2011 10 06 i18njs-internationalize-your-javascript-with-a-little-help-from-json-and-the-server   The common part of all those articles libraries is that they use a i18n class and a get method  in some ways also defining an smaller function name like    for retrieving converting the key to the value  In my explaining the key means that string you want to translate and the value means translated string  Then  you just need a JSON document to store key s and value s   For example   var     document webL10n get  alert    test       And here the JSON     test   blah blah      I believe using current popular libraries solutions is a good approach

User · Answer

When you   re faced with a problem to solve  and frankly  who isn   t   these days    the basic strategy usually taken by we computer people   is called    divide and conquer     It goes like this          Conceptualize the specific problem as a set of smaller sub-problems    Solve each smaller problem    Combine the results into a solution of the specific problem           But    divide and conquer    is not the only possible strategy  We can also take a more generalist approach          Conceptualize the specific problem as a special case of a more general problem    Somehow solve the general problem    Adapt the solution of the general problem to the specific problem          - Eric Lippert   I believe many solutions already exist for this problem in server-side languages such as ASP Net C     I ve outlined some of the major aspects of the problem   Issue  We need to load data only for the desired language  Solution  For this purpose we save data to a separate files for each language   ex  res de js  res fr js  res en js  res js for default language    Issue  Resource files for each page should be separated so we only get the data we need  Solution  We can use some tools that already exist like https   github com rgrove lazyload Issue  We need a key value pair structure to save our data  Solution  I suggest a javascript object instead of string string air  We can benefit from the intellisense from an IDE Issue  General members should be stored in a public file and all pages should access them  Solution  For this purpose I make a folder in the root of web application called  Global Resources and a folder to store global file for each sub folders we named it  Local Resources  Issue  Each subsystems subfolders modules member should override the Global Resources members on their scope  Solution  I considered a file for each   Application Structure   root      Global Resources          default js         default fr js     UserManagementSystem          Local Resources              default js             default fr js             createUser js         Login htm         CreateUser htm    The corresponding code for the files   Global Resources default js  var res         Create    Create       Update    Save Changes       Delete    Delete       Global Resources default fr js  var res         Create    cr  er       Update    Enregistrer les modifications       Delete    effacer       The resource file for the desired language should be loaded on the page selected from Global Resource - This should be the first file that is loaded on all the pages   UserManagementSystem Local Resources default js  res Name    Name   res UserName    UserName   res Password    Password     UserManagementSystem Local Resources default fr js  res Name    nom   res UserName    Nom d utilisateur   res Password    Mot de passe     UserManagementSystem Local Resources createUser js     Override res Create on Global Resources default js res Create    Create User      UserManagementSystem Local Resources createUser fr js     Override Global Resources default fr js res Create    Cr  er un utilisateur     manager js file  this file should be load last   res lang    fr    var globalResourcePath    Global Resources   var resourceFiles        var currentFile   globalResourcePath      default    res lang     js     if  IsFileExist currentFile       currentFile   globalResourcePath      default js    if  IsFileExist currentFile   throw new Exception  File Not Found     resourceFiles push currentFile       Push parent folder on folder into folder foreach var folder in parent folder of current page        currentFile   folder      Local Resource  default     res lang     js        if  IsExist currentFile           currentFile   folder      Local Resource  default js       if  IsExist currentFile   throw new Exception  File Not Found         resourceFiles push currentFile      for int i   0  i  lt  resourceFiles length  i      Load js resourceFiles i          Get current page name var pageNameWithoutExtension    SomePage    currentFile   currentPageFolderPath   pageNameWithoutExtension   res lang     js     if  IsExist currentFile       currentFile   currentPageFolderPath   pageNameWithoutExtension     js    if  IsExist currentFile   throw new Exception  File Not Found      Hope it helps

[javascript] Best practice for localization and globalization of strings and labels

Examples related to javascript

Examples related to localization

Examples related to translation

Examples related to client-side

Examples related to globalization