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

Rate this content
Bookmark

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.

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.

Available in Español

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.

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.
Building JS Apps with Internationalization (i18n) in Mind
JSNation 2022JSNation 2022
21 min
Building JS Apps with Internationalization (i18n) in Mind
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.
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.

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