Building JS Apps with Internationalization (i18n) in Mind

Rate this content
Bookmark

At Adobe we build products for the world, this talk with provide a high level overview of internationalization (i18n), globalization (g11n), and localization (l10n) best practices. Why these are important and how to implement in design, UX, and within any JS codebase - using vanilla JS examples, and top open source library recommendations.

Naomi Meyer
Naomi Meyer
21 min
20 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk discusses building JavaScript apps with internationalization in mind, addressing issues such as handling different name formats, using Unicode for compatibility, character encoding bugs, localization and translation solutions, testing in different languages, accommodating translated text in layouts, cultural considerations, and the importance of enabling different languages for users. The speaker also mentions various open source tools for internationalization. The Talk concludes with a reminder to avoid assumptions and embrace diversity in the World Wide Web.

Available in Español

1. Introduction to Internationalization

Short description:

Hello, JS Nation! Thanks for joining me today! I'm really excited to share with you all some ideas about building JavaScript apps with internationalization in mind. My name is Naomi Meier, and I work on the globalization engineering team at Adobe where I do internationalization engineering for a lot of different Adobe apps. Let's start with a name example. So this is a very common string that we see often in English, where folks introduce themselves with the syntax of, Hello, my name is Naomi Meyer. So this is my first name or given name in blue, followed by my last name, family name or surname. So if we take this simple string and translate it here into Japanese, Hindi, Hebrew, Arabic, Korean and Chinese, we can see that that syntax of first name, last name is sometimes switched. Sometimes it's last name, first name and obviously sometimes the text is read left to right. Sometimes the text is read right to left. And so this is kind of just a really visual representation of how we can identify a user's name differently across different locales. This is how Google handles that problem with when you create a Google account, you enter a first name and a last name as distinct data fields. But Twitter recently came out with a great solution to this problem where they have just a simple name field where a user can go in and enter their name and their native script and their native first name, last name, last name, first name kind of syntax. And it will be stored as one distinct field. So I think this is a really cool solution to the username internationalization problem.

Hello, JS Nation! Thanks for joining me today! I'm really excited to share with you all some ideas about building JavaScript apps with internationalization in mind. My name is Naomi Meier, and I work on the globalization engineering team at Adobe where I do internationalization engineering for a lot of different Adobe apps.

So, this is where you can find me online, on my Twitter and my website. And if there's anything that you're feeling passionately about, please let me know. I would love to continue this conversation online. So, here's our agenda for today. I'm going to start with a name example and then move into some definitions of localization, internationalization, globalization, just to kind of level set and make sure that we're all on the same page. And then I'll move into my top five tips to avoid the most common mistakes that we find with internationalizing JavaScript. And then end on culturalization. So overall, the aim of this kind of general presentation is to encourage you all to create experiences that are equally usable, relevant, and meaningful for users all across the globe, and to really amplify the voices of our global users. So I would like to invite you all and encourage you, you know, my fellow JS coders to go out there and really put the world in the world wide web. So let's talk about how we can do that.

Let's start with a name example. So this is a, you know, a very common string that we see often in English, where folks introduce themselves with the syntax of, Hello, my name is Naomi Meyer. So this is my first name or given name in blue, followed by my last name, family name or surname. So if we take this simple string and translate it here into Japanese, Hindi, Hebrew, Arabic, Korean and Chinese, we can see that that syntax of first name, last name is sometimes switched. Sometimes it's last name, first name and obviously sometimes the text is read left to right. Sometimes the text is read right to left. And so this is kind of just a really visual representation of how we can identify a user's name differently across different locales. And this is kind of a high level problem that we're trying to solve with internationalization. My name is kind of a simple American English name. Here's an example of some other names from Brazil and Portuguese, Russia and India. Kind of common names and how they don't necessarily fit easily into this simple first name, last name paradigm. And some of the challenges that we're facing here. So this is how Google handles that problem with when you create a Google account, you enter a first name and a last name as distinct data fields. So users from regions and languages that don't necessarily follow that paradigm are going to have troubles. But Twitter recently came out with a great solution to this problem where they have just a simple name field where a user can go in and enter their name and their native script and their native first name, last name, last name, first name kind of syntax. And it will be stored as one distinct field. So I think this is a really cool solution to the username internationalization problem. So now that our heads are kind of thinking more deeply about internationalization, let's move on to some definitions.

2. Language Granularity and Unicode

Short description:

When it comes to language, there are different levels of granularity: translation, localization, internationalization, and globalization. Culture plays a significant role in how users interact with digital experiences. Expanding digital content into different languages is crucial. Tip number one is to use Unicode everywhere, ensuring compatibility across different systems and programming languages.

So what are we talking about here? When we start at the most granular level, we have translation where, you know, hello becomes ola, konichiwa, bonjour. Then the next sort of level of granularity would be localization. And that's, you know, in English we spell localization with Z in the United States. But if you go over to the United Kingdom, localization is spelt with an S. And so those are both English, but they're different regional dialectic variations. So that's sort of the level of locale that we get into with localization.

The next sort of level up of granularity is internationalization. And this is more on the engineering side, where we wrap the application in tools for internationalization so that they can be shipped in translated forms. So this is where we go into the pipes, where we if, if a software is a house, we'll reach into the pipes, change them out. And create a system that can be easily translated. Then the next level of granularity is globalization, and these kind of all fall under this umbrella of globalization or G11N. And important to note that these are numeric acronyms. So for globalization we take the first character G, followed by the number of characters and then the last character N. And the more I think about these sort of big ideas, culture is deeply rooted in our thinking patterns and it affects how our users interact with and benefit from digital experiences. So internationalization or globalization really go way beyond translation. And by acknowledging cultural characteristics and really celebrating the differences, we're creating with innovation and sort of accessibility and building products for the whole world of users.

So if we look at these two visualizations, we can see that the majority of people on earth do not speak English as their first language. But we can see that the majority of digital content is in English right now. So this is really an opportunity for us to expand digital content online into different languages for users all across the world to use in their native mother tongues. So let's talk about the top five tips for how we can do that. So tip number one is to use Unicode everywhere. So to start, what is Unicode? I'm sure we're all very familiar with seeing this line in our HTML tags where we say meta char set equals UTF 8 for web. So what is UTF? UTF is the Unicode transformation format. Unicode, right? So here's how UTF is represented across 8, 16, and 32 bits, for the character A and the character O, in Japanese. And so UTF 8 is most common on the web. UTF 16 is used by Java and Windows, and 32 are used by Linux and various Unix systems. So UTF is really cool because it's reversible, and so conversions between all are algorithmically based and fast and prevent lossless round-tripping. So we know that many programming languages will directly use one of these UTF encodings. But as JavaScript engineers, which UTF is JavaScript? This is really important when we think about encoding. And whether you're in Reactor, Angular, View, or Spelt, they're all under the hood encoded in the same way.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

How do Localise and Personalize Content with Sanity.io and Next.js
React Advanced Conference 2021React Advanced Conference 2021
8 min
How do Localise and Personalize Content with Sanity.io and Next.js
Structuring your content with Sanity.io means you can query content based on signals from your visitors, such as their location. Personalisation is a tricky problem with static sites and the jamstack, this demo will show you how it can be done with Sanity.io, Next.js, and Vercel.
End-to-end i18n
React Advanced Conference 2021React Advanced Conference 2021
26 min
End-to-end i18n
There are some great libraries that help with i18n in React, but surprisingly little guidance on how to handle i18n end-to-end. This talk will discuss best practices and practical advice for handling translations in React. We will discuss how to extract strings from your code, how to manage translation files, how to think about long-term maintenance of your translations, and even avoiding common pitfalls where single-language developers tend to get stuck.
Internationalizing React
React Summit Remote Edition 2021React Summit Remote Edition 2021
29 min
Internationalizing React
Learning 100 different languages is challenging, but architecting your React app to support 100 languages doesn't have to be. As your web application grows to a global audience, multilingual functionality becomes increasingly essential. So, how do you design your code such that it is flexible enough to include all of your international users? In this talk, we will explore what it means and what it looks like to build a React app that supports internationalization (i18n). You will learn several different strategies for locale-proofing your application with React contexts and custom hooks.
Emoji Encoding, � Unicode, & Internationalization
JSNation Live 2020JSNation Live 2020
34 min
Emoji Encoding, � Unicode, & Internationalization
Why does '👩🏿‍🎤'.length = 7? Is JavaScript UTF-8 or UTF-16? What happens under the hood when you set ? Have you ever wondered how emoji and complex scripting languages are encoded to work correctly across browsers and devices - for billions of people around the world? Or how new emoji are introduced and approved? Have you ever seen one of these: □ � “special” glyph characters before and want more information on why they might appear and how to avoid them in the future? Let’s talk about Unicode encoding in JavaScript and across the world wide web! We’ll go over best practices, common pitfalls, and provide resources to learn more - even where to go if you want to submit a new emoji proposal! :)
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
React Summit 2022React Summit 2022
8 min
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
i18n isn't easy, but with careful planning of your content model I'll show you how to structure the setup, authoring, and querying of localized content. Covering whole-or-part translated documents, the difference between market and language-specific content, ways to author that in a CMS like Sanity, and ways to query for it on frontends like Next.js and Remix.
i18n Was the Missing Piece: Let 70%+ of the Users in the World to Access Your Apps
JSNation 2023JSNation 2023
13 min
i18n Was the Missing Piece: Let 70%+ of the Users in the World to Access Your Apps
Accessibility, better DX, and performance get a lot of attention as it improves better UX significantly. Plus, it gives satisfaction to devs by seeing the significant improvements. But how about internationalization? A fun fact: Over 70% of the users in the world access non-English content. In this talk, I'll show you more surprising facts about internationalization and what are scalable approaches. You'll see examples with libraries for frameworks with a few different logic to implement different internationalization layouts.

Workshops on related topic

Localizing Your Remix Website
React Summit 2023React Summit 2023
154 min
Localizing Your Remix Website
WorkshopFree
Harshil Agrawal
Harshil Agrawal
Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps