Imagine a busy workplace at an international company. In the midst of it is Sarah, our protagonist, a dedicated professional and a team lead. She and her team get the task of developing a web application that caters to a diverse customer base across various languages, cultures, and regions. As Sarah immerses herself in the project, she realizes that reaching a global audience is far from an easy task.

In this article, we, along with Sarah, will embark on a journey to get to know the world of the localization process, from planning to implementation. We’ll explore the challenges Sarah encounters and the solutions she discovers to create a successful localized web application.

Part 1. Understanding Locales and Key Considerations for Effective Localization

Locales are settings that encompass a wide range of cultural, linguistic and regional preferences of users. They are not just about language, but also about things like date and time, numbering schemes, currency symbols, and so on.

One of the primary considerations when it comes to locales is language. For Sarah’s team, it’s essential to design an interface that can be easily translated and localized.

Another important aspect of locales is the formatting of dates and times. Different regions have their own conventions for displaying dates and time. Developers need to ensure that dates and times are displayed correctly and consistently in the application.

The number system is another critical consideration. Front-end developers need to be aware of decimal separators, thousand separators and currency symbols used in different locales.

In addition, it is equally important to consider the visual representation of locales. This includes adapting color schemes, images and iconography to suit different cultural contexts. It’s crucial to avoid using visuals that may be offensive or misunderstood in certain regions.

Part 2. The Importance of Localization

Localization is one of the keys to unlock the full potential of the app in the global market. It involves adapting the app to meet the linguistic, cultural and functional requirements of specific locales. By embracing localization, Sarah ensures that users from different regions can interact with her app seamlessly. Attention to details enhances user engagement, trust and satisfaction. When users come across content that aligns with their cultural and linguistic preferences, they feel a sense of familiarity and relevance. This, in turn, helps establish a deeper connection with the app.

When Sarah localizes her app for Europe, she considers various factors. Firstly, she ensures that her app supports the major European languages like English, Spanish, French, German, and Italian. Additionally, Sarah’s team adjusts the date format to the European standard, where the day comes before the month. To maintain consistency with user expectations, they also modify the time format to the 24-hour clock commonly used in Europe.

On the other hand, when Sarah customizes her app for North America, she focuses on meeting the expectations of users in the United States and Canada. The app includes English and French (for Canadian users) language options. Sarah and her team make sure to follow the American convention for the date format and adopt the 12-hour clock format with AM and PM indicators.

By implementing these localization aspects specific to Europe and North America, Sarah creates an app that truly caters to the users.

Part 3. Leveraging Ready-Made Solutions for Effective Localization

How can the localization part of the development process be simplified? The answer is to use ready-made solutions. This approach offers many benefits that streamline the localization process.

Let’s talk about what Webix has to offer to help Sarah.

First, translated controls and widgets. Webix includes localization features for controls and complex widgets. All the UI elements with built-in labels, such as buttons, menus, etc., are already translated into multiple languages. They are also available for editing or creating new translations.The Webix library also provides predefined methods for number and date formatting. Therefore, there is no need to manually handle every element, and Sarah’s team can focus on other aspects of the app.

Second, extensive locale support. The standard package of the Webix library includes 10 locales, namely:

• “en-US” – North American (used by default),
• “ru-RU” – Russian,
• “fr-FR” – French,
• “ja-JP” – Japanese,
• “be-BY” – Belarusian,
• “de-DE” – German,
• “es-ES” – Spanish,
• “it-IT” – Italian,
• “zh-CN” – Chinese,
• “pt-BR” – Portuguese (Brazil).

Webix Pro goes even further. It provides access to three hundred locales, offering comprehensive coverage of different regions. By using built-in locales, Sarah eliminates the need to create translations from scratch, saving time and resources.

Third, the implementation of dynamic language switching. Users can switch languages on the go, allowing them to instantly switch between different localized versions of the app. It creates a personalized and user-centric experience.

Overall, Sarah’s decision to use a ready-made solution makes the localization process easier to manage and ensures consistency. Her team can focus on optimizing her web application’s functionality while seamlessly communicating with a global audience with Webix.

Part 4. Working with Locales in Webix

Now that we’ve had a look at how Webix can help with localization, let’s have a look at the practical side of things.

In the Webix library, the main API part for localization is the webix.i18n module. It contains the following parts:

• method for changing the global locale
• labels and formats of the active locale
• all other available locales of the core UI library(including translated labels and date/number formats)
• out-of-the-box methods for formatting dates and numbers.

The webix.Date and webix.Number mixins contain some specific localization methods, e.g. for converting strings to dates or numbers according to the given format.

The default locale in Webix is set to “en-US”. It can be changed for a project by using the setLocale() method and providing the desired locale name as a parameter. Common language tags (BCP 47 codes) are used for the naming of the locales. For example, the French locale can be set as follows:

Webix also allows customization of parameters for the current locale. For example, to change the full date format (displayed in Datepicker and other widgets), the webix.i18n.fullDateFormat property should be modified. After setting the new format, the changes are applied by calling the setLocale() method:

Check out the related sample to see how it works.

As for complex widgets, localized titles are stored in a dedicated object that belongs to a particular widget. For example, let’s take Document Manager. For this particular widget it would be docManager.locales object.

You can find localization files in one of the Webix Github repositories. Here are some translations (a couple of them are contributed by users) and English locale for all complex widgets.

Two steps are required to change the default locale for a complex widget. First step is to set custom translations by creating the needed locale (below it is “zh”) within the docManager.locales object:

The default locale (English) is stored in the same object and can be accessed using the ‘en’ key (docManager.locales.en).

The second step is to define the current locale. This can be achieved by setting the locale property of the widget in the constructor:

If there is a need for a switch back to English, the algorithm is as follows:

• get the “locale” service of the widget’s instance
• use the setLang() method to set the language of the locale to English.

The built-in labels of Webix components within complex widgets, as well as the localization of dates and numbers, depend on the currently used Webix locale.To synchronize the localizations of complex widgets and Webix, the webix parameter should be defined in the widget constructor:

With Webix it is possible to switch languages dynamically. For example, this feature can be implemented as a couple of switch buttons in the toolbar.

First step is the synchronization of complex widgets and Webix, as was described a bit earlier:

Next step is to get the “locale” service and use the setLang() method to display the selected language.

Related sample: Document Manager: Switching Locales

As you can see from these practical implementations of locales, it is quick and simple to customize the user interface with Webix. Sarah’s team would only need to write a few lines of code to implement the desired settings, which would reduce the time and cost involved.

Conclusion

In this article, we’ve tried to highlight the importance of localization in web application development. A successful localization strategy allowed our protagonist to create an app that resonates with users worldwide. And the utilization of ready-made solutions, such as Webix, made the localization process much easier and more efficient.

If you want to try Webix for yourself, download it via npm, Client area or click the big purple button below. Visit the documentation and the snippet gallery to learn more about all the possibilities of the Webix widgets.

Download Webix