Hello everyone! My name is Kyle West, I'm a Staff Engineer at FamilySearch. Full disclosure, this talk arose from an argument I had at lunch with a friend. He's a backend engineer, and one day he said something to the effect of: > Well as a UI guy, you don't have to think about things like _scaling_. That might be nice. My friend is a smart guy, but I know that this comment came from decades of backend engineers hating on the frontend. There's a common misconception that "making things look pretty" isn't as complex as the problems backend folk like to solve, but it's entirely false. Frontend folk solve just as complex of problems, if not more so—because UX is full of unsolved problems.

Today I just want to tackle one angle of those kinds of problems: Scaling your application. But what do I mean by "scale". When you hear this word, you might think of: - Load balancing - CDNs - Orchestration Layers - Microservices And this is indeed what the industry tends to think of in terms of scale. But they all follow under the umbrella of "performance" Performance is important to the success of a product. But there is _so much_ more that goes into building a scalable product.

What I am talking about, is a topic with many names. You've probably heard of some or all of these terms, and there's a lot of nuance between each of them, but all of these concepts solve the same general problem: > How do I build something that anyone can use? That's what I want to talk about today. You'll hear me use the term "globalization" to refer to this concept, but just know there are many parts to it.

The first and most obvious problem you'll come across is that not all users around the world speak your language. You'll need to implement a system that lets you swap out the strings in your UI to something the user can read. This use to be a hard problem, but today it's more or less solved.

Now you can just create a JSON file to hold your string values. Notice here that I am using something called the ICU Message Format. It's a little hard to read at first, but it allows us to write some complex interpolation rules. Modern libraries tend to support ICU format.

Here is an example using react-i18next. If you app doesn't support localized strings, you can see that this is fairly trivial to add with modern tools.

In fact, it's less than 20 lines of code to get you started. Normally I wouldn't even show you the config because I basically copied it from the react-i18next getting started page, but there's something here that I want to point out.

Where people tend to under optimize, is with choosing an appropriate fallback language. The cheapest option, is just fallback to whatever language the product was originally written in. And that works. It more or less guarantees that a string will show up in any given context. But this is not always the best.

Consider this instead. Your users might prefer something other than your default. Now they can always indicate this with the Browser Settings, but not all will. See here that you can set a list of fallbacks for each locale to be smarter about what is shown when a language is missing for a feature. You might ask, "Why isn't this list standard." That's because it should be a function of what languages you support on your site.

And that's often good enough for a large portion of the world. But if your product keeps growing, one day you will discover that just adding strings isn't enough for a global user base.

There's a significant portion of the world (about 11% of the total population) that requires a significant change to your UI to support.

I'm talking about supporting Right-to-Left languages. like: Arabic, Hebrew, Farsi, etc.

One thing that's drastically different from right to left languages, is that their UI...

...should be the mirror opposite of Left to Right layouts. Why is that?

It's because all that work we did during the design phase to get proper balance, grouping, whitespace, etc would be ruined if all we did was have the text right-justified.

See here how the balance changes as we shift the design around towards mirroring. Notice how the second panel feels off ballance. The text feels disconnected from the Avatar and the controls feel over emphasized. Look at the third panel. See how mirroring the UI restores the balance to what the first panel has. We need that for when we render RTL UIs.

Good news is that the browser does half of the heavy lifting for you. Things like Flex and Grid layouts will automatically render their children in reverse order. We just need to finesse a few things ourselves to get things looking good.

The hardest shift is that you need to stop thinking in directional CSS and shift to using logical positioning. Keep in mind that these are just a few of them I felt like calling out. There are plenty more. You can find all of these on MDN if you want to look more into this later.

Confession, this is where I stop being an expert and have become a student. I've been studying this topic a lot recently, but the more I learn, the more I realize that I don't know nearly as much as I want to. I'd like to share with you what I am learning though, if that's ok.

If you take a look at our map from earlier, notice the places we still haven't been able to adequately serve. Unlike the ones we've been working with before. These users have drastically different needs than anything else we've encountered.

For one, they aren't always online like the others. Not everyone in the world has reliable or strong internet.

Further, may of these people suffer from extreme poverty.

These and other factors have several implications on how our users will approach our products. As a comparison, lets take a look at our "average" user we currently serve.

We can't just shoehorn our old solutions (with their accompanying assumptions) into people's lives. We need to adapt our understandings and work culture to meet people where they are at.

I'd like to leave you with one of my favorite quotes from Mr Rogers. After this presentation, you might be feeling a little overwhelmed by all the complexity that needs to be maintained to have a global product. When I feel overwhelmed, I think about all the amazing people I've met from all over the world. Everyone is unique, and that means our needs are all unique. But this diversity is what makes life beautiful.

I'm Kyle West. You can find me on BlueSky or LinkedIn under @KyleWestCS. You can find my slides on my website at kylewest.dev/slides It's been a pleasure, Thank so much you! ---------