{"id":21929,"date":"2020-01-08T12:19:06","date_gmt":"2020-01-08T12:19:06","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=21929"},"modified":"2020-01-08T12:19:06","modified_gmt":"2020-01-08T12:19:06","slug":"the-importance-of-localisation-and-how-to-implement-and-test-it-in-react","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/the-importance-of-localisation-and-how-to-implement-and-test-it-in-react\/","title":{"rendered":"The importance of localisation and how to implement and test it in React"},"content":{"rendered":"

In this article, we\u2019ll be covering the foundational principles of localisation in React. We\u2019ll start by looking at what localisation is and why it\u2019s important before jumping into code samples to prepare your app for a global audience.<\/p>\n

According to a study done by the European Commission<\/a>, only 53% of internet users would use a website in English if their native language wasn\u2019t available, and over 44% felt as if they might be missing information or receiving inaccurate information because a website wasn\u2019t in their native language. Above all, 72% of participants reported they spend \u201cmost\u201d or \u201call\u201d of their internet time on websites that offer their native language, and even those with high proficiency in English spend 60% more time browsing in their own language.<\/p>\n

It\u2019s clear that making users feel comfortable with your product is important, especially when it comes to being inclusive of their language and cultural needs. The goal of localisation is to do exactly that. With a good infrastructure in place, you can easily set your product up for success on a global scale and ensure your users are getting the experience that\u2019s right for them.<\/p>\n

What is localisation?<\/h2>\n

\"\"<\/p>\n

In software development, localisation is the process of adapting a product to meet your users\u2019 language and cultural requirements. It\u2019s often shortened to l10n<\/em>, as there are ten letters between the l<\/em> and n<\/em>. This includes formatting numeric values (such as date, time, and currency), imagery (such as icons, symbols, and colours), and translating text. As a rule of thumb, everything that your users see is fair game to be localised.<\/p>\n

You\u2019ll often see the term internationalisation<\/em> (shortened to intl<\/em> or i18n<\/em>) thrown around when localisation is mentioned. These concepts both share the same goal, but internationalisation is a broader term that describes the overall process of creating a product that can be shipped on a global scale. It focuses on the infrastructure and architecture of a product, whereas localisation dives deeper into the details of what needs to be accomplished before a product can be considered \u201cready\u201d for a global user base.<\/p>\n

Internationalisation does, however, significantly affect the ease of a product\u2019s localisation. Retrofitting a linguistically- and culturally-centered set of features for a global user base is much more difficult and time-consuming than designing a feature with the intent of shipping it globally from the very beginning. Think back to the Y2K problem \u2014 hundreds of thousands of computer systems worldwide relied on two-digit year fields, rather than four. When the turn of the century hit, systems reported the year as 1900 rather than 2000, leading to many serious real-world issues. If these systems had been built with this scenario in mind, the transition would have been much smoother for everyone involved.<\/p>\n

Similarly, even if you don\u2019t think you\u2019ll be shipping globally now (and maybe not even for a long time), it can still be useful to build with internationalisation in mind. Some of the techniques we\u2019ll cover are generally good practices in any software development. The overarching goal of both localisation and internationalisation is to remove barriers for a global product, including bidirectional text support, Unicode support, and support for dynamic UI, minimising hardcoded strings and string concatenation.<\/p>\n

Why is localisation important?<\/h2>\n

Besides providing us with a method for handling strings in a structured way, localisation is important for three major reasons.<\/p>\n

First, while it can cost a lot of development time to set up the infrastructure and money on professional translations, localising your product expands your user base and therefore your income stream. Only 25.2% of internet users worldwide speak English, and 76.3% of all internet users are spread out across ten languages<\/a>.<\/p>\n

Second, it\u2019s important to be sensitive across all cultures. During my time at Microsoft, a bug report was filed titled \u201cVS Installer welcome image contains offensive element for Chinese [users]<\/a>\u201d. This was a huge problem for our Chinese market, and a fix was released to production within ten days.<\/p>\n

Finally, in the context of web apps, localisation allows us the opportunity to provide in-context translations that focus on quality and experience, rather than automatic translations provided by browsers.<\/p>\n

Localisation goals<\/h2>\n

When we think about how to implement a localisation solution in our app, it\u2019s important to lay out a few goals to help guide us.<\/p>\n

Single source of truth<\/h2>\n

There should be no confusion about which version of an English string is the correct one. This helps eliminate inconsistencies across the product (for example: we shouldn\u2019t have some features that say \u201cRemove\u201d and others that say \u201cDelete\u201d when they perform the same action).<\/p>\n

Arbitrary number of languages<\/h2>\n

There should be no upper bound to how many languages we\u2019re able to support. Adding support for a new language to the product should require minimal effort from developers.<\/p>\n

Decoupled<\/h2>\n

Adding translations and developing features should be kept as independently as possible, so that both tasks can happen in parallel and without conflicts.<\/p>\n

Automated<\/h2>\n

We should strive to automate as much of this process as possible to make our solution more efficient and less error-prone.<\/p>\n

Watch Isabela\u2019s Nordic.js talk on localisation:<\/em><\/p>\n