i18n Was the Missing Piece: Let 70%+ of the Users in the World to Access Your Apps

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

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.

This talk has been presented at JSNation 2023, check out the latest edition of this JavaScript Conference.

FAQ

The speaker of the talk is Erys Erczeki, a Deferral engineer working at Storyblock.

The main topic of the talk is the impact of internationalization (I18n) on making applications accessible to over 70% of users worldwide.

The three takeaways from the talk are: the impact of I18n on developers, the fundamental logic of I18n, and how I18n works with Remix.

The intended audience for this talk is developers who implement internationalization.

The three ways to determine languages and regions mentioned are: detecting location from the IP address, respecting users' browser settings, and identifying languages in the URL.

Remix I18next is an npm package for Remix that facilitates the use of I18next for internationalization.

Translation should be loaded before hydration to ensure that users can see the localized content immediately when the application becomes interactive.

The two general approaches to internationalization mentioned are using an npm package like I18next and using a content management system (CMS).

One challenge mentioned is that developers need to maintain the translation files, ensuring they are up-to-date and correct.

Localized subdirectories in URLs provide a cleaner and more user-friendly way to differentiate languages and regions.

Arisa Fukuzaki
Arisa Fukuzaki
13 min
05 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Today's Talk explores the impact of I18n and DEX for developers, the challenges of I18n, and the importance of understanding different approaches. It discusses determining languages and regions using IP address, browser settings, and URL patterns. The Talk also covers translation loading, using the i18xProvider, and addressing issues such as URL parameters and maintaining translation files. Additionally, it explores connecting with a Content Management System, implementing folder level translation, and utilizing code splats for dynamic routes.

1. Introduction to I18n and its Impact

Short description:

Today, we're going to see how I18n makes applications accessible to over 70% of users. We'll explore the impact of I18n and DEX for developers, the fundamental logic, and how it works with Remix. Internationalization (I18n) has its challenges, including a relearning cost and mismatched localized text and I18n keys. However, the numbers speak for themselves. With 5.07 billion Internet users and English accounting for only 25.9%, understanding different approaches to I18n will improve your current DX.

Hi, everyone. Thank you for watching my talk. My name is Erys Erczeki. I'm a Deferral engineer working at Storyblock. Today, we're going to see together how I18n gives the impact and making your applications accessible to over 70% of the users in the world.

Moving on to the next slide. And here are the three takeaways from my talk. First of all, we're going to see the impact of the I18n as well as the DEX for the developers. And we're going to see the fundamental logic. Lastly, we're going to see how it works with Remix.

There are a couple of notes. So this talk is first of all for the developers who implement internationalization. Secondly, Remix and I18n feature on going discussions. If you're interested to join the discussions, here's the link. And I'm going to make sure to share my slides on the social media. So you will have access to all the sources I'm going to share.

So internationalization. I18n is first of all an acronym of internationalization. And let's see some of the I18n developer experience. So here's my friend, Maya. She shared with me her experience on Twitter saying that there is a relearning cost how to use the internationalization library every single time. And there is also another issue I would say that localized text versus the I18n keys, you know, in the test, they're not matching. So from her opinion or not just her, but based on that, seems it's not the best DX. So based on, you know, like the current I18n DX you have, let's talk about the numbers and facts.

So starting from the whole entire numbers of the users in the world, actually, it's 5.07 billions of the users using the Internet. And surprisingly, English is used only 25.9% on the Internet. And Asia leads more than half of the global Internet users. So all the numbers are huge, right? And we cannot simply ignore about these, you know, massive numbers. And by knowing the different approaches with more options will actually solve the your current I18nDX. So let's talk about fundamental logic.

2. Determining Languages and Framework Examples

Short description:

There are three ways to determine languages and regions: IP address, browser settings, and URL patterns. The Remix I18next example uses an npm package, while the content management system approach combines different systems. I18next configuration files define supported languages, fallback language, and namespaces. The client and server side configuration files ensure translations are loaded before hydration.

There are three ways to determine the languages and the regions. First of all, there is the way to detect the location from the IP address, which we are not going to cover in this talk. But secondly, here is the example of respecting users, you know, like configured in their browser setting, you know, like which languages to choose. And lastly, there is a way to identify in the URL. And I'm going to show you the three patterns to identify URLs.

So pattern one is differentiating, you know, by domains, but it will not follow the same origin policy. The pattern two is using the URL parameters, but it doesn't look user friendly, right? And the last pattern is localized sub directories. This looks much cleaner and much more user friendly.

So moving on to the framework examples, there are in general two approaches to choose. So the first approach would be like using an npm package that is, you know, related with I18next. And the other approach is with a combination of the content management system. So this talk is about the Remix, so I'm going to show you the Remix I18next example first. And moving on to show you the content management system example.

So Remix I18next is an npm package for Remix to use the I18next. So first step would be creating the translation files. In this case, I have a default language in English saying greeting hello and translated, you know, like the translation file greeting says hello in Japanese, and let's create I18next configuration file. So in here, what I'm defining is supported languages, fallback language and the default namespace. This namespace common is actually what I gave the names into these translation file. Moving on to, you know, like the other file called I18nextserver.js file. So in here what I'm doing is importing what we configured in I18next config file, and you know, like from the previous file, what we configured, the values are actually arrays in the strings. So we iterate them from the configuration file from the previous slide. And the rest we are setting the translation file path. So next up is creating the client side and the server side configuration files. From the time I have, I'm going to focus on the client side, but don't worry about it, server side, you know, config files looks pretty much the same and a few differences. So entry.client.jsx file. What I want you to pay attention to is with the orange highlighted, you know, line of the code, which is an API called i18xProvider. So with this, by using this API, we want to ensure the translations are loaded before the hydration happens. And we're going to see why together in one of the following slides. And next up, you know, we wrap the remix browser component in between i18xProvider component. So we're also going to see the reasons in one of the following slides.

3. Translation Loading and i18xProvider

Short description:

Translation should be loaded before hydration to ensure the application is interactive. Wrapping the remix browser component with i18xProvider uses the React hook use memo to avoid unnecessary re-rendering. The app directory contains APIs like loader function, use loader data, JSON, and use change language. The use translation API allows for switching between languages. However, there are some issues to address, such as URL parameters, maintaining translation files, and translating slugs.

So the first why, why translation should be loaded before the hydration. So imagine if translation is not loaded before the hydration happens, the application is not yet interacted. So users cannot see, you know, the localized value. And the other example, if translation is already loaded before the hydration happens, the application is interactive. So users can see the localized content.

Moving on to the second one, why wrapping remix browser component with i18xProvider. So I did a little bit of research in modules. And here's what I found, what I found, where, you know, like i18xProvider has been defined. So it uses actually a, you know, React, sorry. So it uses actually the React hook called use memo. And this, this actually catches the result of the calculation between re-renders. So what I mean by that to say is, you know, like this i18nConfiguration values and the default namespace values are the same, then we don't trigger the re-rendering. But if the values or either one of the values are changed, then that's the only time we are going to trigger the re-rendering. So let's use the configurations in action.

Moving on to the app directory, you know, opening up this root.jsx file, then I wanted to pay attention to the three APIs. So the first one is called loader function. This loader function is a backend API already provided remix site. And it's already, you know, connected with the use loader data. So this use loader data gets the local from the loader function. And lastly, what we are doing is calling an API called JSON. So instead of you know, like defining the new response headers, blah, blah, blah, you can do the same thing with just, you know, one line of the code. And in the end, there is a function called use change language. So this function updates the I18n instance language to the current locale from the loader function and locale will be updated and I18n loads the correct translation files. So let's see how it goes on the browser with the last configuration. So any route of your files at remix app, what I'm doing is importing one API called use translation and setting the value that we define in the very beginning of one of the translation files creating. So you can see you know now back and forth between you know like English and in this case Spanish, you can see the content you know are you know like switching back and forth. But if you have realized a couple of things I have three confessions. First of all if you paid attention on the URL, yes I use the URL parameters which I wanted to avoid. Secondly we developers need to maintain the translation files and lastly we didn't translate the slugs. So to clean up everything what we haven't yet achieved let's have a look at another example with the Content Management System.

4. Connecting with CMS and Folder Level Translation

Short description:

In this part, we connect the Remix application with a Content Management System, specifically using the example of Storyblock. We explore the folder level translation approach, where different folders are used to store localized content. We see how this approach works in the browser and how to implement the logic from the source code level. Additionally, we discuss the use of code splats provided by Remix to create dynamic routes. Overall, we emphasize the importance of i18n in improving performance, UI, and UX.

So the first step will be connecting your Remix application with Content Management System of your choice. In this talk I'm going to show you the example with the story block, but I'm not going to cover you know like how you can create a connection. Instead I would offer you to have a look at the five minutes tutorial after my talk and you can choose you know like which sort block between four approaches so from the time again I'm going to cover one of the approaches called folder level translation and as you can visually see on the screenshot we divide it into the different folders to have different localized content and let's see how it's going to work on the browser first before we're going to see you know like how we can create the logic from the source code level.

So here is a very little you know blog application that I have built with Remix and Storyblock so we are at right now in the default language of the home that's why you do not see any I would say like locale related slug so we are at the traveling to Salt Lake City in the default language and when I move to the Japanese version of exactly the same entry blog post now on the url we can see the Japanese slug which says ja in front of 4 blog and the content has been localized and on the right hand side as you can see content editors and the translators they can already you know work on their own and when I move back to the blog overview page which we saw together before in the default language you can see the Japanese translated version with the translated slug and if I go back to the root of the home with the default language now I can see the content has been back to the default language which is in English.

Let's move on to the fundamental let's move on to the logic how I was able to create you know like some of the options for the not some of I mean actually like the options for the content editors and the translators to have more controls and take care of creating you know these dynamic routes from the content management systems UI. I used the approach code splats provided from Remix. So in a nutshell besides from you know the important you know three APIs that we already covered before LoaderFunction, UseLoaderData, JSON I wanted to pay attention to the green highlighted line of the code which uses the special parametric code params with the square brackets and the string value of the asterisk. So if you set this value into the console.log and move in back and forth between different you know the pages such as like home or block entry you're going to see the full slags you know like being returned on your on your terminal and by using you know the special parameters which is already provided from the Remix side and a little bit of the modifications of the slags then you already have you know the logic that you just saw like on the recordings I showed you.

So here's a little summary of my talk. We saw together more than a half of the users in the world access localized content and next by knowing more approaches to find better DX for your cases. So this is just one of the examples what I showed you and if you do a little bit of more research which I highly recommend you, I want to tell you that you will be able to find the best approaches that fits better in your cases. And lastly, I also want to emphasize about this that i18n is related to performance UI and UX. And that's actually all about my talk.

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 2021React Advanced 2021
8 min
How do Localise and Personalize Content with Sanity.io and Next.js
Top Content
Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.
End-to-end i18n
React Advanced 2021React Advanced 2021
26 min
End-to-end i18n
Thanks for joining my talk on end-to-end internationalization. I'll walk you through internationalizing a React app, covering translated strings, currency and date formatting, translator management, and injecting translated strings back into the app. The constants used throughout the app define localization settings and translations. The React Intel library is used for managing translations, and custom functions are created for consistent date and number formatting. The translation process involves extracting strings, using tools like PO Edit, and compiling the translated strings into JSON files for the React app.
Emoji Encoding, � Unicode, & Internationalization
JSNation Live 2020JSNation Live 2020
34 min
Emoji Encoding, � Unicode, & Internationalization
This Talk explores the UTF-8 encoding and its relationship with emojis. It discusses the history of encoding, the birth of Unicode, and the importance of considering global usage when building software products. The Talk also covers JavaScript's encoding issues with Unicode and the use of the string.prototype.normalize method. It highlights the addition of emoji support in Unicode, the variation and proposal process for emojis, and the importance of transparency in emoji encoding. The Talk concludes with the significance of diverse emojis, the recommendation of UTF-8 for web development, and the need to understand encoding and decoding in app architecture.
Building JS Apps with Internationalization (i18n) in Mind
JSNation 2022JSNation 2022
21 min
Building JS Apps with Internationalization (i18n) in Mind
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.
Internationalizing React
React Summit Remote Edition 2021React Summit Remote Edition 2021
29 min
Internationalizing React
The Talk discusses the challenges of adding and maintaining new languages in a React application and suggests ways to make the process easier. It defines internationalization as the process of architecting an application for localization and explains that localization involves adapting the content and experience for a specific locale. The speaker recommends using libraries for internationalization and provides resources for learning more about the topic. The Talk also addresses edge cases and difficulties with multiple dialects or languages, translation processes, and right-to-left CSS libraries.
Modern JavaScript: Leveling Up Arrays and Intl
JSNation US 2024JSNation US 2024
27 min
Modern JavaScript: Leveling Up Arrays and Intl
Watch video: Modern JavaScript: Leveling Up Arrays and Intl
Hi, I'm Mariko from Chrome Developer Relations Team. Let's dive into the talk, leveling up JavaScript. I sat down and learned JavaScript. I sat down and learned ES6 again. TC39 has published a new version of JavaScript spec every year. I want to focus on the parts of JavaScript that got updates recently. So ArrayFlat creates a new flattened array. You can also pass a depth argument to flatten nested arrays. Another method, copyToReserve, creates a reversed copy of an array. There's also copy to sort, which creates a sorted copy of an array. Another useful method is array to spliced, which allows you to remove and add items to a copied array. Lastly, the array at method returns an item at a given index. Array at accepts negative numbers for reverse order lookup. Find last iterates in reverse order and returns the item or index. Copy to change the value at a given index with a function. Object group by allows grouping and creating a new object by type. JavaScript intl allows for word segmentation in different languages, improving readability. It also includes features like data type format, number format, and plural rules for locale-based results. Staying up to date on web features is challenging due to time-consuming research and potential errors in implementation. Baseline provides clear information on web platform features supported by major browsers, ensuring compatibility without issues. Baseline provides two levels of support: newly available and widely available. By aligning your project to Baseline, you can confidently avoid browser compatibility issues. You can use Baseline to keep up with what's new on the web by installing the Baseline widget. Websites and dashboards like feature explorer and web starters.dev have been released. The project roadmap includes developer tooling and integrating Baseline into linters and actions. Check the RAM archive insights page for user data based on Baseline years. We are planning for more tools next year, including linting and AI integration.

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